profile Archive Of Records keep studying

JavaScript 변수와 데이터 타입

Sep 1, 2020 » JavaScript

변수 (Variable)

  • 문자나 숫자 같은 데이터 값(value)을 담는 데이터 저장 공간 (메모리 공간)
    • 데이터 값을 저장(할당)하고, 그 저장된 값을 참조하기 위해 사용
  • 한 번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아 사용
  • 변수는 위치(주소)를 기억하는 저장소 -> 메모리 주소(memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)
    • 여기서 위치는 메모리 상의 주소(address)를 뜻함



변수 선언

var a;

  • var
    • 자바스크립트 키워드로 변수를 선언하기 위한 선언자
    • 변수는 반드시 선언하고 사용
  • a
    • 변수 이름
    • 변수 이름으로 변수 값을 읽거나 쓸 수 있음
    • 변수 이름을 통해 값의 의미를 명확하게 알 수 있어 코드의 가독성 좋아짐

  • 변수 여러 개를 한 문장으로 선언 시 쉼표 사용

    ex) var a, b, c;

  • 변수를 선언하기만 하면 변수 안에는 정의되지 않았음을 뜻하는 undefined 값 들어감
    • console.log(); => 소괄호 안에 든 값을 콘솔 화면에 표시하라는 뜻
      var a;
  console.log(x); // >> undefined



변수 대입

  • 대입(=) 연산자를 사용하면 값 대입 가능

  • 프로그램에서는 =이 =를 기준으로 오른쪽 값을 왼쪽 변수에 대입한다는 뜻 지님

    ex) var a = 2; var a = 2, b = 1, c = 3;



변수 끌어올림

  • 변수 선언의 끌어올림 (호이스팅, 변수 선언 전 참조)
    • 프로그램 중간에서 변수를 선언하더라도 변수가 프로그램 첫머리에 선언된 것처럼 다른 문장 앞에 생성
    • 모든 변수 선언문은 스코프 내에서 최상위로 호이스팅 됨
      console.log(a); // >> undefined (값을 할당하지 않은 결과), 에러 뜨지 않음!
  var a;


    • 선언과 동시에 대입하는 코드는 끌어올려지지 않음 
      console.log(a); // >> undefined
  var a = 5;
  console.log(a); // >> 5


  • 되도록이면 변수 선언부를 반드시 프로그램 시작 부분에 위치시키도록 하자



변수 명명 규칙

  1. 알파벳, 숫자, 밑줄, 달러 기호 ($) 사용 가능
    • 다른 언어도 사용할 수 있지만 잘 쓰지 않음
  2. 첫 글자는 알파벳, 달러 기호 중 하나여야 함
    • 첫 글자 숫자 불가능
  3. 예약어 사용 불가능
  4. 대, 소문자 구분하여 사용
  5. 공백 문자 사용 불가능



예약어

  • 자바스크립트 문법을 규정짓기 위해 자바스크립트 언어 사양에서 사용하는 특수한 키워드
  • break, case, catch, class, const, continue, debugger, default, delete, do, elsem, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield…



변수명 표기법

  • 캐멀 표기법
    • 두 번째 이후 단어의 첫 글자를 대문자로 표기
    • 보통 자바스크립트에서 이 표기법을 사용함

    ex) userName, userEmail

  • 파스칼 표기법
    • 각 단어의 첫 글자를 대문자로 표기, 나머지는 소문자로 표기

    ex) UserName, UserEmail

  • 헝가리안 표기법
    • 첫 번째 단어의 첫 글자는 소문자, 이후 추가되는 단어들의 첫 글자는 대문자로 표기

    ex) userNameName, userEmailEmail

  • 밑줄 표기법 (snake_case)
    • 모든 단어는 소문자로 표기, 단어와 단어를 밑줄로 구분
    • 보통 파이썬에서 이 표기법을 사용함

    ex) user_name, user_email

  • 케밥 표기법
    • 모든 단어는 소문자로 표기, 단어와 단어를 -(하이픈)으로 구분

    ex) user-name, user-email



전역 변수와 지역 변수

  • 전역 변수: 자바 스크립트 내 어느 위치에서든 선언하여 코드 전 영역에서 사용할 수 있는 변수
  • 지역 변수: 변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용할 수 있는 변수
    • 자바스크립트의 지역 변수는 함수에서만 유효함



변수 키워드(예약어) 및 상수 키워드


변수 키워드(예약어)


  • var
    1. 함수 스코프 (function scope)
      • 함수 내에서 선언된 변수는 함수 내에서만 유효
      • 함수 밖에서 참조할 수 없음
      • 함수 내에서 선언되면 지역 변수, 함수 외부에서 선언되거나 키워드 생략 시 전역 변수
    2. 변수 중복 선언 가능
    3. var 키워드 생략하고 선언 가능
      • 만약 내부에서 var 키워드를 생략한 채 선언했다면 그 변수는 자동으로 전역 변수로 선언됨
  • let
    1. 블록 스코프 (block scope)
      • 모든 코드 블록 (함수, if문, for문, while문) 내에서 선언된 변수는 블록 내에서만 유효
      • 외부에서 참조할 수 없음
      • 지역 변수
    2. 변수 재할당 가능
    3. 같은 이름으로 재선언 불가능
      • 변수명 바꾸면 가능


상수 키워드


  • const
    1. 변하지 않는 값(상수)을 갖는 변수
    2. 블록 스코프
    3. 변수 재선언, 재할당 모두 불가능
      • 변수를 처음 선언하면 끝
      • 다만 선언된 변수의 객체 내용은 변경 가능
    4. 반드시 선언과 동시에 대입
      • 값을 주지 않고 쓸 수 없음
       const a; // Uncaught SyntaxError: Missing initializer in const declaration


      • 단, const 안에 객체나 배열을 할당하고, 그 객체의 프로퍼티나 배열 요소를 수정하는 것은 가능!
       const arr = [2, 3, 4];
		
 arr.push(5);
		
 console.log(arr); // [2, 3, 4, 5]
    5. 값이 객체 타입일 때 사용하는 것을 추천



변수 초기화

  1. 숫자 변수 초기화
    • let num = 0;
  2. 문자열 변수 초기화
    • let txt = “”;
  3. 논리 변수 초기화
    • let bool = false;
  4. 객체 변수 초기화
    • let obj = null;



데이터 타입

  • 숫자나 문자열처럼 변수에 저장하는 데이터 종류



데이터 타입의 분류

  1. 원시 타입
    • 숫자 (number)
    • 문자열 (string)
    • 논리값 (boolean)
      • 조건식이 참인지 거짓인지 표현하기 위해 사용하는 값 (true, false)
    • 특수한 값 (undefined, null)
      • undefined => 변수는 존재하지만 값이 주어지지 않은 것
        1. 정의되지 않은 상태, 값을 할당하지 않은 결과
        2. 값을 아직 할당하지 않은 변수의 값
        3. 없는 객체의 프로퍼티를 읽으려고 시도했을 때 값
        4. 없는 배열의 요소를 읽으려고 시도했을 때 값
        5. 아무것도 반환하지 않는 함수가 반환하는 값
        6. 함수를 호출했을 때 전달받지 못한 인수의 값
      • null => 변수가 존재하고 값이 주어졌는데 그 값이 ‘비어 있음’인 것
        1. 아무것도 없음을 값으로 표현
        2. 주로 프로그램에서 무언가를 검색했지만 찾지 못했을 때 아무것도 없음을 전달하기 위한 값
        3. 명시적으로 “없음”을 나타내는 경우에 쓰이는 값
    • 심볼 (symbol)
      • New in ECMAScript 6
  2. 객체 타입
    • 객체
      • 변수 여러 개가 모여서 만들어진 복합 데이터 타입
      • 원시 타입에 속하지 않는 자바스크립트의 값
      • 배열, 함수, 정규 포함식 등