자바스크립트 2 - 변수

 

변수

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

식별자

• 변수를 구분할 수 있는 변수명
• 식별자는 문자, 달러($), 밑줄(_)로 시작해야하며 대소문자를 구분하고, 특수문자를 제외한 문자, 숫자, 밑줄(_), 달러($)를 포함할 수 있음
• 예약어(for, if ,function 등)는 사용이 불가능
• 네이밍 컨벤션

카멜 케이스(camelCase)	exampleName
스네이크 케이스(snake_case)	example_name
파스칼 케이스(PascalCase)	ExampleName
헝가리언 케이스(typeHungarianCase)	strExampleName(type + identifier)

변수 선언

자바스크립트에서의 선언은 3가지 종류가 있음

1. var

• ES6 이전에 변수를 선언할 때 사용하던 키워드
• 변수를 선언하며 동시에 값을 초기화(변수 선언 시, 초기 값을 지정하지 않으면 undefined 값을 가짐)
• 재할당 및 재선언이 가능함
• 변수 선언 시, 키워드를 사용하지 않으면 자동으로 var로 선언됨
• 함수 레벨 스코프(function-level scope)를 가짐
  • 함수 레벨 스코프 (function-level scope)
    1. 함수의 중괄호 내부를 가리킴
    2. 함수 스코프를 가지는 변수는 함수 외부에서 접근할 수 없음

2. let

• 블록 레벨 스코프(block-level scope) 지역 변수를 선언
  • 블록 레벨 스코프(block-level scope)
    1. if, for, 함수 등의 중괄호 내부를 가리킴
    2. 블록 스코프를 가지는 변수는 블록 외부에서 접근할 수 없음
• 선언 동시에 값을 초기화
• 재할당 가능 & 재선언 불가능

3. const

• 블록 스코프(block scope) 지역 변수를 선언
• 선언 동시에 값을 초기화
• 재할당 및 재선언 불가능
• 선언 시, 반드시 초기 값을 지정해야하며 이 후 값 변경이 불가능

호이스팅(hoisting)

Javascript에서 인터프리터가 코드를 실행하기 전에 변수, 함수, 클래스 또는 임포트의 선언문을
해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

• var로 선언된 변수의 경우, 변수를 선언 이전에 접근할 수 있음
  • var로 선언된 변수는 선언 시에 undefined로 값이 초기화되는 과정이 동시에 일어남
  • 선언 이전에 접근한 경우, undefined의 값을 반환
• let과 const로 선언된 변수의 경우, 변수 초기화 전에 접근 시 에러 발생
  • 변수 스코프 맨 위에서 변수 초기화 완료 시점까지를 일시적 사각지대(Temporal Dead Zone, TDZ)이라 부름
  • 사각지대는 코드의 작성 순서(위치)가 아닌 코드의 실행 순서(시간)에 의해 발생

따라서 var로 변수 선언을 하게 되면, 호이스팅에 의해 변수 선언 전, 접근이 가능해 코드의 논리적 흐름이 끊기기 때문에 변수 선언에는 var보다 let, const 키워드 사용이 권장됨

 

Shadowing 변수

• 함수 내부에서 외부에 선언된 같은 이름의 변수를 사용하는 경우
  • 함수 외부의 값을 잠시 가려지고(shadow), 함수 내부에서는 내부에서 정의된 같은 이름의 변수 사용(이때, 함수 외부 변수의 값은 변하지 않음)
  • 함수에서 빠져나오면 다시 함수 외부의 변수 접근 가능