<모던 자바스크립트 Deep Dive> 20장~22장 strict mode, 빌트인 객체, this 요약

TIL

<모던 자바스크립트 Deep Dive> 20장~22장 strict mode, 빌트인 객체, this 요약

낭만인 2022. 3. 28. 22:07

20. strict mode

1) strict mode란?

- 선언하지 않은 변수일 때, 자바스크립트 엔진이 이를 전연 객체의 프로퍼티로 생성하는 것을 암묵적 전역이라 함

- 암묵적 전역은 오류를 발생시키는 원인이 되므로, var/let/const 키워드를 사용하여 변수를 선언한 후에 사용할 것

- 위와 같은 상황이더라도 잠재적인 오류는 존재하므로, 이를 방지하기 위한 근본적인 해결책이 ES5부터 추가된 strict mode(엄격 모드)

- ESLint와 같은 도구는 strict mode와 유사하면서도, 부가 기능으로 더욱 강력한 효과를 낼 수 있으므로 사용 선호됨

function foo() {
	x = 10; // 선언하지 않는 변수이나 자바스크립트 엔진에 의해 암묵적 전역 실행됨
}

2) strict mode의 적용

- 전역의 선두 혹은 함수 몸체의 선두에 'use strict';를 추가하면 strict mode 사용 가능

'use strict';

function foo() {
	x = 10; // ReferenceError: x is not defined
}

foo();

3) 전역에 strict mode를 적용하는 것은 피하자

- 전역에 strict mode를 사용할 경우 스크립트 단위로 적용됨

- 단, non-strict mode와 혼용될 수 있으므로 즉시 실행 함수로 스크립트를 감싸서 스코프를 구분하여 사용하는 방법으로 권장

4) 함수 단위로 strict mode를 적용하는 것도 피하자

- 모든 함수에 각각, 혹은 개별로 strict mode를 적용하거나 적용하지 않는 것은 바람직하지 않음

- 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것으로 권장

5) strict mode가 발생시키는 에러

1. 암묵적 전역 : 선언하지 않는 변수를 참조했을 때, ReferenceError 발생

2. 변수, 함수, 매개변수의 삭제 : delete 연산자로 변수, 함수, 매개변수 삭제했을 때, SyntaxError 발생

3. 매개변수 이름의 중복 : 중복된 매개변수 이름을 사용했을 때, SyntaxError 발생

4. with 문의 사용 : with 문을 사용했을 때, SyntaxError 발생

6) strict mode 적용에 의한 변화

1. 일반 함수의 this : strict mode에서 일반 함수 호출 시, this에 undefined 바인딩됨

2. arguments 객체 : strict mode에서는 매개변수에 전달된 인수를 재할당해서 변경해도 arguments 객체에 반영 안됨

21. 빌트인 객체

1) 자바스크립트 객체의 분류

- 자바스크립트 객체는 크게 3가지로 분류

1. 표준 필트인 객체 : ECMAScript 사양에 정의된 객체, 전역에 공통 기능 제공, 언제나 사용 가능, 전역 객체의 프로퍼티로서 제공됨, 언제나 참조 가능

2. 호스트 객체 : 자바스크립트 실행 환경에서 추가로 제공하는 객체, 클라이언트 사이드 Web API를 호스트 객체로 제공

3. 사용자 정의 객체 : 사용자가 직접 정의한 객체

2) 표준 빌트인 객체

- 총 40여개의 표준 빌트인 객체 존재

- Math, Reflect, JSON을 제외하고 모두 인스턴스를 생성할 수 있는 생성자 함수 객체임

- 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드 제공, 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공

3) 원시값과 래퍼 객체

- 원시값을 객체처럼 사용하면, 자바스크립트 엔진이 암묵적으로 연관된 객체를 생성하여 이를 가지고 작업 후 다시 원시값으로 되돌림

- 문자열, 숫자, 불리언 값에 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 함

- 래퍼 객체의 처리가 종료되면 가비지 컬렉션의 대상이 됨

- null, undefined는 래퍼 객체를 생성하지 않으므로 객체처럼 사용X

4) 전역 객체

- 코드가 실행되기 이전 단계에서 어떤 객체보다도 먼저 생성되는 특수한 객체

- 어떤 객체에도 속하지 않은 최상위 객체

- 브라우저 환경에서는 window(or self, this, frames), Node.js 환경에서는 global

- 표준 빌트인 객체, 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 가짐

- 특징 : 개발자가 의도적으로 생성 불가, window or global 생략 가능, 모든 표준 빌트인 객체를 프로퍼티로 가짐, 실행환경에 따라 추가적으로 프로퍼티와 메서드를 가짐, var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역과 전역 함수는 전역 객체의 프로퍼티가 됨, let과 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님, 모든 코드는 하나의 window 전역 객체를 공유

- 전역 객체의 프로퍼티와 메서드는 식별자 생략이 가능하므로, 전역 변수와 전역 함수처럼 사용 가능

1. 빌트인 전역 프로퍼티 : 전역 객체의 프로퍼티, 전역에서 사용되는 값 제공 - Infinity(무한대 숫자값), NaN(숫자가 아님), undefined

2. 빌트인 전역 함수 : 전역에서 호출 가능한 빌트인 함수 - eval(문자열을 인수로 받아 표현식인지 문인지에 따라 실행하며 기존의 스코프를 런타임에 동적으로 수정한다는 특징이 있으므로 사용 금지함), isFinite(유한수면 true, 무한수면 false), isNaN(불리언 타입으로 반환), parseFloat(실수로 해석해서 반환), parseInt(정수로 해석해서 반환), encodeURI / decodeURI(URI를 문자열로 전달받아 인코딩, 디코딩), encodeURIComponent / decodeURIComponent (URI 구성 요소를 인코딩, 디코딩)

3. 암묵적 전역 : 선언하지 않은 변수를 전역 객체의 프로퍼티로 생성

22. this

1) this 키워드

- 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 this로 함

- 자바스크립트 엔진에 의해 암묵적으로 생성됨

- 코드 어디서든 참조가 가능

- 함수 호출 시 arguments 객체와 this가 암묵적으로 함수 내부에 전달되므로 지역변수처럼 사용 가능

- this 바인딩은 함수 호출 방식에 의해 동적으로 결정

2) 함수 호출 방식과 this 바인딩

1. 일반 함수 호출

- 일반 함수로 호출 시 전역 객체로 바인딩, strict mode에서는 undefined가 바인딩됨

- 메서드 내부의 중첩 함수나 콜백 함수의 this 바인딩이 메서드의 this 바인딩과 일치하지 않으면 이들 함수의 본래 기능 활용 어려움

// this 바인딩이 일치하지 않는 문제의 해결방법
var value = 1;

const obj = {
	value: 100,
    foo() {
    	// this 바인딩(obj)을 변수 that에 할당
        const that = this;
        
        setTimeout(function() {
        	console.log(that.value); //100
        }, 100);
    }
};

obj.foo();

- this의 명시적 바인딩 메서드 : Function.prototype.apply, Function.prototype.call, Function.prototype.bind

2. 메서드 호출

- 메서드 내부의 this에는 메서드를 호출한 객체가 바인딩됨(메서드를 소유한 객체가 아님)

3. 생성자 함수 호출

- 생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩됨

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

- 모든 함수가 상속받아 사용 가능

- apply와 call 메서드는 함수 호출 시, 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩됨
- bind 메서드는 함수를 호출하지 않으므로, 첫 번째 인수를 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성하여 반환(메서드의 this와 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제 해결 가능)

참고 : 도서 <Deep Dive 모던 자바스크립트>