201102_TIL

오늘한 일

• Socrative / Checkpoint - Scope & Closure 15문제 풀기 / 오답체크(3문제)
• Hoisting 이란?
• Closure 함수란? 장점과 단점은?

 

오늘 느낀점

• scope 란 ? 변수 접근 규칙을 말한다.
• var 로 변수를 만들 경우 function scope 로 그 범위를 예상하기 쉽지 않고, 똑같은 변수를 재사용했을 때 문제가 생길수 있기 때문에 조심히 사용해야 한다.

for (var i = 0; i < 5; i++) {
  console.log(i);  // 0 1 2 3 4
}

console.log(i);  // 5

 

변수 선언 keyword	재선언	재할당	SCOPE
const	X	X	block
let	X	O	block
var	O	O	function

 

• global scope 에 선언한 함수와 var 키워드로 선언한 변수는 window 객체에 연결된다. 전역 범위에 너무 많은 변수를 선언하는 것은 지양해야 한다. 
• 절대로 선언 keyword 없이 변수를 초기화 하지 않는다. 이럴경우 error 없이 전역변수로 취급한다(window 의 객체화). 이런 실수를 방지하고 싶을 때는 'use strict'; 라는 문자열을 가장 상단에 입력해주고 코딩한다.

'use strict';

function test () {
  test_noKeyword = 90;  // ReferenceError
  console.log(test_noKeyword);
}

test();

 

• Closure 는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻한다. 외부함수의 실행이 종료된 후에도, 클로저는 외부함수의 스코프를 참조할 수 있다는 특징이 있다.
• Closure 사용 예시1 : 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법

// currying of Closure pattern Example.

function htmlMaker(tag) {
  let startTag = '<' + tag + '>';
  let endTag = '</' + tag + '>';
  
  return function(comment) {
    return startTag + comment + endTag;
  }
}


let divMaker = htmlMaker('div');
divMaker('안녕하세요');  // '<div>안녕하세요</div>'


let spanMaker = htmlMaker('span');
spanMaker('반갑습니다');  // '<span>반갑습니다</span>'

 

• Closure 사용 예시2 : 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있습니다.

// Module of Closure pattern Example.

function makeCounter() {
  let privateCount = 0;
  let obj =  {
    increment : function() {
      privateCount++;
    },
    decrement : function() {
      privateCount--;
    },
    getValue : function() {
      return privateCount;
    }
  }
  
  return obj;
}


let cnt1 = makeCounter();
cnt1.increment();  // privateCount +1 증가, 1
cnt1.increment();  // privateCount +1 증가, 2
cnt1.decrement();  // privateCount -1 감소, 1
cnt1.getValue();  // privateCount 값을 return, 1

 

 

• Closure 단점 : 자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 한다. 즉, 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제됩니다. 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 된다. 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문이다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있다.