(JS basic) 1. + 연산자의 규칙은?

한정(Han Jung)
Jung-han
Published in
3 min readApr 9, 2019

알아두면 좋을 기초적인 내용들을 짧게 짧게 시리즈 처럼 적어보려고 한다. (블로그를 지속적으로 하는 습관이 필요한 것 같아서..)
1탄은 ‘+’ 연산자의 규칙이다. 별로 어렵지 않은 내용이니 바로 들어가보자.

규칙

피연산자1 + 피연산자2 = 결과
  1. 피연산자가 Object 타입이라면, primitive value로 변환한다.
  2. 변환을 하고 보니, 두 피연산자 중 하나라도 string 타입이라면 다른 피연산자도 string 타입으로 변환 후 concat을 한다.
  3. 변환을 하고 보니, 두 피연산자 모두 number타입이라면 더한다.

적고 나니까 더 단순하다.

Object to primitive value

이 또한 단순하다. 객체내에 존재하는 메소드를 그대로 사용하는데

  • Date 객체인 경우 toString()(valueOf(), toString() 두 메서드 모두 존재한다.)
  • 아닌 경우 valueOf(), 존재하지 않는 경우 toString() 의 반환값을 사용

조금 특이한 경우가 있는데

  • Array의 경우 join(‘,’) 메소드를 사용한다.
  • Object의 경우 [object Object] 가 반환된다.

그럼, 문제를 풀어보자!

console.log([1, 2, 3] + 10); // (1)
console.log(10 + true); // (2)
console.log(10 + {a: 10, b: 20}); // (3)
console.log(null + "hanjung"); //(4)

사실 위 규칙만 적용하면 어려운 문제들은 아니다.

  1. (1)에서 Array는 Object이기 때문에 primitive value로 변환한다. 이때 join을 통해 string 타입으로 변환이 되어 “1,2,310” 이 된다.
  2. (2) true는 number로 변환되면 1이므로 11이 된다.
  3. (3)의 객체는 primitive value로 변환시 “[object Object]” string 타입으로 변환 되어 “10[object Object]”가 된다.
  4. (4)의 경우 null 또한 string으로 변환이 이뤄져 “nullhanjung” 이 된다.

마무리

자바스크립트의 + 연산 동작 규칙을 간단하게 알아봤다. 아마 대부분 알고 있고 어려운 내용도 아니지만 자바스크립트를 무작정 사용하다 갑자기 어리둥절한 결과를 만난 사람들에게 도움이 되었으면 좋겠다.

같이보면 좋을 글

--

--