자바스크립트(1) 변수와 호이스팅

이종호·2022년 4월 26일
0

JavaScript

목록 보기
1/11
post-thumbnail

변수

변수를 사용한다는 것은,
1. 데이터 보관함 (메모리) 가 있고,
2. 보관함의 크기는 모두 같으며,
3. 각 보관함의 이름을 정해주는 것

즉, 데이터의 이름표와 같다.
이러한 이름표를 가진 변수는 이제 재활용하기 편해진다.

앞서 말한 이름표를 붙이는 과정을
선언(declaration)

(es5)
var age;

(es6 이후)
const age;
let age;

이름표를 불렀을때 나와야하는 값을 저장하는 것을
할당(assignment)

age = 12;

위의 선언과 할당을 동시에 하는것은

const age = 12; (재할당 불가)
let age = 12; (재할당 가능)

라고한다.

변수 DeepDive

자바스크립트 엔진은 변수선언시
1. 선언단계
2. 초기화단계
로 2단계에 걸쳐 수행한다.

변수 선언 후, 할당(초기화:선언후 첫 할당)을 하지 않으면
변수는 undefined를 가진다.

또한 변수에 값을 할당할 때 undefined가 저장된 메모리 공간을 지우고 그 메모리 공간값을 재활용 하는게 아닌, 새 메모리 공간을 만들고 그곳에 값을 할당한다.

이 특성을 갖고 자바스크립트 엔진 특성 중 하나인 호이스팅에 대해 알아보자.

호이스팅
자바스크립트 엔진은 변수 선언 위치에 상관없이
변수를 무조건 위로 올려서 실행시킨다.

console.log(score);
var score = 80;

라는 코드를 실행해보자.
보기에는 변수 선언&할당이 참조보다 더 밑에 있다.
그러므로 "참조할수 없는 값" 이 에러로 나와야 하지만,
콘솔을 확인하면 undefined라고 확인 할 수 있다.

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

자바스크립트 엔진은 코드를 순차적으로 실행하기전
코드의 평가 과정을 거치고 실행하기 위한 준비를 한다.
평가 과정이 끝난후 모든 선언문을 제외하고 코드를 순차적으로 실행한다.

profile
Frontend

0개의 댓글