[JavaScript 33가지 개념] 04. 암시적 강제(Implicit Coercion)

1. Implicit Coercion (암시적 강제)

Javascript의 암시적 강제는 예상치 못한 값 유형을 예상 유형으로 강제하여 처리되는 것을 말한다.

예시를 보며 이해해 보자.

 

console.log(3 * '3'); 	// 9
console.log(1 + '2' + 1); // 121

console.log(true + true); // 2
console.log(10 - true); // 9

const foo = {
  valueOf: () => 2,
};
console.log(3 + foo); 	// 5
console.log(4 * foo); 	// 8

const bar = {
  toString: () => ' promise is a boy :)',
};
console.log(1 + bar); // "1 promise is a boy :)"

console.log(4 * []); // 0
console.log(4 * [2]); // 8
console.log(4 + [2]); // "42"
console.log(4 + [1, 2]); // "41,2"
console.log(4 * [1, 2]); // NaN

console.log('string' ? 4 : 1); // 4
console.log(undefined ? 4 : 1); // 1

 

예시를 보면 알겠지만 상황에 따라 number, string으로 알아서 지정되어 사용된다.

 

javascript의 특성을 잘 활용하면 좀 더 편하게 코드를 만들 수 있지만 명시적이지 않아 좋아 보이지 않는다.

원하는 대로 쓰려면 Number 또는 toString을 활용하여 다른 사람이 보더라도 알아보기 좋게 코드를 만드는 것이 좋아 보인다.

console.log(1 + Number(2) + 1); 	// 4
console.log(1 + (2).toString() + 1);	// 121

 

2. Template literals

 

특히 + 의 경우 덧셈과 문자열 연결 두 가지로 사용할 수 있기 때문에 좀 더 명시적인 코드를 사용하기 위해 문자열의 경우 Template literals(``)를 사용하는 것이 좋다.

console.log(1 + '2' + 1);	// 121
console.log(`${1}2${1}`);	// 121

console.log(1 + 1);	// 2
console.log(`11`);	// 11

 

3. Truthy, Falsy (참, 거짓)

if 문에서 값에 따라 true, false로 처리되는 경우는 아래와 같다.

 

여기서도 값에 따라 특정 boolean 값으로 강제 처리된다.

if 문을 사용할 때 위와 같은 특성을 유의해서 코드를 만들어야 한다.

if (true)	// true
if (false)	// false
if (1)		// true
if (-1)		// true
if (2)		// true
if (0)		// false
if (-0)		// false
if (undefined)	// false
if (null)	// false
if ("")		// false
if (NaN)	// false

 

Javascript의 암시적 강제에 대해 알아봤다.

자바스크립트는 변수형을 다른 언어에 비해 자유롭게 사용할 수 있기 때문에 이런 특성을 잘 이해하고 코드를 만들어야 에러가 발생할 수 있는 부분을 예방할 수 있다.

 

 

참고 자료

- https://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion-e23

What you need to know about Javascript's Implicit Coercion

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN