1. 자바스크립트의 데이터형변환

1. 데이터 형변환이란?

• 자바스크립트는 타입이 매우 유연한 언어이기 때문에 자바스크립트 엔진이 필요에 따라 암묵적변환을 혹은 개발자의 의도에 따라 명시적변환을 실행함

2. 명시적 형변환

개발자가 의도적으로 값의 타입을 변환하는 것은 명시적 타입 변환, 타입 캐스팅이라 한다.

1. 문자열 타입으로 변환

1. String생성자 함수를 new연산자 없이 호출

String(0);

2. Object.prototype.toString메서드를 사용

(1).toString();

3. 문자열 연결 연산자를 이용

1 + '';

2. 숫자 타입으로 변환

1. Number생성자 함수를 new연산자 없이 호출

Number('0');

2. parseInt, parseFloat함수를 사용 (문자열만 숫자 타입으로 변환 가능)

parseInt('0');
parseFloat('10.53');

3. +단항 산술 연산자를 이용

+'0';

4. *산술 연산자를 이용

'0' * 1;

3. 불리언 타입으로 변환

1. Boolean 생성자 함수를 new연산자 없이 호출하는 방법

Boolean('x');

2. ! 부정 논리 연산자를 두 번 사용하는 방법

!!'x';

3. 암묵적 형변환

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환, 타입 강제 변환이라고 한다.

1. 문자열 타입으로 변환

1 + '2' // -> "12"

2. 숫자 타입으로 변환

1 - '1' // -> 0
1 * '10' // -> 10
1 / 'one' // -> NaN

3. 불리언 타입으로 변환

자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입변환한다. 이 때, 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값 (참으로 평가되는 값) 또는 Falsy값 (거짓으로 평가되는 값)으로 구분한다.

Falsy값

• false
• undefined
• null
• 0, -0
• NaN
• ''(빈 문자열)

2. 자바스크립트가 동적인 언어인 이유

• 코드 실행 시에 타입이 결정되는 언어.
  <-> 정적언어 : 컴파일 할 때 변수의 타입이 결정되는 언어

1. 장점

• 코드 실행 시에 타입이 결정되기 때문에 유연성이 높음
• 컴파일 시 타입을 명시해주지 않아도 되기 때문에 개발 속도가 향상됨

2. 단점

• 코드 실행 시, 타입 자동변환을 통해 타입에러를 발생시킬 수 있음
• 코드 실행 전에 타입에러를 확인할 수 없기 때문에 에러 찾기가 어려움

3. 보완방법

• TypeScript를 사용하여 타입에러 해결

3. 프로토타입

1. 프로토타입이란?

• 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있고, 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 함

2. 프로토타입 객체

• 객체 간 상속을 구현하기 위해 사용됨
• 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지고, [[Prototype]]에 저장되는 프로토타입은 객체 생성방식에 의해 결정됨
• 모든 객체는 하나의 프로토타입을 갖고, 생성자 함수와 연결되어 있음

1. proto 접근자 프로퍼티

• 모든 객체는 proto접근자 프로퍼티를 통해 [[Prototype]]내부 슬롯에 간접적으로 접근할 수 있음
  

2. 함수 객체의 prototype프로퍼티

• 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴
• proto접근자 프로퍼티와 prototype프로퍼티는 동일한 프로토타입을 가리키나 사용하는 주체가 다르다.
  

3. 프로토타입의 constructor 프로퍼티와 생성자 함수

• 모든 프로토타입은 constructor프로퍼티를 가지고, 이는 자신을 참조하고 있는 생성자 함수를 가리킴

3. 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

• 리터럴 표기법에 의해 생성된 객체의 경우 가상적인 생성자 함수를 갖게 됨
  

4. 프로토타입의 생성 시점

• 프로토타입은 생성자 함수가 생성되는 시점에 생성됨

1. 사용자 정의 생성자 함수와 프로토타입 생성 시점

• construtor는 함수 객체를 생성하는 시점에 프로토타입시 생성됨
• 생성된 프로토타입의 프로토타입은 언제나 Object.prototype임

2. 빌트인 생성자 함수와 프로토타입 생성 시점

• 빌트인 생성자 함수 : Object, String, Numer, Function, Array, RegExp, Date, Promise
• 전역 객체가 생성되는 시점에 생성됨
• 생성된 프로토타입은 빌트인 생성자 함수의 prototype프로퍼티에 바인딩 됨

5. 객체 생성 방식과 프로토타입의 결정

• 객체생성방법 : 객체 리터럴, Object생성자 함수, 생성자 함수, Object.create메서드, 클래스(ES6)
• 자바스크립트 엔진은 객체를 생성할 때 추상 연산 OrdinaryObjectCreate를 호출함

1. 객체 리터럴에 의해 생성된 객체의 프로토타입

객체 리터럴에 의해 생성되는 객체의 프로토타입은 Object.prototype임

2. Object생성자 함수에 의해 생성된 객체의 프로토타입

• Object생성자 함수에 의해 생성되는 객체의 프로토타입은 Object.prototype임

3. 생성자 함수에 의해 생성된 객체의 프로토타입

생성자 함수에 의해 생성되는 객체의 프로토타입은 생성자 함수의 prototype프로퍼티에 바인딩 되어있는 객체임

6. 프로토타입 체인

• 정의: 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]]내부 슬롯의 참조를 따라 부모역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는 것
• 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘
• Object.prototype : 프로토타입 체인의 종점
• 스코프체인과 프로토타입 체인은 서로 협력하여 식별자와 프로퍼티를 검색하는 데 사용됨

7. 프로토타입의 교체

1. 생성자 함수에 의한 프로토타입의 교체

• 생성자 함수의 prototype프로퍼티를 통해 프로토타입을 교체할 수 있는데, 이 때 constructor프로퍼티와 생성자 함수 간의 연결이 파괴되므로 constructor 프로퍼티를 추가하여 연결을 되살릴 수 있음

2. 인스턴스에 의한 프로토타입의 교체

• 인스턴스의 proto접근자 프로퍼티(또는 Object.getPrototypeOf메서드)를 통해 프로토타입을 교체할 수 있는데, 이 때 constructor프로퍼티와 생성자 함수 간의 연결이 파괴되므로 constructor 프로퍼티를 추가하여 연결을 되살릴 수 있음

8. 직접상속

1. Object.create에 의한 직접 상속

• 명시적으로 프로토타입을 지정하여 새로운 객체를 생성하는 메서드
• 첫번째 매개변수: 프로토타입으로 지정할 객체
• 두번째 매개변수: 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체 (옵션, 생략가능)

2. 객체 리터럴 내부에서 proto에 의한 직접 상속 (ES6)

const myProto = { x: 10 };

const obj = {
  y: 20,
  __proto__: myProto
};

9. 정적 프로퍼티/메서드

• 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드 (프로토타입 체인상의 프로퍼티/메서드가 아닌 생성자 함수 자체가 가지고 있는 프로퍼티/메서드임)