closure 헷갈리는 문제

closure에 관한 문제다.

function Person(firstname, lastname) {
let fullName = firstname + " " + lastname;

this.getFirstName = function () { return firstname; };
this.getLastName = function () { return lastname; };
this.getFullName = function () { return fullName; };
}

let aPerson = new Person ("John", "Smith");
console.log(aPerson); // --> 1번
aPerson.firstname = "Penny";
aPerson.lastname = "Andrews";
aPerson.fullName = "Penny Andrews";
console.log(aPerson); // --> 2번
console.log(aPerson.getFirstName()); // --> 3번
console.log(aPerson.getLastName()); // --> 4번
console.log(aPerson.getFullName()); // --> 5번

 

1, 2, 3, 4, 5 번을 차례대로 콘솔 창에 찍은 결과는 이렇게 나온다.

 

의문점 1) 1, 2 번의 결과

Penny Andrews를 선언하기 전에 콘솔에 출력한 1번의 결과도 Penny가 나오고 있다.
선언 전과 선언 후인 각각 1, 2 번의 결과가 왜 같게 나오는 것일까?

 

-> 객체를 로깅할 때는 객체의 내용 변경사항이 실시간으로 업데이트 되기 때문!!!

 

이 문장만 보면 너무 어렵기 때문에 이해를 돕기 위해 다음 예제를 들어보겠다.

var arr = [];
console.log(arr, arr.length); //1번 (a 함수 생성 전)

function a() { 
  arr.push(5);
};
console.log(arr, arr.length); //2번 (a 함수 실행 전)
a();
console.log(arr, arr.length); //3번 (a 함수 실행 후)

 

실행 결과는 이렇게 출력된다. 자세히 클릭해보면

 

함수를 생성하기 전인 1번, 함수를 실행하기 전인 2번에도 객체 내용 변경사항이 업데이트 되었다는 것을 알 수 있다!

이것은 자바스크립트의 속성이니 참고해 두어야 겠다.

 

참고 링크 : https://www.zerocho.com/category/JavaScript/post/5b2b45cf1350f9001b662ba6

 

 

의문점 2) 3, 4, 5 번의 결과

 

3, 4, 5번이 Penny, Andrews, Penny Andrews 라고 나올 거라고 예상했던 것과는 다르게 get...name()으로 출력한 결과는 처음에 new Person으로 생성자 함수를 만들 때 입력했던 John, Smith 로 나오고 있다.

 

그 이유는 get...name() 함수는 처음에 생성자 함수를 만들 때 전달했던 전달인자의 값을 받아오기 때문이다.

즉, get...name() 함수를 실행해주지 않으면 John Smith는 나오지 않는다.

Penny의 키값인 firstname 과 Person의 매개변수(parameter)인 firstname 은 다른 아이인 것이다!

 

 

 

---

 

 

scope와 closure의 개념을 더 잘 이해하기 위해 이 것에서 심화된 다른 좋은 예시가 있어서 기록해본다.

 

var a = 0;
function foo() {
    var b = 0;
    return function() {
        console.log(++a, ++b);
    };
}

var f1 = foo();
var f2 = foo();

f1(); // 1 1
f1(); // 2 2
f2(); // 3 1
f2(); // 4 2

여기서 a 는 글로벌 변수 / b 는 로컬 변수로 볼 수 있다.

b 는 함수 안에 선언되어 있기 때문에(=local 변수) f1()을 실행할 때, f2()를 실행할 때 각각 카운트가 올라가는 것이고,

a 는 함수 밖에 선언되어 있기 때문에(=global 변수) f1(), f2() 중 어떤 것을 실행해도 카운트가 올라간다.