09장 타입 변환과 단축 평가

9.1 타입 변환이란?

• 명시적 타입 변환 (= 타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환 (= 타입 강제 변환): 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

9.2 암묵적 타입 변환

9.2.1 문자열 타입으로 변환

Symbol 타입을 제외하고는 전부 문자열 타입으로 변환이 가능하다.

1+ '2' // "12"
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"
(Symbol()) + '' // TypeError 

9.2.2

1 - '1'// 0
1 * '10' // 10
1 / 'one' // NaN
+Symbol() // TypeError

9.2.3 불리언 타입으로 변환

Truethy: true, 0이 아닌 숫자 값, 비어있지 않은 문자열
Falsy: false, undefined, null, 0, -0, NaN, '' (empty string)

9.3 명시적 타입 변환

명시적으로 타입을 변경하는 방법

• 표준 빌트인 생성자 함수 (String, Number, Boolean)을 new 연산자 없이 호출
• 빌트인 메서드를 사용하는 방법

9.3.1 문자열 타입으로 변환

// 1. String 생성자 함수 사용
String(1);

// 2. Object.prototype.toString 메서드 사용
(1).toString();

// 3. 문자열 연결 연산자
1 + '';

9.3.2 숫자 타입으로 변환

// 1. Number 생성자 함수 사용
Number(1);

// 2. parseInt, parseFloat 사용
parseInt('1');

// 3. + 단항 산술 연산자 이용
+'1';

// 4. * 산술 연산자 이용
'0' * 1;

9.3.3 불리언 타입으로 변환

// 1. Boolean 생성자 함수 사용
Boolean(1);
// 2. !부정 논리 연산자를 두 번 사용하는 방법(현직장에서 사용 중)
!!1;

9.4 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가

• 논리합(||)
• 논리곱(&&)

true || anything; // true
false || anything; // anything
true && anything; // anything
false && anything; // false

• if / else 문
• 삼항 조건 연산자
• 기대하는 변수가 null/undefined인지 확인하고 프로퍼티 참조하기

var elem = null;
var value = elem && elem.value;

• 함수 매개변수에 기본값을 설정

// 단축 평가를 사용한 매개변수 기본값 설정
function getStringLength(str) {
	str = str || '';
    return str.legnth;
}
// ES6의 매개변수 기본값 설정
function getStringLength(str = '') {
	return str.length;
}

9.4.2 옵셔널 체이닝 연산자(?.)

옵셔널 체이닝: 좌항의 피연산자가 null 혹은 undefined인 경우 undefined을 반환하고, 그렇지 않은 경우 우항의 프로퍼티 참조를 이어나간다.

var elem = null;
var value = elem?.value; // undefined

var str = '';
var length = str?.length;

9.4.3 null 병합 연산자(??)

null 병합 연산자: 좌항의 피연산자가 null 혹은 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않은 경우 좌항의 피연산자를 반환한다.

논리합(||) 연산자의 경우 Falsy값을 가진 경우 우항을 반환하고 null 병합 연산자의 경우 null/undefined의 경우에만 우항을 반환한다.

var foo = null ?? 'default string'; // default string

var foo = '' || 'default string'; // default string
var foo = '' ?? 'default string';// ''

10. 객체 리터럴

10.1 객체

• 프로퍼티: 객체의 상태를 나타내는 값
• 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

var person = {
	name: 'Lee', // name: 프로퍼티 key, 'Lee': 프로퍼티 value
    age: 20 // age: 프로퍼티 key, 20: 프로퍼티 value
}

var counter = {
	num: 0, // 프로퍼티
    increase: function() { // 메서드
    	this.num++;
    }
}

10.2 객체 리터럴에 의한 객체 생성

클래스 기반 언어의 객체 생성(C++, java): 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 사용
프로토타입 기반 객체지향 언어의 객체 생성(javascript)

• 객체리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 함수
• 클래스

// 객체 리터럴 방식
var person = {
	name: 'Lee',
    sayHello: function() {
    	console.log("Hello");
    }
}

console.log(person);

인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체

추가로 확인하면 좋을 내용

new Array vs []
https://stackoverflow.com/questions/1800594/in-javascript-why-is-preferred-over-new-array

10.3 프로퍼티

• 프로퍼티 키: 모든 문자열(빈 문자열 포함), 심벌 값
• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

var person = {
	firstName: 'Ung-mo',
    'last-name': 'Lee'
}

var obj = {};
var key = 'hello';

obj[key] = 'world';

var foo = {
	'': ''
}

// error가 발생하지는 않으나 나중에 선언한 프로퍼티가 이전 프로퍼티를 덮어쓴다.
var bar = {
	name: 'lee',
    name: 'kim'
}

10.4 메서드

10.5 프로퍼티 접근

var person = {
	name: 'Lee'
}

// 마침표 표기법
person.name

// 대괄호 표기법 (따옴표로 감싼 문자열을 사용해야한다는 점을 잊지말자)
person['name']

10.6 프로퍼티 값 갱신

var person = {
	name: 'Lee'
}

person.name = 'Kim';

console.log(person['name']); // 'Kim'

10.7 프로퍼티 동적 생성

var person = {
	name: 'Lee'
}

person.age = 20;

console.log(person); // {name: 'Lee', age: 20}

10.8 프로퍼티 삭제

var person = {
	name: 'Lee'
}
person.age = 20;
delete person.age;

// 없는 프로퍼티를 제거해도 에러가 발생하지 않는다.
delete person.address;

10.9 객체 리터럴 확장 기능(ES6 추가)

10.9.1 프로퍼티 축약 표현

// ES5
var x = 1, y = 2;
var obj = {
	x:x,
    y:y
}

// ES6
let x = 1, y = 2;
const obj = { x, y };

10.9.2 계산된 프로퍼티 이름

// ES5
var prefix = 'prop';
var i = 0;
var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

// ES6
const prefix = 'prop';
let i = 0;
const obj = {
	[`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
}

10.9.3 메서드 축약 표현

// ES5
var obj = {
	...
    sayHello: function() {
    }
}

// ES6
var obj = {
	...
    sayHello() {
    }
}