프로그래머스 데브코스 4기의 Deep Dive 스터디를 진행하며 <모던자바스크립트 DeepDive>의 주별 챕터를 읽고, 학습 후 복습 및 챕터별 관련 면접 질문 정리를 위한 글입니다.
내용정리
변수 정의
-
변수 사용 이유:
1) 직접 메모리 주소를 참조하고 제어하는 것은 위험하며
2) 동일한 코드를 실행해도 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경되기 때문이다.
3) 더하여 변수명(ex.score)이 메모리 주소(ex. 0x0669F913)를 직접 사용하는 것보다 훨씬 인간친화적이다. -
식별자: 변수 이름. 값이 아닌 값의 주소를 기억한다. 변수 != 식별자.
변수 선언🔥
- 변수 선언: 메모리 공간 확보 + 변수 이름과 확보된 메모리 공간 주소 연결(매핑)의 과정. var, let, const 키워드를 이용해 선언 가능.
- 변수 호이스팅: 자바스크립트 엔진은 변수 순언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 그 후 다른 소스코드를 한 줄씩 순차적 실행한다(이 시점을 '런타임'이라고 한다). 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는데, 이를 변수 호이스팅이라고 한다.
값의 할당
- 값의 재할당: 재할당시 기존 주소의 메모리 값이 변경되는 것이 아니라 새로운 메모리 주소의 공간이 확보되고 식별자가 새로운 주소를 가리키는 방식으로 진행된다.
기타
- 변수명의 중요성 강조
- 네이밍 컨벤션: 1. 카멜 케이스 firstName 2. 파스칼 케이스 FirstName 3. 스네이크 케이스 first_name 4. 헝가리언 케이스 strFirstName, $elem
카멜 케이스가 일반적이라 생각했는데 일관성만 유지한다면 어떤 네이밍 컨벤션이든 사용할 수 있다고 소개하는 것에서 놀랐다. 백엔드와 데이터를 주고 받을 때 특정 네이밍 컨벤션을 정해두면 좋다는 얘기가 떠올랐다.
관련 면접 질문
- 호이스팅이 무엇인가요? 🔥
- var, let, const 키워드의 차이점에 대해 설명해 주실 수 있나요?🔥
호이스팅이 무엇인가요?
자바스크립트 엔진은 변수 선언 부분과 값의 할당 부분을 다른 시점에 실행합니다. 먼저 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행합니다. 그 후 다른 소스코드를 한 줄씩 순차적 실행하는데(런타임), 이런 실행 방식대로라면 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하게 됩니다. 이를 변수 호이스팅이라고 합니다.
// 실제 코드
console.log(score);
var score;
score = 80;
console.log(score); // 작동 방식은 아래 코드와 같이 동작.
var score = undefined; // 선언부가 undefined가 할당되어 선두로 끌어올려진 것처럼 동작.
console.log(score); // undefined
score = 80;
console.log(score); // 80var, let, const 키워드의 차이점에 대해 설명해 주실 수 있나요?
가장 큰 차이점은 호이스팅 방식에 따른 변수 선언 전 호출의 결과입니다.
let, const 로 선언한 변수/함수는 선언부만 끌어올려지고, var, function 으로 선언한 경우는 undefined가 할당되어 선언부가 끌어올려진 것처럼 실행됩니다.
let과 const로 선언한 변수 또는 함수는, 변수가 선언 전에 사용하려고 하면 할당되어 있는 값이 없는 것으로 인식하기 떄문에 ReferenceError(참조에러)가 나게 됩니다. 이를 TDZ(Temporal Dead Zone)라고 합니다.
반면 var 과 function 키워드로 선언한 변수 또는 함수는, 선언부가 undefined가 할당되어 끌어올려지기 때문에, 선언 전에 호출해도 아닌 undefined가 뜨게 됩니다.
console.log(score); // undefined
var score;
score = 80;
console.log(score); // 80console.log(score); // ReferenceError: score is not defined
let score;
score = 80;
console.log(score); // 에러로 인해 실행되지 않음. 또다른 차이점은 스코프의 차이입니다.
var 키워드를 사용하여 변수를 선언하면 그 값이 선언된 함수 내에서 유효한 함수 스코프가 적용됩니다.
반면 let/const 키워드를 사용하여 변수를 선언하면, 선언된 변수가 있는 중괄호({})범위에서만 값 이 유효한 블록 스코프가 적용됩니다.
예시)
function example() {
var x = 5; // 함수 스코프 변수
if (true) {
var x = 10; // 같은 변수를 재선언하고 값 재할당
console.log(x); // 10
}
console.log(x); // 10
}
example();
console.log(x); // ReferenceError: x is not defined function example() {
let x = 5; // 블록 스코프 변수
if (true) {
let x = 10; // 같은 이름의 변수를 블록 스코프 내에서 재선언
console.log(x); // 10
}
console.log(x); // 5
}
example();
console.log(x); // ReferenceError: x is not defined