더하기 (+)

더하기 연산자(+)는 숫자 피연산자의 합을 구하거나, 문자열을 서로 연결합니다.

시도해보기

구문

js
x + y

설명

+ 연산자는 숫자 덧셈과 문자열 연결 두 가지 작업을 수행합니다. 계산 시에 먼저 두 개의 피연산자를 원시 타입으로 변환합니다. 그 후에, 두 피연산자의 타입을 확인합니다.

  • 만약 한쪽의 피연산자가 문자열인 경우, 나머지 한쪽의 피연산자도 문자열로 변환시킨 뒤 연결합니다.
  • 만약 두 피연산자가 모두 BigInt인 경우, BigInt 덧셈을 수행합니다. 만약 한쪽의 피연산자가 BigInt이지만 나머지 한쪽의 피연산자가 BigInt가 아닌 경우, TypeError가 발생합니다.
  • 그 외의 경우, 두 피연산자를 모두 숫자로 변환시키고, 숫자 덧셈이 수행됩니다.

종종 템플릿 리터럴이나 String.prototype.concat()이 문자열 연결과 동일하다고 생각하지만, 그렇지 ��습니다. 더하기 연산자는 먼저 valueOf()를 호출하여 표현식을 원시 타입으로 변환합니다. 반면에, 템플릿 리터럴과 concat()은 먼저 toString()을 호출합니다. 만약 표현식에 @@toPrimitive 메서드가 있는 경우, 문자열 연결은 "default"를 힌트로 사용하고, 템플릿 리터럴은 "string"을 사용합니다. 이 차이는 문자열과 원시 표현이 다른 객체에 중요합니다. 예를 들어 valueOf() 메서드가 에러를 내는 Temporal 같은 객체가 있습니다.

js
const t = Temporal.Now.instant();
"" + t; // Throws TypeError
`${t}`; // '2022-07-31T04:48:56.113918308Z'
"".concat(t); // '2022-07-31T04:48:56.113918308Z'

문자열 변환을 위해 "" + x를 사용하는 것은 좋지 않습니다.

예제

Number 덧셈

js
// Number + Number -> 덧셈
1 + 2; // 3

// Boolean + Number -> 덧셈
true + 1; // 2

// Boolean + Boolean -> 덧셈
false + false; // 0

BigInt 덧셈

js
// BigInt + BigInt -> 덧셈
1n + 2n; // 3n

// BigInt + Number -> TypeError 발생
1n + 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions

// BigInt와  non-BigInt를 더하기 위해선, 피연산자 중 하나를 변환하십시오.
1n + BigInt(2); // 3n
Number(1n) + 2; // 3

문자열 연결

js
// String + String -> 연결
"foo" + "bar"; // "foobar"

// Number + String -> 연결
5 + "foo"; // "5foo"

// String + Boolean -> 연결
"foo" + false; // "foofalse"

명세

Specification
ECMAScript Language Specification
# sec-addition-operator-plus

브라우저 호환성

BCD tables only load in the browser

같이 보기