강의로 돌아가기
Keehwan Jee

질문

1)
var age = 100;
function foo () {
var age = 99;
bar();
}
function bar () {
console.log(this.age);
}
foo();
여기서 this.age는 window객체의 age인 100이 출력되는 것은 이해가 됩니다.

2)
var age = 100;
function foo () {
age = 99;
bar();
}
function bar () {
console.log(this.age);
}
foo();
2)에서 foo()안의 age는 var선언없이 age=99로 하였을때 this.age는 99가 되는데 설명좀 부탁드립니다. 이해하기 힘드네요.-^

4 개의 답변
Ken Huh

첫번째 예제를 이해하신 걸로 봐서, 글로벌 변수는 window 객체의 속성으로 지정된다는 것은 이해하고 계신 것 같습니다. 두번째 예제도 크게 다르지는 않습니다만, scope 관련 지식이 있으셔야 이해에 도움이 되실 것 같습니다. 간략하게 설명드리자면 아래와 같습니다.

var age = 100;

function foo () {
    age = 99;   // 변수 선언 `var`가 없음
    bar();
}

function bar () {
    console.log(this.age);
}

foo();
  1. 위 예제에서 foo 함수가 실행되게 되면 age = 99;라는 부분이 우선적으로 실행됩니다.
  2. 자바스크립트에서 기본적으로 주어지는 키워드 외의 단어는 변수 선언이 되어야만 사용할 수 있습니다. age라는 단어는 자바스크립트 키워드가 아니기 때문에, 그리고 또한 현재 선언을 하는 상황이 아니기 때문에, 자바스크립트 엔진은 해당 단어(age)가 변수로서 선언이 되었는지를 확인하게 됩니다.
  3. 변수로서 선언되었는지를 확인하는 과정에서 우선적으로 현재 scope(foo 함수 scope)내에서 해당 변수 선언이 되었는지를 확인합니다. 그리고 선언된 부분이 없다는 것을 확인하죠.
  4. 그렇다면 상위 scope에서 선언되었는지를 확인합니다. 현재 foo 함수 scope의 상위 scope는 글로벌 scope입니다. 글로벌 scope에 var age = 100;이라고 선언된 부분을 찾게 됩니다.
  5. 글로벌 scope에서 선언된 age 변수를 찾았기에, 해당 변수를 사용하여 코드 실행을 계속하게 됩니다. 고로 foo 함수 내부에서 age = 99;라고 실행하는 부분이 할당(정확히 말하자면, 재할당)하는 값은 글로벌 scope에서 선언된 age 변수에 담기게 되는 것입니다.
  6. 마지막으로 bar(); 부분이 실행될 때 일반 함수 호출 방식으로 실행되기 때문에, bar 함수 내부의 this 값은 Window 객체를 가리키게 됩니다. 그래서 결국 window.age, 즉 방금 전에 재할당되었던 99가 콘솔에 로그되게 됩니다.

또 이해 안가시는 부분 있으시면 질문 남겨주세요!
화이팅!

  • 김세림
    저도 이해 안갔던 부분인데 덕분에 이해가 됐네요!!! 자세한 설명 감사합니다!!!!! 김세림 2018.08.01 14:07
  • mw
    답변이 너무 자세해서 이해가 잘되네요!!! mw 2018.08.01 14:49
  • Ken Huh
    바닐라코딩 댓글부대님들.. 댓글 남길 시간에 가서 공부하세요.. Ken Huh 2018.08.01 14:51
Keehwan Jee

자세한 설명감사합니다.

설명하신것을 적용한다면 아래의 예제는 foo()스코프에 var 와 함께 사용한 age=99가 출력될것같은데 var없이 선언된 age=100이 출력되는데 이해가 되지않습니다.

age = 100;
function foo () {
var age = 99;
bar();
}
function bar () {
console.log(this.age);
}
foo();

Keehwan Jee

위의 저의 질문에 대한 의문점을 해결하였습니다.

http://www.freesens.com/x/?p=225

즉 var 선언없이 사용하는 변수는 전역변수처럼 인식된다네요. -^
님의 강좌로 자바스크립트를 더깊이 이해할수있는 계기가 되었습니다.

Ken Huh
age = 100;

function foo () {
    var age = 99;
    bar();
}

function bar () {
    console.log(this.age);
}

foo();

이 경우에는, foo 함수 내부의 var age = 99;foo 함수 내부에서만 접근 가능한 지역 변수로 선언되어서 그렇습니다. 말씀하신 것처럼 age = 100;은 글로벌이구요.

도움이 되셨다니 기분이가 좋네요. 자바스크립트 관련 공부하시다가 무엇이든 궁금한 점 있으시면 해쉬코드vanillacoding 태그를 이용하여 남겨주시면 도와드리겠습니다.(반드시 태그를 달아주셔야 알림이 옵니다.)

화이팅!

답변 쓰기
이 입력폼은 마크다운 문법을 지원합니다. 마크다운 가이드 를 참고하세요.