■ Javascript

[자바스크립트] Javascript를 기초부터 시작해보자! (3)

이번엔 좀더 자바스크립트의 내부를 살펴보도록 하겠다.

 

먼저 다음의 코드 부터 확인해보자.
아래 코드의 console.log()의 값은 1,2,3 각각 어떻게 나올까?

console.log(1, Person());
console.log(2, person);

var person = 1001;

function Person() {
    return 1000;
}

var Person = function(age, height) {
    return age + “:” + height;
}

person = Person(10,100);

console.log(3, person);

설명을 하면, 자바스크립트는 크게 두단계의 과정을 걸쳐서 프로그램을 실행시킨다.
이러한 이유는 자바스크립트는 약한타입언어이기 때문에, var라는 키워드로 모든 변수의 타입을 결정한다.
이말은 즉 런타임때 자료형이 결정된다는 의미이다. (여기서 자료형과 타입은 같은 말이다.)
그렇다면 어떤 과정이 강한타입언어와 다른지 살펴보자.

위에서 두단계과정을 걸쳐 실행한다고 했는데 첫번째가 파싱단계이다.
파싱단계는 자바스크립트의 코드중에서 var, function 두 키워드에 집중한다.
(WebStorm과 같은 IDE들을 보면 var, function 키워드만 다른 키워드와는 다른색으로 하이라이팅이 되어있다.)

이단계에서는 var 키워드로 만들어진 변수에 undefined를 할당하고, function 키워드로 만들어진 함수를 위해
메모리에 해당 함수의 로직을 올리고 Person이라는 변수에 주소를 할당한다. (특별히 = 연산자 뒤에 function은 무시한다.)

[파싱단계] *주소는 예시이다.

1. person = undefeind (0x111)

2. 0x123 = “function{return 1000;}”

3. Person = 0x123

4. Person = undefined(할당안함) => 그대로 0x123

4번 부분을 보자. 원래대로라면 undefined가 된다고 생각하겠지만 function 키워드가 var 키워드보다 우선순위가 높다는 것을 기억해두자.

다음은 실행단계이다.
이 단계에서는 실제 var, function키워드를 가지고 했던 파싱단계에서 수행했던 위 4단계를 제외하고 남은 모든 코드를 실제 수행한다.
로그 1번에서는 Person()를 수행한다.

[실행단계]

console.log(1, Person());
console.log(2, person);

var person = 1001;

function Person() {
    return 1000;
}

var Person = function(age, height) {
    return age + “:” + height;
}

person = Person(10,100);

console.log(3, person);

1. console.log(1, Person());
이부분은 Person이라는 0x123에 접근한뒤 () 연산자를 통해서 함수를 실행시킨다.
그러면 “function{ return 1000; }” 이라는 코드가 위에서 말한 파싱과 실행단계를 다시한번 거치고,
1000을 반환한다. 따라서 console.log(1, 1000)과 같게된다.
(여기서 유추할수 있는건 파싱과 실행단계는 함수단위로 이루어진다. 그렇다면 실제 아무것도 없는 상태에서
코드를 작성했단 것은 아무것도 없는 것도 무언가의 함수스코프 영역내 라는 의미이다.)

2. console.log(2, person); 을보면 현재 person에는 undefined가 할당되어 있다. 따라서 console.log(2, undefined)와 같게 된다.

3. person = 1001; var 부분을 제외하고 person에 1001이 할당된다.

4. 함수코드를 메모리 어딘가에 올린다.
0x999 = “function(age, height) {
return age + “:” + height;
}”

5. Person = 0x999
var 부분을 제외하고 아래 코드가 수행된다. 즉 Person에 함수의 주소를 할당한다.

6. person = Person(10, 1000);
에서 먼저 Person(10, 1000)를 수행하면, 리턴되는 값인 문자열 “10:100″이 person에 할당된다.
즉 person = “10:100″; 과같다.

7. console.log(3, person)
이부분은 결국 console.log(3, “10:100″); 으로 된다.

Standard