JS - 변수를 아십니까?

아주 간단한 예제로 잊고 있었던 개념에 대해 정리해봅시다.
JS를 쓰지 않는 개발자들은 Q1 - Q3까지 예제의 답을 예측해보세요.:)

문제

개념 1) 변수 그리고 할당과 참조에 대해 설명하세요

개념 2) 변수 선언과 초기화에 대해 설명하세요.

Q1 실행 결과는 무엇일까요?

console.log(score);
var score;

Q2 실행 결과는 무엇일까요?

console.log(score);

var score; 
score = 80; 

console.log(score); 

Q3 실행 결과는 무엇일까요?

console.log(score);

score = 80;
var score;

console.log(score);

정답과 설명

개념 1) 변수,할당,참조란

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

• 변수이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 할당 : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어 들이는 것

개념 2) 변수 선언과 초기화

변수 선언(variable declaration)은이란 변수를 생성하는 것
초기화(initialization)는 변수가 선언된 이후 최초로 값을 할당하는 것을 말합니다.

참고
var 키워드로 선언할 경우 undefined로 암묵적인 초기화가 자동 수행됩니다.

추가 설명
선언은 값을 저장하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것입니다.

Q1 정답

console.log(score); // undefined
var score; // 변수 선언문

// >> undefined

변수 선언보다 변수를 참조하는 코드가 앞에 작성했으니 참조에러(ReferenceError)가 발생할 것 같지만, undefined 가 출력이 됩니다.

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 런타임 이 아니라 그 이전 단계에서 먼저 실행되기 때문입니다.

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라 합니다.

var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수,함수, 클래스)는 호이스팅됩니다.

더 자세히 알고 싶다면 소스코드의 평가와 실행 , 실행 컨텍스트에 대해 공부하는 걸 추천드립니다.

Q2 정답

console.log(score); // undefined

var score; // 1 변수 선언
score = 80; // 2 값의 할당

console.log(score); // 80

// >> undefined
// >> 80

한 줄씩 봅시다.

• var score ; 변수 선언은 런타임 이전에 먼저 실행되고,
• 1번째 줄에 있는 console.log(score) 부터 순차적으로 실행되어 이땐 undefined가 출력이 됩니다.
• 4번째 줄에 있는 score = 80 인 값이 할당 된 후
• 6번째 줄에 있는 console.log(score)는 80이 출력됩니다.

변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됩니다.

변수 선언과 값의 할당의 실행 시점이 다르다는 점을 주의하세요!

Q3 정답

console.log(score); // undefined

score = 80; 
var score; 


console.log(score); // 80

// >> undefined
// >> 80

Q2와 다른점이 있다면 score를 선언을 하기전에 할당을 했다는 점이죠. 실행결과는 Q2와 동일합니다.

더 자세히 알고싶다면 아래 출처 도서 구매를 추천드립니다 :)
출처 : 모던자바스크립트 Deep Dive