목차

1. javascript 사전 퀴즈

1-1. 생성자함수와 일반 함수의 this 바인딩 차이

function Cat(name, age){
	this.name = name;
	this.age = age;
}

const tabby1 = Cat('nana', 7);
console.log(tabby1.name)

<aside> 💡 생성자함수와 일반 함수의 this 바인딩 차이

</aside>

• new 키워드를 통한 생성자함수는 함수내부의 this가 선언된 객체를 가르키게 된다.
• 해당 문제는 Cat() 함수의 리턴 값이 없기 때문에, tabby1 = undefined 가 할당되고, undefined의 name을 접근하기 때문에 오류가 발생하게 된다.

1-2. 즉시실행함수의 결과

(function(name){
	console.log(`hello ${name}`)	
}){'roto'}

즉시실행함수를 사용하는 이유

js에서 선언된 모든 변수나 함수는 전역 공간에 저장되고, 다른 파일에서 같은 변수명을 사용할 경우 오버라이딩 되는 경우가 발생한다.

• 1. 따라서 함수스코프를 통해 이를 방지하고자, 특정 스크립트 파일이나 덩어리들을 하나의 함수로 묶어주어 변수공간을 제한하기 위해 사용했다.
• 2. 즉시실행함수에서 특정 변수,함수만을 리턴하여, 내부의 변수를 private하게 관리할 수 있는 효과도 있다.

  const logger = (function () {
    let privateCnt = 0;
  
    function log(msg) {
      console.log(msg);
      privateCnt += 1;
    }
  
    function getLogCnt() {
      return privateCnt;
    }
  
    return {
      log: log,
      getLogCnt: getLogCnt,
    };
  })();
  
  // logger.privateCnt에 직접 접근할 수 없게 됨
  

1-3. functionscope와 this

var idiots = {
  name: "name",
  genre: "genre",
  members: {
    roto: {
      memberName: "roto",
      play: function () {
        console.log(this.name, this.memberName);
      },
    },
  },
};

idiots.members.roto.play(); // undefined, roto
// play내부의 this는 this를 실행시킨 객체인 roto : {memberName: - , play: f} 이기때문

• this는 함수 실행시 생성되는 실행컨텍스트에 속하며, 함수의 호출방법에 따라 this값이 다르다.
• 일반적으로 전역객체(windows)를 가르킴
• method 방식 호출시 this는 함수실행한 부모객체를 가르킴