연습문제 #1. 보기 중 정답인 것을 고르시오

 a = 2;
 var a;
 console.log(a);

① 오류가 발생한다.
② 정상적으로 실행되고 undefined가 출력된다.
③ 정상적으로 실행되고 2가 출력된다.

연습문제 #1 풀이

var a = 2;를 하게 되면 JavaScript는 아래와 같이 동작한다.

• var a
  - 인터프리터가 변수를 선언
• a = 2
  - a라는 변수를 찾는다.
  - 없다 → 전역 변수를 생성하고 값을 대입
  - 있다 → 변수에 값을 대입
  

연습문제 #2. 위치별 a의 값을 적으시오.

var a = 'g';

function fn(){
	console.log(a);	// ①
    var a = 'l';
    console.log(a);    // ②
}

fn();

① undefined
② l

연습문제 #2 풀이

fn 함수안의 var a = 'l'의 선언 부분이 함수 내부의 최상위로 호이스팅 되기 때문에 ①의 값은 undefined가 출력이 된다.

그 뒤, 변수a에 l이라는 값을 넣은 뒤, a를 출력을 하게 되는데 이때의 a(②)는 l을 출력하게 된다.

---

각 위치별 console에 찍힐 값은?

function abc() {
	var a = ‘bbb’;
	console.log(a)     					 // ---- ①
	function c() {
		console.log(a);    				 // ---- ②
		(function() {
			console.log(a);    			 // ---- ③ 
			a = ‘ccc’;
		})();
		var a;
		console.log(a) 	  		  	 // ---- ④
	}
	function d() {
		console.log(a);    			 	// ---- ⑤
	}
	c();
	a = ‘ddd’;
	d();
};

abc();

문제의 요점

Hoisting의 동작 원리

문제의 정답

① bbb
② undefined
③ undefined
④ ccc
⑤ ddd

문제 풀이

문제의 해석과정

1. abc()를 실행한다.
2. a를 선언한다.
3. a에 'bbb'라는 값을 대입한다.
4. a를 출력한다. (① bbb)
5. c()를 선언한다.
6. d()를 선언한다.
7. c()를 실행한다.
8. a를 출력한다. (② undefined)
   c()내의 a라는 함수가 있기 때문에 c()내의 선언 부분만 끌어올려진 뒤, 출력된다.
9. 즉시 실행 함수를 선언한다.
10. a를 출력한다. (③ undefined)
    선언 부분은 존재하지 않고 할당 부분만 존재한다. a에는 이전의 a값이 들어있다.
11. a에 'ccc'를 대입한다.
12. a를 출력한다. (④ ccc)
13. a에 'ddd'를 대입한다.
14. d()를 실행을 한다.
15. a를 출력한다. (⑤ ddd)

---

해당 포스팅은 썬한 코딩, 입사에 필요한 JS기술의 내용을 보며 공부한 것을 정리한 내용입니다.

참고 사이트

• 김썬 Youtube