본문 바로가기
JavaScript & TypeScript

[자바스크립트 객체지향프로그래밍] 프로그램 실행단계(p.42~44)

by 향로 (기억보단 기록을) 2015. 2. 5.
반응형

스터디로 보고 있는 이 책에서 프로그램 실행단계가 조금 설명이 이상하게 되어있어서 좀 더 쉽게풀어서 정리한다.

예제로 나와있는 코드 먼저 보자.



책의 설명을 적어보면

코드를 실행하면 파싱(컴파일)단계에서 변수인 square와 함수인 square가 정의된다. 

먼저 square 변수가 정의되고 다음으로 square 함수가 정의되면서 square 변수를 덮어쓰게 된다.

이후 코드가 실행되는 단계에서 square는 함수를 정의하고 있는 코드 블록을 가리키고,

console.log(square(4));를 실행(16출력) 하고, 

var square=0; 문장으로 인해 마지막 console.log(square)는 0을 출력한다.


자바스크립트에 대해 어느정도 이해하고 있는 사람들 입장에서야 "으음 그렇지" 하고 넘어가는데 처음 시작하는 분들의 입장에서는 당췌 저게 무슨 말인지 이해를 못하는 눈치더라. 

저 코드를 좀 더 쉽게 풀어보자.

자바스크립트에는 호이스팅(hoisting) 이란 개념이 있다.

선언문은 항시 자바스크립트 엔진 구동시 가장 최우선으로 해석한다고 이해하면 쉬울 것이다. 

즉 인터프린터(소스코드 해석기)가 자바스크립트의 코드를 해석하면서 코드작성 순서에 상관없이 global 영역에 선언되어 있는 변수나

 함수의 선언문들을 먼저 수집하여 전역객체의 속성으로 등록시켜 둔다는 것이다.

위 코드를 자바스크립트 해석순서로 다시 배치시키면

이와 같다고 할 수있다.

책 내용을 잘못이해하고, 

함수가 무조건 변수보다 먼저 호출 된다거나, 

console.log(square(4)); 에서 애초에 square() 라는 함수를 선언했으므로 함수를 호출한거다 라고 해석하는 사람도 있을텐데,

아래처럼 변수와 함수의 순서를 바꿔보자

둘의 순서를 바꾸게 되면 컴파일 단계에서 최종적으로 선언된 부분이 var square가 되므로 console.log(square(4)) 는 잘못된 호출로 인식되어 에러를 발생시킨다. 

이러한 프로그램 실행순서(호이스팅 개념)는 자바스크립트 코드를 사람이 해석하는데 많은 혼란을 주게 되므로, 

자바스크립트 코드를 작성할때 선언문은 항상 최상위에서 작성하는 것을 권고하고 있다.

반응형