var/let/const 차이점, undefined/null 차이점, arrow function이란, 실행 컨텍스트란

1. var와 let의 차이점

var: 예전 자바스크립트에서 사용되던 변수.

let: ES6 자바스크립트부터 사용할 수 있는 변수.

 

var 특징

1) 호이스팅이 됨.

console.log(v); // undefined
console.log(l); // l is not defined

var v = 'var';
let l = 'let';

 

2) 함수형 스코프를 가지고 있음.

function aa() {
    if(true) {
        var v = 'var';
        let l = 'let';
    };
    console.log(v); // 'var'
    console.log(l); // l is not defined
};

aa();

var는 함수 내에서 최상단으로 올라가 선언됨.

let은 생성된 그곳(if문) 안에서만 활동 가능함.

그래서 마지막에 var는 제대로 나오는데 let은 선언조차 되지 않았다고 뜨는 것임.

 

 

let 특징

1. 블록 스코프를 가지고 있음.

function aa() {
    if(true) {
        console.log(v); // undefined
    	console.log(l); // Cannot access 'l' before initialization
        var v = 'var';
        let l = 'let';
    };
};

aa();

 

 

2. let과 const의 차이점

1) let은 재할당 가능, const는 불가능.

 

 

2) const

let l;
l = 'let';

console.log(l); // 'let'

const c;
c = 'const';

console.log(c); // Misiing initializer in const declaretion

const는 처음에 할당하지 않으면 undefined 상태가 되어버림.

 

*하지만 const도 object류라면 ref를 가지고있기 떄문에 값 변경이 가능

const arr = [1, 2];
arr.push(3);

console.log(arr); // [1, 2, 3]

 

 

3. undefined와 null의 차이점

공통점

둘 다 emtpy value

 

차이점

undefined

1) 변수 선언만 하고 할당하지 않으면 자동으로 undefined 상태가 됨.

 

2) typeof는 undefined

 

 

null

1) 직접 할당할 수 있음.

(var a = undefined;로 할순 있지만 비추)

 

2) typeof는 object

 

 

4. 애로우 function의 기능

1) 코드 가독성이 좋아짐

 

2) this를 해당 object로 자동 설정해줌

 

 

 

5. 실행 컨텍스트 의미

코드가 실행되는 정보를 나타내는 환경.

 

만약 아래와 같은 코드가 있다고 한다면 실행 컨텍스트는 이런 모습이 됨.

var a = 3;

function b(num) {
	var ans = num * num;
  return ans;
};

var c = b(a);

console.log(c);

 

1단계) 자바스크립트 코드를 한번 쭉 훑고 실행 컨텍스트가 생성됨(선언).

- 변수나 함수는 선언부터 되기때문에 변수의 value값은 undefined의 상태.

- 함수는 선언 자체가 메모리에 올라감.

 

2단계) 메모리의 값을 채워넣음(할당).

- a는 3이니까 undefined를 지우고 3으로 바꿔줌.

- function b()는 실행하는건 아니니까 넘어감.

- 근데 c는 b(a)이라고 b() 함수를 실행한 값을 넣어줘야함. 여기서 코드 실행부분에 b() 함수가 넘어가게됨.

 

3단계) 실행되려는 함수 안에 또 실행 컨텍스트가 생성됨(선언).

- 똑같이 b() 안에 있는 변수 ans와 num이 메모리 부분이 undefined로 저장됨.

 

4단계) 실행되려는 함수 안의 실행 컨텍스트 메모리 값을 채워넣음(할당).

- num은 인자로 전달된 a인데, 실행함수 안의 실행 컨텍스트에는 a라는 변수가 없음.

이때 근처에 없나하면서 보다가 최초에 생성된 실행 컨텍스트에서 a를 발견하고 그 값 3을 가져옴.

(이래서 스코프 체인이라고 하는것임)

- 이후 ans를 구하기 위해 num*num이 실행되면서 ans가 9라는 값을 얻음.

 

5단계) 마지막 코드 실행 후 사라짐.

- 마지막으로 ans를 return하고, 그 값을 c가 전달받고 실행함수 안의 실행 컨텍스트는 사라짐.