🗓️ 날짜 : 2023.09.11
📚 공부한 내용 : 딥다이브 읽은거 정리
⌛ 공부시간 : 22:00 ~ 23:00변수 선언
var num;자바스크립트의 변수 선언은 반드시 2 단계를 거쳐 수행한다.
- 선언 단계
- 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화.
var 키워드를 사용한 변수 선언은 해당 과정이 동시에 진행된다.
초기화 단계를 거치는 이유는 garbage value 가 남아있을 수 있기 때문.
변수의 실행 시점
모든 변수 선언문은 “런타임” 이전 단계에 먼저 실행된다.
자바스크립트 엔진은 “소스코드 평가” 과정 이후에 “소스코드 실행” 단계를 처리하게 되는데,
”소스코드 평가” 과정에서 실행 컨텍스트를 생성하여 변수 및 함수의 선언문만 우선 실행한 뒤,
생선된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다.
그 이후, 선언문을 제외한 소스코드가 순차적으로 실행된다.
이러한 모습이 마치 ‘변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작’ 하는 것 처럼 보인다고 해서
변수 호이스팅 이라고 한다.
값의 할당
변수의 선언은 “소스코드 평가” 과정인 런타임 이전에 실행되지만 값이 할당은 “소스코드 실행” 단계에서 이루어진다. 변수에 값을 할당할 때는 이전 값이 저장되어 있단 공간을 ‘지우고’ 할당하는 것이 아닌, 새로운 공간을 확보하고 그곳에 할당 값을 저장한다.
표현식
값으로 평가될 수 있는 문은 모두 표현식이다.
리터럴, 식별자, 연산자, 함수의 호출 모두 값으로 평가될 수 있다면 모두 표현식이라고 할 수 있다.
모든 문이 표현식이 되는 것은 아니다. 값으로 평가될 수 없다면 표현식이 아니다.
var 키워드로 선언한 변수의 문제점
es5 이전의 자바스크립트 변수 선언은 var 가 유일했다.
var 키워드로 선언된 변수는 아래와 같은 특징을 갖는다.
1. 변수의 중복 선언 허용
var x = 1;
var y = 1;
var x = 100;
var y;
console.log(x, y); // 100 1위 예시의 가장 큰 문제점은 이미 선언된 변수가 중복 선언에 의해 값까지 할당된다는 점에 있다.
의도하지 않게 먼저 선언된 변수 값이 변경 될 수 있다.
2. 함수 레벨 스코프
var x = 1;
if(true){
var x = 10;
}
console.log(x); // 10var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정한다.
함수 외부에서 var 키워드로 선언한 변수는 모두 전역 변수가 된다.
이러한 동작은 예시 1 의 경우 처럼 전역 변수가 중복 선언되어 의도하지 않은 동작을 야기할 가능성이 높다.
3. 변수 호이스팅
console.log(num) // undefined
num = 123;
console.log(123) // 123
var num;변수의 호이스팅에 의해 변수 선언문 이전에도 해당 변수를 참조할 수 있지만,
var 키워드로 선언한 변수는 위의 예시를 에러로 판단하지 않고 undefined 를 반환한다.
Feedback
오늘 너무너무 바빠서 아침에 잠깐 본 내용만 가볍게 정리했다 😞
가장 최근에 비슷한 내용을 정리했어서 그런지 새로운걸 배웠다는 느낌보다는
울궈먹기, 게시글 올리기 같은 느낌.
이런식으로 뭔가 숙제를 한다는 느낌보다 하루하루 무언가 배우겠다는 마음가짐을 끝까지 지킬 것.
꼭 그렇게 할 것.
