📝 오늘 한 것

1. closure(클로저) / 외부 함수와 내부 함수 / private variable / 실행 컨텍스트 / 즉시 실행 함수 / 화살표 함수 / hoisting / 데이터 타입 / primitive / reference

📖 학습 자료

1. 생활코딩 클로저 강의 1 ~ 4편

2. 사전 학습 가이드 STEP 5 (Hoisting ~ Reference)

📚 배운 것

Scope

---

1. closure(클로저)

생활코딩 클로저 강의 (1 ~ 4편) 참고
추가로 ES2015 이후의 실행 컨텍스트 참고할 것

1) 외부 함수와 내부 함수

function outter () { // 외부 함수 선언

  var title = 'coding everybody'; // 외부 함수에 정의되어 있는 지역변수
  
  function inner () { // 내부 함수 선언
    alert(title);
  }
  
  inner (); // 내부 함수 호출
  
}

outter (); // 외부 함수 호출

inner()라는 내부 함수는 title이라는 변수를 참조하는데 inner 함수 안에서 자체적으로 그 값을 찾을 수 없으므로 한 단계 위인 outter()라는 외부 함수를 찾아보게 된다. 외부 함수에 title이라는 변수가 존재하므로 내부 함수의 title 변수는 그 값을 갖게 된다.

즉, 내부 함수에서 외부 함수의 지역변수에 접근할 수 있다

2) closure(클로저)란?

• 자신이 선언될 당시의 환경을 기억하는 함수와 그 환경

• 외부 함수 컨텍스트에 접근할 수 있는 내부 함수

• 외부 함수가 종료된 이후에도 내부 함수는 외부 함수의 지역 변수에 접근 가능

function outter () {

  var title = 'coding everybody';
  // outter라는 외부 함수에 정의되어 있는 지역변수
  
  return function () {
    alert(title);
  }
  // outter라는 외부 함수는 익명의 내부 함수를 return 한다

}

var inner = outter();
// outter라는 외부 함수를 실행한 결과를 inner라는 변수에 할당한다

inner();
// inner라는 변수에 담겨 있는 함수를 호출하면
// coding everybody라는 텍스트가 경고창에 출력된다

원래 어떤 함수가 return을 하면 그 함수는 종료된다. 즉, outter라는 외부 함수가 내부 함수를 return하면 outter라는 외부 함수는 종료된다.

다시 말해, 마지막에 inner라는 변수에 담긴 함수를 호출할 때는 outter라는 외부 함수는 이미 실행되어(=return 되어) 종료된 이후임을 알 수 있다.

여기서 inner라는 변수에 담긴 함수를 호출한다는 것은 alert(title); 구문을 실행한다는 뜻이다. 그런데 title이라는 변수의 값은 익명의 내부 함수에 존재하지 않으므로 한 단계 위인 outter라는 외부 함수를 찾아보게 된다. 즉, 내부 함수에서 외부 함수로 접근을 시도해 성공한 것이다.

정리하면, 클로저란 내부 함수가 외부 함수의 지역변수에 접근할 수 있고, 외부 함수는 외부 함수의 지역변수를 사용하는 내부 함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

3) private variable

코드가 복잡해질 때 그 정보를 아무나 수정하는 것을 방지하는 것

(1) 객체를 return하는 외부 함수

function factory_movie (title) {
  
  return {
    
    get_title : function () {
      return title;
    },
    
    set_title : function (_title) {
      title = _title;
    }
    
  } // factory_movie라는 외부 함수는 객체를 return 한다
  
}

factory_movie라는 외부 함수는 title이라는 매개변수를 가진다. 매개변수는 그 함수에서만 사용되는 지역변수이다.

factory_movie라는 외부 함수는 {객체}를 return 한다. 그 객체는 get_title과 set_title이라는 2개의 프로퍼티를 가지고 있다.

객체의 get_title 프로퍼티는 title이라는 변수를 return 하는 익명의 함수를 값으로 가진다. 객체의 set_title 프로퍼티는 _title이라는 매개변수의 값을 title이라는 변수에 할당하는 함수를 값으로 가진다.

get_title 메서드와 set_title 메서드의 값인 function () {...} 부분은 객체에 소속되어 있을 뿐, 모두 factory_movie라는 외부 함수의 내부 함수이다.

이는 곧 이 내부 함수들도 그 내부 함수를 포함하는 외부 함수의 title이라는 지역 변수에 접근할 수 있음을 뜻한다.

get_title 메서드를 호출하면 title이라는 변수를 return 한다. 그런데 이 title이라는 변수의 값은 익명의 내부 함수에 존재하지 않으므로 factory_movie라는 외부 함수를 찾아보게 된다. 그렇게 내부 함수는 외부 함수의 title이라는 지역변수에 접근하여 그 값을 받아오게 된다.

set_title 메서드를 호출하면 _title이라는 매개변수의 값을 title이라는 변수에 할당한다. 내부 함수는 외부 함수의 지역변수에 접근할 수 있으므로 이렇게 title이란 변수에 할당된 _title이라는 매개변수의 값은 외부 함수의 지역 변수인 title을 바꾸게 된다.

(2) 내부 함수는 외부 함수의 지역변수에 접근할 수 있다

function factory_movie (title) {  
  return {
    get_title : function () {
      return title;
    },
    set_title : function (_title) {
      title = _title;
    }
  }
}

var ghost = factory_movie('Ghost in the shell');
var matrix = factory_movie('Matrix');

console.log(ghost.get_title());
console.log(matrix.get_title());

factory_movie라는 외부 함수를 호출하고, 매개변수에 각각 'Ghost in the shell'와 'matrix'를 전해줬다. 외부 함수가 return 하는 객체를 각각 ghost와 matrix라는 변수에 할당했다.

이때 ghost와 matrix는 똑같은 객체를 담고 있지만, 그 객체들이 실행된 컨텍스트는 서로 다르다. 즉, 각 객체들의 get_title 메서드가 접근하는, 외부 함수의 title이라는 변수에 담겨 있는 값이 서로 다름을 의미한다.

(3) closure(클로저)에 포함되어 있는 지역변수는 각각 유지된다

function factory_movie (title) {  
  return {
    get_title : function () {
      return title;
    },
    set_title : function (_title) {
      title = _title;
    }
  }
}

var ghost = factory_movie('Ghost in the shell');
var matrix = factory_movie('Matrix');

ghost.set_title('공각기동대'); // ghost 객체의 set_title 메서드 호출

console.log(ghost.get_title());
console.log(matrix.get_title());

ghost 객체의 set_title 메서드를 호출하고, 매개변수로 '공각기동대'를 전해주었다.

그 후, ghost 객체의 get_title 메서드를 호출한 값은 '공각기동대'가 뜬다. 그러나 matrix 객체의 get_title 메서드를 호출한 값은 여전히 'matrix'가 뜬다.

정리하면, factory_movie 외부 함수는 ghost와 matrix라는 2개의 객체를 만들었다. 이 2개의 객체들은 각각 자신들이 만들어진 그 시점의 컨텍스트 즉, 자신들이 만들어진 그 시점에서의 외부 함수의 지역변수에 접근할 수 있다. 그 지역변수는 각각 유지되고 있으므로 ghost 객체의 set_title을 통해서 title 변수를 '공각기동대'로 바꾸는 것은 ghost 객체가 접근할 수 있는 외부 함수의 지역변수만을 바꾸는 것일 뿐, matrix 객체가 접근할 수 있는 외부 함수의 지역변수에는 아무런 영향도 미치지 못한다.

❗ 외부 함수가 실행될 때마다 새로운 지역변수를 포함하는 closure(클로저)가 생성된다. 따라서 ghost와 matrix는 서로 완전히 독립된 객체가 된다.

💡 그렇다면 private variable이란?

factory_movie라는 외부 함수가 실행되어 어떤 값을 return 하면 그 함수는 종료되고, 외부 함수의 지역변수인 title은 factory_movie의 내부 함수인 get_title과 set_title을 통해서만 접근할 수 있게 된다. 이때 title을 private variable이라고 한다.

💡 private variable이 필요한 이유

데이터를 누구나 수정할 수 있다면 그만큼 오류가 날 가능성이 크다. 이를 방지하기 위해 private variable을 이용할 수 있다.

위 예시에서는 title이라는 외부 함수의 지역변수에 get_title 함수와 set_title 함수만을 이용해야만 접근 가능하도록 해주었다.
이 경우 title이란 외부 함수의 지역변수가 외부에서 어떻게 쓰이든 간에 내부 함수에는 영향을 줄 수 없기 때문에 데이터를 훨씬 더 안전하게 유지할 수 있다.

title이라는 private variable은 set_title을 통해서만 그 변수의 값을 수정할 수 있고, get_title을 통해서만 그 변수의 값을 가져올 수 있다. ([TIL] 210904 中 '접근자 프로퍼티' 부분 같이 볼 것)

예시

function factory_movie (title) {
  return {
    get_title : function () {
      return title;
    },
    set_title : function (_title) {
      if (typeof _title === 'string') {
        title = _title;
      } else {
        alert('제목은 문자열이어야 합니다.');
      }
    }
  }
}

var ghost = factory_movie('Ghost in the shell');

ghost.set_title(1); // console 창에 경고창이 뜬다
ghost.set_title('공각기동대');
console.log(ghost.get_title()); // 공각기동대 

4) closure(클로저)로 인해 발생할 수 있는 문제

❗❗❗ 비동기함수를 반복문에서 사용하는 방법 참고 ❗❗❗

(1) 실행 컨텍스트

• 자바스크립트 엔진은 script를 실행하다가 함수를 만나면 실행 컨텍스트를 생성한다

• 실행 컨텍스트는 함수가 실행될 때의 환경을 저장한다

• 실행 컨텍스트는 자신만의 스코프를 갖는다

• 전역 컨텍스트와 함수 컨텍스트가 있다

• 각 함수별로 함수 컨텍스트를 가지고 있지만, 함수 컨텍스트는 함수가 호출되어야만 만들어진다

[ 예제 분석 ]

var x = 10;
var y = 20;
function print() {
  var x = 5;
  console.log(x, y);
}

print();

이를 실행 컨텍스트 입장에서 살펴보면,

1. 글로벌 오브젝트(GO) (x = 10 / y = 20 / print = function)

• 자바스크립트가 실행되면 글로벌 오브젝트가 생성된다
• GO에는 전역 변수들과 함수가 프로퍼티로 저장된다

2. print 컨텍스트 (x = 5)
3. 참조한 변수 (x = 5 / y = 20)

[ 과제 분석 ]

Q. 1초 간격으로 0~3까지의 숫자가 순서대로 출력되도록 만들어라.

// 오답 분석 (정답 아님)
for (var i = 0; i < 4; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

이를 실행 컨텍스트 입장에서 살펴보면,

• var을 이용해 선언된 변수 i는 전역 변수로 hoisting(호이스팅)된다. for 반복문이 시작되면 변수 i에는 0이 할당된다.
• i가 4보다 작다는 조건을 만족하므로 곧바로 반복문의 본문을 실행하고자 한다.
• 그러나 위의 setTimeout 함수는 1초(1000ms = 1s)가 지날 때까지 함수를 실행하지 않고 대기하는 함수이다.
• 반면, for 반복문은 속도가 매우 빠르기 때문에 처음 본문으로 갔다가 i++를 거쳐 바로 다음 i에 1이란 값을 할당하게 되고, 또 다시 본문으로 갔다가 다음 i로 넘어가길 반복하게 된다.
• 결국 1초보다 훨씬 짧은 시간에 0 ~ 3까지 4번의 반복을 거치게 된다

for 반복문이 끝났을 때의 실행 컨텍스트

1. GO (i = 4)
2. for 컨텍스트 (empty)
3. setTimeout 컨텍스트 (empty)
4. setTimeout 컨텍스트 (empty)
5. setTimeout 컨텍스트 (empty)
6. setTimeout 컨텍스트 (empty)

• 1초가 지난 후 3, 4, 5, 6의 setTimeout 함수는 i란 변수를 참조해야 하는데 자체 함수 내부에서는 i란 변수의 값을 찾을 수 없다
• 그리하여 계속해서 상위 컨텍스트를 찾게 되고, GO에서 비로소 변수 i의 값을 발견하게 된다
• 결국 4를 거의 동시에 4번 출력하게 된다

🔎 이러한 문제가 발생한 이유

• setTimeout 함수 속의 변수 i가 외부 변수의 값이 아니기 때문이다.

• 문제를 해결하기 위해서는 setTimeout을 내부 함수로 포함하는 외부 함수를 정의하고, 그 외부 함수의 지역 변수의 값을 내부 함수인 setTimeout의 변수 i가 참조하도록 만들어야 한다.

💡 문제 해결 포인트

• setTimeout 함수가 참조하는 i라는 변수가 1초 후에도 변함없이 유지되어야 한다. 즉, i = 4 (X) / i = 0 ~ 3 (O)

• 그러나 for 컨텍스트는 i를 매우 빠르게 변경하기 때문에 setTimeout이 실행되는 1초 뒤까지 i를 유지할 수가 없다. 이 문제를 해결하기 위해서는 즉시 실행 함수를 이용할 수 있다.

(2) 즉시 실행 함수(IIFE)

• 함수를 선언하는 것과 동시에 실행하는 함수

• 익명 함수를 ( )로 감싸준 후 매개변수를 적어주면 내부 함수가 실행된다

(function (x) {
  console.log(x);
})(5)

이를 실행 컨텍스트 입장에서 살펴보면,

1. GO (empty)
2. 즉시 실행 함수 컨텍스트 (x = 5)

• console.log는 x라는 변수를 참조하는데 이는 즉시 실행 함수에서 찾을 수 있기 때문에 바로 5를 출력하게 된다.

• 정리하면, 즉시 실행 함수는 새로운 컨텍스트를 만들어주고, 인자로 받은 값(이 경우 '5')을 컨텍스트에 '저장'할 수 있다.

• 이를 위의 문제 해결 포인트에 응용할 수 있다.

  즉, setTimeout이 실행되는 1초 뒤까지 i를 유지하기 위해
  즉시 실행 함수를 만들고 그 내부 함수로 setTimeout 함수를 적어준 후
  즉시 실행 함수의 매개변수 자리에 i를 적어주면
  for 반복문을 거쳐 나온 i의 값을 즉시 실행 함수 컨텍스트에 저장할 수 있다.

최종 답안

for(var i = 0; i < 4; i++) {
  (function (x) {
    setTimeout(function () {
      console.log(x);
    }, 1000*x);
  })(i)
}

💡 화살표 함수 사용

[아티클 프로젝트 058] 즉시 실행 함수 참고

(function (x) {
  console.log(x);
})(5)

원래 정석

((x) => {
  console.log(x);
})(5)

화살표 함수로 변환
function 키워드 삭제, 화살표 추가

(x => console.log(x))(5)

화살표 좌측, 매개변수가 하나일 때 ( ) 생략 가능
화살표 우측, 한 줄의 간결한 함수라면 { } 생략 가능 / ;도 같이 생략해야 함

-(x => console.log(x))(5)
+(x => console.log(x))(5)
;(x => console.log(x))(5)

맨 앞에 - / + / ; 표시 가능

📌 최최종 답안

for (var i = 0; i < 4; i++) {
  (x => {
    setTimeout (() => {
      console.log(x);
    }, 1000*x);
  })(i)
}

for 반복문이 끝났을 때의 실행 컨텍스트

1. GO (i = 4)
2. for 컨텍스트 (empty)
3. 즉시 실행 함수 컨텍스트 (i = 0)
4. setTimeout 컨텍스트 (empty)
5. 즉시 실행 함수 컨텍스트 (i = 1)
6. setTimeout 컨텍스트 (empty)
7. 즉시 실행 함수 컨텍스트 (i = 2)
8. setTimeout 컨텍스트 (empty)
9. 즉시 실행 함수 컨텍스트 (i = 3)
10. setTimeout 컨텍스트 (empty)

• 1초가 지난 후 4, 6, 8, 10의 setTimeout 함수는 x란 변수를 참조해야 하는데 자체 함수 내부에서는 x라는 변수의 값을 찾을 수 없다
• 그리하여 상위 컨텍스트를 찾게 되는데 이 경우 setTimeout 함수를 감싸고 있는 즉시 실행 함수에서 x란 변수를 찾을 수 있다
• 즉시 실행 함수의 x에는 for 반복문을 거쳐 나온 i의 값이 저장되어 있다
• 결국 0, 1, 2, 3을 1초에 한 번씩 출력하게 된다 (∵ 1000*x)

cf. 같은 문제를 가지고 있는 또 다른 예제

var arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = function () {
    return i;
  }
}

for (var index in arr) {
  console.log(arr[index]()); // 문제 발생 : 5만 5번 출력됨
}

1. 즉시 실행 함수 (& 화살표 함수) 이용해서 코드 수정

var arr = [];

for (var i = 0; i < 5; i++) {
  (x => {
    arr[x] = () => x;
  })(i);
}

for (var index in arr) {
  console.log(arr[index]()); // 문제 해결 : 0 1 2 3 4 출력됨
}

2. 한편, 기존 코드의 var을 let으로 바꿔도 문제를 해결할 수 있다. let은 블록 스코프를 갖는 지역변수를 선언할 때 사용되는 키워드이다.

var arr = [];

for (let i = 0; i < 5; i++) { // 기존 코드에서 var을 let으로만 바꿨다
  arr[i] = function () {
    return i;
  }
}

for (var index in arr) {
  console.log(arr[index]()); // 문제 해결 : 0 1 2 3 4 출력
}

2. hoisting(호이스팅)

1) 의미

• hoisting이란 위로 끌어올리는 것을 의미한다.

• 자바스크립트에서 hoisting이란 모든 변수 선언문이 해당 코드가 속한 스코프 내에서 최상위로 끌어올려진 상태로 실행되는 것을 말한다.

• 주의할 점은 변수 선언문'만' 끌어올려진다는 것이다. 변수에 값을 할당하는 구문은 끌어올려지지 않는다.

var a = 1;

function foo () {
 console.log(a);
 var a = 2;
}

foo();

이 경우에 실제로 코드가 실행되는 흐름은 아래와 같다

var a = 1;

function foo () {
 var a; // 변수 선언문이 그것이 속한 스코프의 최상위로 끌어올려짐
 console.log(a);
 a = 2; // 변수에 값이 할당된 구문은 끌어올려지지 않음
}

foo();

foo 함수 내에서 a를 출력해달라는 API 이전에 a라는 변수는 선언만 되어 있을 뿐, 변수에 값은 할당되어 있지 않기 때문에 console 창에는 undefined라는 값이 출력된다.

함수 표현식의 경우,

d();

var d = function () {
  console.log('메롱');
}

이 경우에 실제로 코드가 실행되는 흐름은 아래와 같다

var d; // 변수 선언문이 그것이 속한 스코프의 최상위로 끌어올려짐
d();

d = function () { // 변수에 값이 할당된 구문은 끌어올려지지 않음
  console.log('메롱');
}

변수 선언문이 속한 스코프가 전역 스코프이므로 변수 선언문은 모든 코드의 최상위로 끌어올려진다. 그러나 아직까지 d라는 변수는 선언만 되어 있을 뿐, 변수에 함수가 할당되어 있지는 않기 때문에 d();라는 함수 실행문을 만나면 console 창에는 d is not a function이라는 error가 뜨게 된다.

한편,

k();

function k () {
  console.log('k');
}

함수 선언식으로 작성된 함수는 항상 통째로 최상위로 끌어올려지기 때문에 함수 실행문이 어디에 위치하든 실행에는 지장을 주지 않는다.

데이터 타입

---

자바스크립트의 모든 값들은 동작 원리에 따라 크게 primitive와 reference로 나눌 수 있다. ([TIL] 210901 中 '데이터 타입' 부분 같이 볼 것)

1. Primitive (원시 타입)

• 원시적으로 작동
• 값 자체를 변수에 담아 놓는다
• boolean, number, string, null, undefined, symbol

✔ 예제 분석

let a = 10; // a라는 변수를 선언하고, 10이라는 값을 할당
const b = a; // b라는 변수를 선언하고, a 변수의 값인 10을 할당

a = 30; // a 변수에 30이라는 값을 할당

console.log(b); // b 변수의 값은 그대로 10

두 번째 줄 코드에서 변수 a와 b의 값은 10으로 같다

2. reference (참조 타입)

• 참조 방식으로 작동
• 메모리의 위치 값을 변수에 담아 놓는다
• Object (객체, 함수, 배열)

✔ 예제 분석 1

const list1 = [1, 2, 3];
const list2 = [1, 2, 3];

const result = list1 === lest2;

console.log(result); // false

변수를 선언하고, 그 값으로 배열을 할당해준다. 이때 메모리에는 배열 정보가 저장되고, 변수에는 그 메모리의 위치 값이 담기게 된다.

즉, 처음 새로 만든 배열을 메모리에 할당하고 그 위치값을 list1이라고 한 후 다시 또 새로 만든 배열을 메모리에 할당하고 그 위치값을 list2라고 해준 것이다. 따라서 list1이라는 위치값과 list2라는 다르다.

예제 분석 2

const list1 = [1, 2, 3];
const list2 = list1; // 새로운 배열을 만든 것이 아니라 list1 변수의 위치 값을 list2 변수에 할당해준 것

const result = list1 === list2;

console.log(result); // true

예제 분석 3

var updateAge = function () {
  this.age++;
};

var son = {
  age : 3,
  growUp : updateAge
};

var daughter = {
  age : 7,
  growUp : updateAge
}

var mother = {
  age : 38,
  growUp : updateAge,
  children : [son, daughter]
};

var father = {
  age : 38,
  growUp : updateAge,
  wife : mother,
  children : [son, daughter]
};

// 1번
if (father.growUp === son.growUp) {
  console.log('오예');
}

// 2번
if (father.children === mother.children) {
  console.log('와우');
}

• 1번 설명

  father 객체의 growUp 속성은 변수 updateAge라는 값을 가진다. 변수 updateAge에는 함수가 할당되어 있다. 함수는 참조 방식으로 동작하므로 변수 updateAge에는 메모리의 위치 값이 담기게 된다. mother 객체의 growUp 속성의 값도 변수 updateAge이므로 같은 위치 값이 담기게 된다. 따라서 if 조건을 만족하므로 console 창에는 오예가 출력된다.

• 2번 설명

  father 객체의 children 속성은 배열을 값으로 가진다. 배열은 참조 방식으로 동작하므로 father.children에는 그 배열이 저장된 메모리의 위치 값이 할당된다. mother 객체의 children 속성 또한 새로운 배열을 값으로 가지므로 mother.children에도 새로운 배열이 저장된 메모리의 위치 값이 할당된다. 즉, 새로운 배열을 2번 만들었으므로 그 위치 값 또한 서로 다르게 된다. 따라서 if 조건을 불만족하므로 console 창에는 아무런 값도 뜨지 않는다.

✨ 내일 할 것

1. Reference 추가 공부

2. JavaScript Koans