[JavaScript] 모던 자바스크립트 입문 - 3장 변수

3장 변수

3.1 변수

3.1.1 변수

• 변수는 컴퓨터의 메모리에 생성된 일정한 크기의 영역

3.1.2 변수 선언

• var sum;
• 메모리에 'sum' 이라는 이름이 붙은 영역이 생성됨
• var 는 변수를 선언하는 선언자
• sum 은 변수 이름
• 자바스크립트는 변수에 모든 데이터 타입의 값을 저장할 수 있음
• ES5 까지는 var 선언자만 존재했었지만 ES6에 let, const 선언자가 추가됨
• var x;
• 변수를 선언만 하고 값을 대입하지 않음
• 변수에는 undefined (정의되지 않았다는 뜻!)라는 값이 들어감

3.1.3 변수 선언 생략

• console.log(x);    // ReferenceError: x is not defined
•  선언하지 않은 변수 값을 읽으려고 시도하면 참조 오류 발생
• x = 2
• 선언하지 않은 변수에 값을 대입할 때는 오류가 발생하지 않음
• 자바스크립트 엔진이 그 변수를 자동으로 전역 변수로 선언하기 때문!
• 그러나, 선언하지 않고 사용하면 버그의 원인이 될 수 있으므로 반드시 선언하고 사용해야 함

3.1.4 변수 끌어올림과 변수 중복 선언

• console.log(x);    // undefined
  var x;
• 변수를 선언한 위치와 관계없이 변수가 프로그램 첫머리에 선언된 것처럼 동작함
• 이를 Hoisting(호이스팅), 변수 선언의 끌어올림이라고 함
• console.log(x);    // undefined
  var x = 5;
  console.log(x);    // 5
• 선언과 동시에 대입하는 코드는 끌어올리지 않음
• 같은 이름으로 선언된 변수는 모두 끌어올린 후에 하나의 영역에만 할당됨

3.2 데이터 타입

3.2.1 데이터 타입과 변수의 동적 타이핑

• 데이터 타입: 변수에 저장하는 데이터의 종류
• 정적 타입 언어: 변수에 타입이 있는 언어
• 자바스크립트는 동적 타입 언어
• 변수에 타입이 없어 모든 타입의 데이터 저장 가능
• 실행할 때 변수에 저장된 데이터 타입을 동적으로 변경 가능

3.2.2 데이터 타입의 분류

• 원시 타입(Primitive type): 숫자, 문자열, 논리값, 특수한 값(undefined, null), 심벌(Symbol)
• 데이터를 구성하는 가장 기본적인 요소
• 불변 값 (값을 바꿀 수 없는 데이터)
• 객체 타입: 배열, 함수, 정규 표현식
• 변수 여러 개가 모여서 만들어진 복합 데이터 타입
• 객체 안에 저장된 값은 변경 가능
• 참조 타입 - 객체 타입의 값을 변수에 대입하면 변수는 그 객체에 대한 참조가 할당됨

3.2.3 숫자

• 자바스크립트에서 숫자는 모두 64비트 부동소수점으로 표현 (C, JAVA의 double 타입)
• 리터럴(Literal): 프로그램에 직접 작성할 수 있는 상수 값
• 정수 리터럴(ex. 123, 0x2a, 0o73, 0b101), 부동소수점 리터럴(ex. 3.14, 0.123, 6.02e23, 1.616199E-35)

3.2.4 문자열

• 자바스크립트 문자열은 길이가 16비트인 유니코드 문자(UTF-16 코드)를 나열한 것
• 작은따옴표(') 또는 큰따옴표(") 사용
• 줄 바꿈 문자와 탭 문자 등을 사용하기 위해서는 이스케이프 시퀀스 사용해야 함
• 이스케이프 시퀀스: 역슬래시(\) 뒤에 특정 문자를 뜻하는 기호를 표기한 형태 (ex. \n, \t, \b 등)

3.2.5 논리값

• 조건식이 참(true)인지 거짓(false)인지 표현하기 위해 사용
• x == 2
• x 값이 2와 같은지 판별하는 조건식
• 같으면 true, 다르면 false

3.2.6 특수한 값

• undefined: 정의되지 않은 상태
• 값을 아직 할당하지 않은 변수의 값
• 없는 객체의 프로퍼티를 읽으려고 시도했을 때의 값
• 없는 배열의 요소를 읽으려고 시도했을 때의 값
• 아무것도 반환하지 않는 함수가 반환하는 값
• 함수를 호출했을 때 전달받지 못한 인수의 값
• null: 아무것도 없음
• 주로 프로그램에서 무언가를 검색했지만 찾지 못했을 때 아무것도 없음을 전달하기 위한 값으로 사용됨

3.3 ECMAScript 6 부터 추가된 데이터 타입

3.3.1 심벌

• 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값
• var sym1 = Symbol();
  var sym2 = Symbol();
  console.log(sym1 == sym2);    // false
• Symbol() 사용해서 심벌 생성
• 호출할 때마다 새로운 값을 만듦
• var HEART = Symbol("하트");
• 심벌에 설명을 덧붙일 수 있음
• var NONE = Symbol("none");
  var BLACK = Symbol("black");
  var WHITE = Symbol("white");
• 오셀로 게임에서 칸의 상태를 심벌을 활용하여 표현한 예제
• 심벌은 유일무이한 값이므로 변수 cell 값을 확인할 때  NONE, BLACK, WHITE 만 사용하도록 제한 가능
• var sym1 = Symbol.for("club");
  var sym2 = Symbol.for("club");
  console.log(sym1 == sym2);    // true
• 문자열과 연결된 심벌 생성
• 이 기능을 활용하면 코드의 어느 부분에서도 같은 심벌 공유 가능
• 아직 심벌에 대한 개념이 명확하지 않다.. 언제 쓰는지 모르겠다..
• 자세한 설명은 아래 참고..
• https://blog.perfectacle.com/2017/04/16/es6-symbol/