🐸 [JavaScript] 타입 변환 & 단축 평가

앞서 암시적 타입 변환에 대한 언급이 많이 있었다.

이번 글에서는 타입 변환, 그리고 단축 평가란 무엇인 지에 대해 정리해 보았다.

---

타입 변환?

값을 사용하다 보면, 타입을 변환해야 하는 경우가 있다.

문자열과 숫자의 덧셈이 이루어져야 하거나, boolean 타입이 아닌 값을 논리 값으로 평가해야 하는 경우가 이에 해당한다.

이럴 경우, 명시적 또는 암묵적 타입 변환을 수행하게 된다.

타입 변환이라는 것이, 기존 값을 실제로 변경하는 것을 의미하지는 않음을 기억하자.

그저 다른 타입의 새로운 값을 생성할 뿐이다.

명시적 타입 변환 explicit coercion 은, 개발자가 의도적으로 값의 타입을 변환하는 것을 말한다.

암묵적 타입 변환 implicit coercion 은, 개발자의 의도와는 상관 없이 수행되는 타입 변환을 말한다.

묵시적 타입 변환을 수행하는 JavaScript 엔진은, 타입 변환으로 만들어 낸 새로운 값을 연산에 한 번 사용한 뒤, 값을 버린다.

이런 암묵적 타입 변환 과정은, 코드에서 확인할 수가 없다.

동료가 코드를 보고 타입 변환을 예측할 수 있도록, 타입 변환을 정확히 이해한 후에 사용하는 것이 중요하다.

이제 방법에 대해 자세히 살펴보자!

---

명시적 타입 변환

String 타입으로

어떤 값을 String 타입으로 변환시키는 방법에 대해 알아보자

• String( 값 );
  String 생성자 함수를 new 연산자 없이 호출하는 방법

• ( 값 ).toString();
  Object.prototype.toString 메서드를 사용하는 방법

• 값 + '';
  문자열 연결 연산자 + 를 사용하는 방법

---

Number 타입으로

어떤 값을 Number 타입으로 변환시키는 방법에 대해 알아보자

• Number( 값 );
  Number 생성자 함수를 new 연산자 없이 호출하는 방법

• parseInt( 문자열 ); or parseFloat( 문자열 );
  parseInt, parseFloat 함수를 사용하는 방법 (문자열만 변환이 가능하다.)

• + 값;
  단항 산술 연산자 + 를 사용하는 방법

• 값 * 1;
  산술 연산자 * 를 사용하는 방법

• 빈 문자열 '', 빈 배열 [], null, false는 0으로 변환됨
• 객체, 빈 배열이 아닌 배열, undefined는 변환되지 않고 NaN이 됨

---

boolean 타입으로

어떤 값을 boolean 타입으로 변환시키는 방법에 대해 알아보자

• Boolean( 값 );
  Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

• !!값;
  부정 논리 연산자를 두 번 사용하는 방법
  

JavaScript 엔진은, boolean 타입이 아닌 값을 Truthy 값과 Falsy 값으로 구분하며,
Truthy는 true, Falsy는 false로 암묵적 타입 변환된다.

• false, undefined, null, 0, -0, NaN, ''는 Falsy 값.
• 그 외의 값은 모두 Truthy 값.

---

암묵적 타입 변환

String 타입으로

JavaScript 엔진은, ( 값 ) + ''; 방법을 사용해 값을 String 타입으로 변환한다.

---

Number 타입으로

JavaScript 엔진은, + 값; 방법을 사용해 값을 Number 타입으로 변환한다.

---

단축 평가?

단축 평가란, 표현식 평가 도중 결과가 확정이 난 경우, 나머지 평가 과정을 생략하는 평가 방식을 말하는 것이다.

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

논리 연산의 피연산자 중, 결과를 결정하는 피연산자가 생기게 된다.

이를 타입 변환 하지 않은 피연산자 그대로를 반환한다는 특징이 있다.

'Cat' && 'Dog' 라는 표현식이 있다.

'Cat'는 Truthy 값이고, true로 평가된다.

따라서 해당 표현식은 'Dog'에 의해 결과가 결정될 것이다.

이때, true를 반환하는 것이 아닌 'Dog'를 반환하는 것이 바로 단축 평가이다.

---

optional chaining 연산자 ?!

ES11에서 도입되었다.

좌항의 피연산자가 null/undefined이면 undefined를 반환하고,
그렇지 않다면 우항의 프로퍼티 참조를 이어 나가게 하는 연산자이다.

let elem = null;

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

---

null 병합 연산자 ??

ES11에서 도입되었다.

좌항의 피연산자가 null/undefined이면 우항의 피연산자를,
아니라면 좌항의 피연산자를 반환하는 연산자이다.

변수의 기본값 설정에 유용하다.

let foo = null ??? 'default string';
console.log(foo)

// "default string"

---

내가 기대한 게 뭔지 모르겠지만, 기대했던 내용과는 다르게,,, 그냥 간단한 방법만 왕창 다루는 것 같아 조금 아쉬웠다.

다음 장은 객체 리터럴이다.

객체가 JavaScript에서 굉장히 중요한 개념이라고 하던데, 잘 이해하고 정리해보고 싶다!