[자바스크립트 중고급] this, 논리적 정리

this

this 개요

• 키워드
• obj.name() 형태로 호출한 함수(메소드)에서 this로 인스턴스(오브젝트)를 참조한다.

this와 글로벌 오브젝트

• 글로벌 오브젝트에서 this는 글로벌 오브젝트를 참조한다.
• window는 JS에서 만든 것이 아니며, 글로벌 오브젝트의 스코프가 아니다.
  • 그러나 window와 글로벌 오브젝트를 같은 선상에서 사용한다.
  • 이는 Host 오브젝트 개념이 적용되었기 때문이다.
  • window 오브젝트와 같이 다른 오브젝트를 마치 내것처럼 사용하는 개념을 Host 오브젝트라고 한다. DOM 오브젝트도 Host 오브젝트이다.

this 참조 범위

this와 strict 모드

• 오브젝트.함수이름() 형태로 함수 호출
  • 글로벌 오브젝트는 오브젝트 이름이 없으므로 함수 이름만 작성하여 호출한다.
• strict 모드에서는 window.book()처럼 book() 앞에 window를 글로벌 오브젝트로 작성한다.
• 함수 앞에 오브젝트를 작성하지 않으면 this 바인딩 컴포넌트에 undefined가 설정되므로 this로 window를 참조할 수 없다.

this와 인스턴스

• 인스턴스 목적: 인스턴스마다 고유 값 유지
• 인스턴스에서 this의 목적: this로 인스턴스를 참조하여 this.name 형태로 프로퍼티에 접근

this와 call()

• getTotal.call(this, 10, 20)
  • 첫 번재는 파라미터 값으로 넘어가지 않고 두 번째부터 넘어간다.
• 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트를 작성한다.
  • this 이외에 다른 오브젝트를 사용할 수 있다.

this와 apply()

• getTotal.apply(this, [10, 20])
  • 함수 호출 방법은 call()과 같지만 파라미터가 배열인 것이 다르다.
• 두 번째 파라미터 수가 유동적일 때 사용한다.
  • call()은 파라미터 수가 고정일 때 사용한다.

this와 콜백 함수

• ES5의 map(), forEach()처럼 콜백 함수가 있는 메소드는 두 번째 파라미터에 this로 참조할 오브젝트를 작성한다.(option)

this와 bind()

bind()

• bind()는 두 번에 나누어 처리한다.
  • function 오브젝트 생성
  • 생성한 function 오브젝트를 함수로 호출
• 파라미터
  • 1번째 파라미터: 함수에서 this로 참조할 오브젝트
  • 2번째 파라미터: 호출된 함수의 파라미터 값
• 생성한 function을 호출할 때에도 파라미터를 작성할 수 있다.
  • 두 개의 파라미터를 병합하여 사용한다.

bind() 활용, 이벤트 처리

• 이벤트를 설정할 때 오브젝트를 핸들러에서 this로 참조할 수 없다.
  • 이를 bind()로 해결할 수 있다.

---

재귀 함수

프로퍼티 연동 방지

• Object에 Object를 할당하면 프로퍼티 값이 연동된다.
• 배열도 마찬가지로 연동된다.
• 연동 방지: 프로퍼티 단위로 할당

재귀 함수

• 함수 안에서 자신 함수를 호출하는 형태
• {name: {name: {name: value}}}
• [ [1, 2], [3, 4], [5, 6] ]

즉시 실행 함수

• 함수 즉시 실행: 엔진이 함수를 만났을 때 자동으로 실행하는 것. 즉시에 실행하므로 즉시 실행 함수라고 한다.
• IIFE: Immediately Invoked Function Expression

함수 즉시 실행 과정

• 표현식을 평가
  • 소괄호()는 그룹핑 연산자
• 함수 이름 필요
  • 함수에 이름이 없으면 문법 에러
• 함수 표현식 끝에 소괄호 작성
• 소괄호()에 함수 작성

클로저 논리

Closure

• function 오브젝트를 생성할 때 함수가 속한 스코프를 [[Scope]]에 설정하고 함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 매커니즘이다.
• [[Scope]]의 설정과 사용 방법을 이해하면 클로저는 단지 논리적인 설명이다.

클로저 논리

• 실행 중인 function 오브젝트에 작성한 변수, 함수를 선언적 환경 레코드에 설정한다.
• [[Scope]]의 변수, 함수를 외부 렉시컬 환경 참조에 바인딩한다.
  • 변수 이름으로 접근하여 값을 사용하거나 변경할 수 있다.
  • 함수를 호출할 수 있다.

클로저와 무명 함수

• 무명 함수 안에 작성한 값, 함수는 무명 함수가 끝나면 지워진다.
  • 다시 사용하려면 저장을 해야 한다.
  • 한편, 무명 함수는 저장하지 않으려는 의도로 사용한다.
• 이때 클로저를 활용할 수 있다.
  • 클로저는 함수 밖 스코프의 변수와 함수를 사용할 수 있다.
  • 변수는 외부에서 직접 접근할 수 없으므로 정보를 보호할 수 있다.
  • 무명 함수 안에서 클로저의 변수를 가진 함수를 반환하면 함수의 재사용과 정보 보호를 모두 할 수 있다.

JS에서 클로저

• 함수에서 함수 밖의 변수 사용은 JS의 기본 매커니즘이다.
• 논리적 근거는 외부 렉시컬 환경 참조에 함수가 속한 스코프가 설정되기 때문이다.
• 클로저는 이를 나타내는 용어이다.
  • 용어보다 논리적 구조를 이해하자!