[모던 자바스크립트 Deep Dive] 9~11. 타입 변환, 객체 리터럴, 원시 값

모던 자바스크립트 Deep Dive

09~11장 내용 정리

 

회사에서 사용하는 javascript를 좀 더 깊게 공부하기 위해 기초부터 한번 훝으려고 한다.

 

 

---

 

9장. 데이터 타입

명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환시키는 것

암묵적 타입 변환 (타입 강제 변환) : 개발자가 의도 없이 표현식을 평가하는 도중 JS엔진에 의해 암묵적으로 타입이 자동변환 되는 것

 

• 이러한 타입 변환은 기존의 원시 값을 직접 변경하는 것이 아닌 새로운 원시 값을 생성하여 단 한 번 사용하고 버림
• 중요한 것 : 코드가 어떻게 작동되는 것인지 예측하고 이해하면서 사용해야 한다는 것

 

 

암묵적 타입 변환

 

문자열 타입으로 변환

• + 연산자 :  피 연산자 중 하나 이상이 문자열 이면 문자열 연결 연산자로 동작
• 리터럴의 표현식 삽입  -> 평가 결과를 문자열 타입으로 암묵적 타입 변환

 

숫자 타입으로 변환

• -, *, /와 같은 산술 연산자는 피 연산자 중, 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환
• 숫자 타입으로 변환할 수 없는 경우 산술 연산 수행이 불가능하여 표현식의 평가 결과가 NaN이 됨
• 비교 연산자 또한 값을 비교하여 불리언 값을 만들기 때문에 피 연산자를 숫자 타입으로 암묵적 타입 변환

 

불리언 타입으로 변환

• JS엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분하는데, Truthy는 true로, Falsy는 false로 암묵적 타입 변환
• 대표적 Falsy 값 : false, undefined, null, -0,0, NaN, "(빈 문자열)

 

 

명시적 타입 변환

 

문자열 타입으로 변환

• new 연산자 없이 String 생성자 사용 ex) String(1);
• Object.prototype.toString ex) (1).toString();
• 문자열 연결 연산자를 이용하는 방법 ex) 1 + '';

 

숫자 타입으로 변환

• new 연산자 없이 Number 생성자 함수 사용 ex) Number('0');
• parseInt, parsefloat 함수 사용 --> 문자열만 숫자 타입으로 변환 가능 ex) parseInt('0');
• + 단항 산술 연산자 이용 ex) +'0';
• * 산술 연산자 이용 ex) true * 1;

 

불리언 타입으로 변환

• new 연산자 없이 Boolean 생성자 함수 사용 ex) Boolean('x');
• ! 부정 논리 연산자를 두 번 사용 ex) !!'x';

 

 

단축평가

• 논리곱(&&) 연산자와 논리합(||) 연산자 : 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환함
• 단축 평가 : 표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략하는 것

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

 

[단축평가의 이점]

• if문 대체 ex) data = done && '완료';
• 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

var elem = null;
var value = elem.value;  // TypeError!!

// 단축평가 사용시 에러 발생x
var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 ele.value으로 평가됨
var vale = elem && elem.value; // -> null

 

• 함수 매개변수에 기본 값을 설정할 때(기본값을 설정해두면 undefined로 발생할 수 있는 에러 방지가능)

 

옵셔널 체이닝 연산자

?.로 사용하며 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조함

var elem = null;

var value1 = elem?.value;
console.log(value1); // undefined

var value2 = elem && elem.value;
console.log(value2); // null


var str = '';

// 문자열 길이를 참조하는데 좌항 피연산자가 null또는 undefined가 아니기 때문에 우항의 프로퍼티 참조

var length = str?.length;
console.log(length); // 0

 

 

null 병합 연산자

??로 사용하며 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환함

var helloNull = null ?? 'default string';
console.log(helloNull); // "default string"

// 만약 Falsy값인 0 이나 ''도 기본값으로 유효시, 예기치 않은 동작 발생 가능
var foo = '' || 'default string'; 
console.log(foo); // "default string"

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항 피연산자 반환
var foo2 = '' ?? 'default string';
console.log(foo2); // ""

 

 

 

---

10장. 객체 리터럴

객체

• 원시 타입은 단 하나의 값, 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조임
• 원시타입 : 변경 불가능한 값, 객체타입 : 변경 가능한 값
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는key와 value로 구성됨

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

 

프로퍼티 : 객체의 상태를 나타내는 값(data)

메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

 

 

[자바스크립트의 객체 생성 방법]

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

var empty = {}; // 객체 리터럴은 블록문이 아니어서 세미콜론을 붙여주고, 빈 객체가 생성됨
console.log(typeof empty); // object

 

※ 객체 리터럴을 이용해 프로퍼티와 함께 객체를 생성할 수도 있고, 빈 객체를 만들어 두고, 프로퍼티를 이후에 추가할 수도 있음

 

 

 

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됨

 

• 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값(식별자 네이밍 규칙을 따르지 않는 프로퍼티 키는 따옴표로 묶어서 사용)
• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

 

[동적으로 프로퍼티 키를 생성하는 경우]

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

obj[key] = 'hello';

console.log(obj); // {hi: "hello"}

 

 

[프로퍼티 접근]

프로퍼티에 접근하는 두 가지 방법

• 마침표 프로퍼티 접근 연산자를 사용하는 마침표 표기법(person.name)
• 대괄호 프로퍼티 접근 연산자를 사용하는 대괄호 표기법(person['name'])

var person = {
  name: 'Lee'
};

console.log(person.name); // Lee
console.log(person['name']); // Lee (대괄호 프로퍼티 접근 연산자를 사용하는 경우 반드시 따옴표로 감싼 문자열 사용)
console.log(person[name]); // ReferenceError(식별자 name을 찾을 수 없어서)
console.log(person.age); // undefined;

 

※ 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환

 

 

 

[프로퍼티 값 갱신]

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨

 

 

[프로퍼티 동적 생성]

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨

 

 

[프로퍼티 삭제]

delete 연산자는 객체의 프로퍼티를 삭제함

※ 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러없이 무시됨

 

 

 

[프로퍼티 축약 표현(ES6 추가)]

변수 이름과 프로퍼티키가 동일한 이름일 때 프로퍼티 키 생략 가능함

let x = 1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2}

 

 

 

[계산된 프로퍼티 이름]

프로퍼티 키를 동적으로 생성하는 것

 

• ES5 -> 객체 리터럴 외부에서 동적으로 프로퍼티키를 생성함

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

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

console.log(obj); // {prop-1: 1}

 

• ES6 -> 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 가능

const obj = {
  [`${prefix}-${++i}`]: i
};

 

 

 

[메서드 축약 표현]

// es5

var obj = {
  sayHi: function() {
    console.log('Hi ');
  }
}


// es6

var obj = {
  sayHi() {
    console.log('Hi ');
  }

 

※  메서드 축약 표현으로 정의한 메서드와 프로퍼티에 할당한 함수와 다르게 동작함

 

 

 

---

11장. 원시 값과 객체의 비교