2. 다음 값은?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function abc() { var a = ‘bbb’; console.log(a) // ---- 1 function c() { console.log(a); // --- 2 (function() { console.log(a); // --- 3 a = ‘ccc’; })(); var a; console.log(a) // ---4 } function d() { console.log(a); // --- 5 } c(); a = ‘ddd’; d(); }; abc(); | cs |
3. undefined
4. ccc
5. ddd
이 문제는 호이스팅과 관련된 문제입니다. 면접에서 필수적으로 물어보는 부분이니 꼭 인지하고 있어야합니다.
문제를 풀기에 앞서, 조금씩 나눠서 개념을 살펴보겠습니다.
1 2 3 | a = 2; var a; console.log(a); | cs |
결과가 어떻게 될까요? 정답은 정상적으로 실행되고 2가 출력됩니다.
분명 오류가 난다고 생각한 사람들도 있을겁니다. 보통 C++이나 Java와 같이 일반적으로는 선언도 안하고 대입을 어떻게 해? 당연히 오류지라고 생각하기 쉽습니다. 하지만 javascript에서는 가능합니다!
var a = 2;는 아래와 같은 과정으로 나눌 수 있습니다.
var a
a = 2
이를 인터프리터 시점에서 보면, var a를 보고 변수 테이블을 생성하여 a를 넣습니다.
이후 a = 2라는 값이 나왔기 때문에 변수 테이블의 a의 값을 2로 설정해주는 겁니다.
그렇다면 아래와 같은 경우는 어떤 진행과정이 될까요?
1 2 3 4 5 6 7 | var a = 'g' function fn(){ console.log(a); var a = 'l'; console.log(a); } fn(); | cs |
전체적으로 전역변수 a와 fn() 함수 선언, fn() 함수 실행이 큰 틀입니다.
즉 변수 테이블이 생성되고, a = g라는 값과 fn이라는 function이 값으로 들어갑니다.
이제 function값을 살펴봐야겠죠?
function안에서 또다른 scope가 진행되었기 때문에, 또다른 변수 테이블이 생성됩니다. 현재 function 안에는 var a만 존재하므로 변수 테이블에 a를 넣어줍니다.
첫 console.log(a)는 아직 변수 a의 값이 주어지지 않았기 때문에 값은 undefined가 출력됩니다.
이제 a의 값을 l이라고 주었고, 이 값은 변수 테이블에 저장됩니다.
그렇다면 그 다음에 나오는 console.log(a)의 값은 l이 되겠죠?
이런 식으로 변수 테이블은 각 scope가 생성될 때마다 따로 만들어주어야함을 알아야 문제를 풀 수 있습니다.
다시 문제를 살펴보면
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function abc() { var a = ‘bbb’; console.log(a) // ---- 1 function c() { console.log(a); // --- 2 (function() { console.log(a); // --- 3 a = ‘ccc’; })(); var a; console.log(a) // ---4 } function d() { console.log(a); // --- 5 } c(); a = ‘ddd’; d(); }; abc(); | cs |
첫번째 변수 테이블은 아래처럼 만들어 질 것 입니다.
a : bbb
c : function
d : function
따라서 1번 console은 a의 값이 존재하기 때문에 bbb가 출력됩니다.
이후에 c func이 실행되고, 새로운 변수 테이블이 생성됩니다. 이 테이블에는 func 안에서 값이 주어지지 않은 변수인 a를 우선 저장합니다.
아직 a의 값을 모르기 때문에 2번 console은 undefined가 출력됩니다.
다음으로는 즉시실행 함수가 나오게 되는데, 이 함수는 만약 변수가 없으면 가장 가까운 변수 테이블을 바라보게 됩니다.
따라서 c 함수에서 만든 변수 테이블을 보게 되겠죠? 하지만 a만 정의되었을 뿐 아직 값은 없습니다.
따라서 3번 console도 undefined가 출력됩니다.
바로 이어서 a = 'ccc'로 값이 매겨지면서, 변수 테이블에 존재하는 a의 값은 ccc가 됩니다.
다음 4번 console은 a의 값이 들어왔기 때문에 ccc로 출력됩니다.
function d가 실행되기 전에 a = 'ddd'로 값을 주는데, 이는 함수 밖에서 선언되는 것이기 때문에 이 문제의 첫번째로 만든 변수 테이블에 값이 저장될 것입니다. (즉 bbb로 저장된 전역 변수 a가 ddd로 변경됩니다)
결국 마지막 5번 console은 ddd가 출력됩니다.
각자 한번씩 문제를 보고 정리해볼 수 있도록 합시다~!
'자바스크립트' 카테고리의 다른 글
[자바스크립트] 3. 객체 (0) | 2018.10.13 |
---|---|
[자바스크립트] 2. 데이터 타입 (0) | 2018.10.13 |
[자바스크립트] 1. 소개 (0) | 2018.10.13 |
[자바스크립트] ES2015+ 요약 정리 (0) | 2018.09.19 |
[자바스크립트] 문제를 통한 개념잡기 - 1 (0) | 2018.07.13 |
2. 다음 값은?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function abc() { var a = ‘bbb’; console.log(a) // ---- 1 function c() { console.log(a); // --- 2 (function() { console.log(a); // --- 3 a = ‘ccc’; })(); var a; console.log(a) // ---4 } function d() { console.log(a); // --- 5 } c(); a = ‘ddd’; d(); }; abc(); | cs |
3. undefined
4. ccc
5. ddd
이 문제는 호이스팅과 관련된 문제입니다. 면접에서 필수적으로 물어보는 부분이니 꼭 인지하고 있어야합니다.
문제를 풀기에 앞서, 조금씩 나눠서 개념을 살펴보겠습니다.
1 2 3 | a = 2; var a; console.log(a); | cs |
결과가 어떻게 될까요? 정답은 정상적으로 실행되고 2가 출력됩니다.
분명 오류가 난다고 생각한 사람들도 있을겁니다. 보통 C++이나 Java와 같이 일반적으로는 선언도 안하고 대입을 어떻게 해? 당연히 오류지라고 생각하기 쉽습니다. 하지만 javascript에서는 가능합니다!
var a = 2;는 아래와 같은 과정으로 나눌 수 있습니다.
var a
a = 2
이를 인터프리터 시점에서 보면, var a를 보고 변수 테이블을 생성하여 a를 넣습니다.
이후 a = 2라는 값이 나왔기 때문에 변수 테이블의 a의 값을 2로 설정해주는 겁니다.
그렇다면 아래와 같은 경우는 어떤 진행과정이 될까요?
1 2 3 4 5 6 7 | var a = 'g' function fn(){ console.log(a); var a = 'l'; console.log(a); } fn(); | cs |
전체적으로 전역변수 a와 fn() 함수 선언, fn() 함수 실행이 큰 틀입니다.
즉 변수 테이블이 생성되고, a = g라는 값과 fn이라는 function이 값으로 들어갑니다.
이제 function값을 살펴봐야겠죠?
function안에서 또다른 scope가 진행되었기 때문에, 또다른 변수 테이블이 생성됩니다. 현재 function 안에는 var a만 존재하므로 변수 테이블에 a를 넣어줍니다.
첫 console.log(a)는 아직 변수 a의 값이 주어지지 않았기 때문에 값은 undefined가 출력됩니다.
이제 a의 값을 l이라고 주었고, 이 값은 변수 테이블에 저장됩니다.
그렇다면 그 다음에 나오는 console.log(a)의 값은 l이 되겠죠?
이런 식으로 변수 테이블은 각 scope가 생성될 때마다 따로 만들어주어야함을 알아야 문제를 풀 수 있습니다.
다시 문제를 살펴보면
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | function abc() { var a = ‘bbb’; console.log(a) // ---- 1 function c() { console.log(a); // --- 2 (function() { console.log(a); // --- 3 a = ‘ccc’; })(); var a; console.log(a) // ---4 } function d() { console.log(a); // --- 5 } c(); a = ‘ddd’; d(); }; abc(); | cs |
첫번째 변수 테이블은 아래처럼 만들어 질 것 입니다.
a : bbb
c : function
d : function
따라서 1번 console은 a의 값이 존재하기 때문에 bbb가 출력됩니다.
이후에 c func이 실행되고, 새로운 변수 테이블이 생성됩니다. 이 테이블에는 func 안에서 값이 주어지지 않은 변수인 a를 우선 저장합니다.
아직 a의 값을 모르기 때문에 2번 console은 undefined가 출력됩니다.
다음으로는 즉시실행 함수가 나오게 되는데, 이 함수는 만약 변수가 없으면 가장 가까운 변수 테이블을 바라보게 됩니다.
따라서 c 함수에서 만든 변수 테이블을 보게 되겠죠? 하지만 a만 정의되었을 뿐 아직 값은 없습니다.
따라서 3번 console도 undefined가 출력됩니다.
바로 이어서 a = 'ccc'로 값이 매겨지면서, 변수 테이블에 존재하는 a의 값은 ccc가 됩니다.
다음 4번 console은 a의 값이 들어왔기 때문에 ccc로 출력됩니다.
function d가 실행되기 전에 a = 'ddd'로 값을 주는데, 이는 함수 밖에서 선언되는 것이기 때문에 이 문제의 첫번째로 만든 변수 테이블에 값이 저장될 것입니다. (즉 bbb로 저장된 전역 변수 a가 ddd로 변경됩니다)
결국 마지막 5번 console은 ddd가 출력됩니다.
각자 한번씩 문제를 보고 정리해볼 수 있도록 합시다~!
'자바스크립트' 카테고리의 다른 글
[자바스크립트] 3. 객체 (0) | 2018.10.13 |
---|---|
[자바스크립트] 2. 데이터 타입 (0) | 2018.10.13 |
[자바스크립트] 1. 소개 (0) | 2018.10.13 |
[자바스크립트] ES2015+ 요약 정리 (0) | 2018.09.19 |
[자바스크립트] 문제를 통한 개념잡기 - 1 (0) | 2018.07.13 |