[딥다이브] 9장 | 타입 변환과 단축 평가

타입 변환

명시적 타입 변환 = 타입 캐스팅

개발자가 의도적으로 값의 타입을 변환하는 것
암묵적 타입 변환 = 타입 강제 변환

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

원시 값은 불변하기 때문에 변경할 수 없다. 따라서 타입 변환이 일어날 때 기존 원시 값을 직접 변경하는 것이 아닌, 기존 원시 값을 사용해 다른 타입의 새로운 원시 값이 생성된다.

let str = 'birthday : ';
let bDay = 2.15;
let HBD = str + bDay;

console.log(bDay); // 'birthday : 2.15';

위의 예시에서 자바스크립트 엔진이 str + bDay를 에러 없이 평가하기 위해 bDay 변수의 숫자 값을 바탕으로 새로운 문자열 값 '2.15'를 생성하고 이것으로 표현식 'birthday : ' + '2.15'를 평가한다. 이때 암묵적으로 생성된 값 '2.15'는 변수 bDay에 재할당되지 않으며 단 한 번 사용되고 버려진다.

타입 변환으로 생성된 값은 따로 할당하지 않는 이상 변수에 재할당 되지 않고 한 번 사용된 뒤 버려진다.

암묵적 타입 변환

암묵적 타입 변환을 예측하지 못하면 오류가 발생할 확률이 높아진다. 하지만 암묵적 타입 변환이 무조건 나쁜 것은 아니다. 명시적 타입 변환보다 가독성 측변에서 더 좋을 때도 있다.

자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 코드의 문맥을 고려해서 암묵적으로 데이터 타입을 강제 변환한다.

피연산자가 모두 문자열 타입이어야 하는 문맥
피연산자가 모두 숫자 타입이어야 하는 문맥
피연산자 또는 표현식이 불리언 타입이어야 하는 문맥

문자열 타입으로 변환

문자열 연결 연산자

피연산자 중 하나 이상이 문자열일 때 + 연산자는 문자열 연결 연산자로 동작한다.
문자열 연결 연산자는 문자열 값을 만드는 것이기 때문에 모든 피연산자는 코드 문맥상 문자열 타입이어야 한다.
템플릿 리터럴

ES6에서 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.

자바스크립트 엔진이 문자열 타입이 아닌 값을 문자열로 암묵적 타입 변환할 때 다음과 같이 동작한다.

let Ptypes = [0, 10, Infinity, NaN, null, undefined, Symbol()];
let Otypes = [{}, {a: 10}, [], [1, 2, 3], function(){}, Array];

Ptypes.forEach(type => console.log(type + ''));
Otypes.forEach(type => console.log(type + ''));

숫자 타입으로 변환

산술 연산자

산술 연산자의 역할은 숫자 값을 만드는 것이다. 따라서 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.

자바스크립트 엔진은 산술 연산자의 피연산자 중 숫자 타입이 아닌 것을 숫자 타입으로 암묵적 타입 변환한다. 표준 산술 연산자인 -, *, / 뿐만 아니라 %, **, ++, -- 그리고 단항 연산자 -, + 역시도 타입 변환이 일어난다. ('+'의 경우 피연산자 중 하나라도 문자열일 경우 문자열 연결 연산자가 되기 때문에 제외하고 생각하자!)

이때 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없기 때문에 표현식의 평가 결과가 NaN이 된다.

💡 왜 증감 연산자는 변수에 할당하지 않으면 에러가 발생할까?

아마 원래의 변수에도 재할당해줘야돼서 변수가 필요한듯,,,??

ESLint는 ++, --를 허용하지 않는다.

💡 단항 연산자 -, +의 동작 원리는?

비교 연산자

비교 연산자의 역할은 boolean 값을 만드는 것이다. 비교 연산자는 피연산자의 크기를 비교하므로 모든 피연산자는 코드의 문맥상 숫자 타입이어야 한다. 자바스크립트 엔진은 피연산자 중에서 숫자 타입이 아닌 것을 숫자 타입으로 암묵적 타입 변환한다.

💡 다른 타입끼리 비교하면?

일단 다른 타입끼리 비교하면 숫자 타입이 아닌 것을 숫자 타입으로 변환한다. boolean 값의 경우 true는 1, false는 0으로 변환된 후 비교가 이뤄진다.
문자열이 숫자로 변환될 수 없는 경우에는? 아마,, NaN으로 변환된 다음 비교한다?

💡 이중 등호 == 와 삼중 등호 === 와 Object.is

3가지 모두 원시타입에 대해서만 비교 가능하다!!

→ 객체 타입의 경우 객체 자체가 각각 다른 것이기 때문에 위의 연산을 진행하면 false가 반환된다.

하지만,,, 두 개가 가리키는 객체가 같다면?! true가 반환된다.

이중 등호

두 개의 값을 비교할 때 타입 변환이 일어난다.
NaN, -0, +0을 특별히 처리한다.
IsLooselyEqual(x, y);
삼중 등호

NaN, -0, +0 처리를 비롯해 이중 등호와 동일한 비교를 수행하지만 타입 변환을 하지 않는다.
형식이 다른 경우 false가 반환된다.
IsStrictlyEqual(x, y);
Object.is

NaN, -0, +0 처리를 하지 않는다.
그 외에는 ===와 동일하게 동작한다.
SameValue(value1, value2);

자바스크립트 엔진이 숫자 타입이 아닌 값을 숫자로 암묵적 타입 변환할 때 다음과 같이 동작한다.

// 문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN

// 불리언 타입
+true // 1
+false // 0

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 심벌 타입
+Symbol() // TypeError: Cannot convert a Symbol value to a number

// 객체 타입
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // NaN

주의할 점!
객체, 빈 배열이 아닌 배열, undefined는 숫자로 변환되지 않고 NaN이 된다.
빈 문자열, 빈 배열, null, false는 0으로, true는 1로 변환된다.

boolean 타입으로 변환

제어문 또는 삼항 조건 연산자의 조건식은 boolean 값, 논리적 참/거짓으로 평가되어야 하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 boolean 타입으로 변환한다.

✨복습✨ Tuthy와 Falsy

truthy와 falsy는 boolean을 기대하는 문맥에서 평가되는 값이다.

falsy
undefined
null
false
+0, -0, NaN
""

truthy
{}
[]
그 외 모든 것

명시적 타입 변환

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

표준 빌트인 생성자 함수를 new 연산자 없이 호출
빌트인 메서드 사용
암묵적 타입 변환 이용

표준 빌트인 생성자 함수: 객체를 생성하기 위한 함수
표준 빌트인 메서드: 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드

문자열 타입으로 변환

String 생성자 함수를 new 연산자 없이 호출
Object.prototype.toString 메서드 사용
문자열 연결 연산자 이용

// 1. String 생성자 함수
String()
// 2. Object.prototype.toString
().toString()
// 3. 문자열 연결 연산자
+ ''

숫자 타입으로 변환

Number 생성자 함수를 new 연산자 없이 호출하는 방법
parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
'+' 단항 산술 연산자를 이용하는 방법
'*' 산술 연산자를 이용하는 방법

parseInt vs unary plus, when to use which?

💡 이거 왜 이럴까?

boolean 타입으로 변환

Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true
// 숫자 타입 => 불리언 타입
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true
// null 타입 => 불리언 타입
Boolean(null); // false
// undefined 타입 => 불리언 타입
Boolean(undefined); // false
// 객체 타입 => 불리언 타입
Boolean({}); // true
Boolean([]); // true

// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x'; // true
!!''; // false
!!'false'; // true
// 숫자 타입 => 불리언 타입
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true
// null 타입 => 불리언 타입
!!null; // false
// undefined 타입 => 불리언 타입
!!undefined; // false
// 객체 타입 => 불리언 타입
!!{}; // true
!![]; // true

💡 생성자 함수를 new 연산자로 호출했을 때와 new 연산자 없이 호출했을 때

new 키워드로 생성자 함수를 호출하면 새로운 객체가 만들어진다. Number 생성자 함수를 new 키워드로 호출하면 새로운 Number 객체가 생성되는 것이다. 반면, 그냥 Number로 호출하면 인자로 넘긴 값이 숫자 타입으로 변환돼서 반환되는 것 같다,,,

단축 평가

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

논리 연산자인 논리합 || 과 논리곱 || 연산자를 사용해서 단축 평가를 진행할 수 있다. 논리합, 논리곱 연산자 표현식의 평가 결과는 boolean 값이 아닐 수도 있다. 논리합과 논리곱 연산자 표현식은 항상 2개의 피연산자 중 어느 한 쪽으로 평가된다.

논리합 연산자와 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 평가가 진행되는 도중 평가 결과가 확정되는 시점에서 평가가 종료되고 나머지 평가 과정은 생략될 수 있으며 이를 단축 평가라고 한다.

💡 연산자의 결합 순서

논리곱 연산자와 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

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

// 논리합 || 연산자
'Yeim' || 'Dory' // Yeim
false || 'Dory' // Dory
'Yeim' || false // Yeim

// 논리곱 연산자
'Yeim' && 'Dory' // Dory
false && 'Dory' // false
'Yeim' && false // false

논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.

'Yeim' && 'Dory' // Dory

첫 번째 피연산자 'Yeim'은 Truthy 값이므로 true로 평가된다. 하지만 좌항만 평가된 시점에서는 표현식을 평가할 수 없다. 우항까지 평가해야 표현식을 평가할 수 있다.

첫 번째 피연산자가 true인 경우 두 번째 연산자가 논리곱 연산자 표현식의 평가 결과를 결정한다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자 'Dory'를 그대로 반환한다.

논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.

'Yeim' || 'Dory' // Yeim

첫 번째 피연산자 'Yeim'이 Truthy 값이므로 true로 평가된다. 이 시점에서 표현식의 평가 결과가 결정됐으므로 나머지 평가 과정을 생략하고, 논리 연산의 결과를 결정한 첫 번째 피연산자인 'Yeim'을 그대로 반환한다.

단축 평가를 사용하면 if 문을 대체할 수 있다. 논리곱 연산자 표현식으로 조건이 Truthy 값일 때 해야하는 처리를, 논리합 연산자 표현식으로 조건이 Falsy 값일 때 해야하는 처리를 대체할 수 있다.

let done = true;
let message = '';

// if 문
if (done) message = '완료';

// 단축 평가로 대체
// done이 true이면 message에 '완료' 할당
message = done && '완료';
console.log(message) // '완료'

let done = false;
let message = '';

// if 문
if (!done) message = '미완료';

// 단축 평가로 대체
// done이 false이면 message에 '미완료' 할당
message = done || '미완료';
console.log(message) // '미완료'

단축 평가는 다음과 같은 상황에서 유용하게 사용된다.

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
함수 매개변수를 기본값으로 설정할 때

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

객체는 key와 value로 구성된 프로퍼티의 집합이다. 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null이나 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생한다. 에러가 발생하면 프로그램이 강제 종료된다.

let elem = null;
let value = elem.value; // TypeError: Cannot read property 'value' of null

이때 단축 평가를 사용해서 에러를 방지할 수 있다.

let elem = null;
// elem이 null이나 undefined 같은 Falsy 값이면 elem으로 평가되고 종료된다.
// elem이 Truthy 값이면 elem.value로 평가된다.
let value = elem && elem.value; // null

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

함수를 호출할 때 인수를 전달하지 않으면 매개변수에 undefined가 할당된다. 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

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

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 2

옵셔널 체이닝 연산자

ES11(ECMA2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
프로퍼티 참조: 변수를 통해 변수값을 참조하는 것처럼 객체의 프로퍼티에 접근해 프로퍼티 값을 참조하는 것
옵셔널 체이닝 연산자가 도입되기 전에는 논리곱 연산자를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다. 논리곱 연산자는 좌항 피연산자가 Falsy 값이면 좌항 피연산자를 그대로 반환한다.

let str = '';

let length = str && str.length;

console.log(length); str

위의 예제에서 str은 ''으로 Falsy 값이기 때문에 그대로 반환됐다. 하지만 만약 ''이나 0이 유효한 객체로 평가되어야한다면?
옵셔널 체이닝 연산자는 좌항 피연산자가 Falsy 값이라도 null, undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

let str = '';

let length = str?.length;

console.log(length); 0

위 코드에서 str이 ''이지만 논리곱 연산자처럼 그대로 반환되는 것이 아니라 참조를 이어가기 때문에 ''의 length인 0이 반환됐다.

💡 원시 값과 래퍼 객체

null 병합 연산자

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

??가 도입되기 전에는 논리합 연산자를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 논리합 연산자를 사용한 단축 평가의 경우 좌항의 피연산자가 Falsy 값이면 우항의 피연산자를 반환한다. 하지만 만약 Falsy 값인 0나 ''도 유효한 값으로 처리해야한다면?

null 병합 연산자는 좌항의 피연산자가 Falsy 값이라도 null, undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

// 논리합 연산자
let yeim = '' || 'student';
console.log(yeim); // 'student'

// null 병합 연산자
let yeim = '' ?? 'student';
console.log(yeim); // ''

let yeim = null ?? 'student';
console.log(yeim); // 'student'

ECMAScript® 2022 Language Specification

Author And Source

이 문제에 관하여([딥다이브] 9장 | 타입 변환과 단축 평가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyaeim/9장-타입-변환

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[딥다이브] 9장 | 타입 변환과 단축 평가

타입 변환

암묵적 타입 변환

문자열 타입으로 변환

숫자 타입으로 변환

boolean 타입으로 변환

✨복습✨ Tuthy와 Falsy

명시적 타입 변환

문자열 타입으로 변환

숫자 타입으로 변환

boolean 타입으로 변환

단축 평가

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

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

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

옵셔널 체이닝 연산자

null 병합 연산자

Author And Source

좋은 웹페이지 즐겨찾기