JavaScript 더하기 빼기 연산 차이 "10" + 1, "10" - 1 차이점

JavaScript "10" + 1 = "101" , "10" - 1 = 9 인 이유. 사양을 잘 살펴봐야 합니다.

결과를 오해하기 전에 사양을 잘 살펴보자

JavaScript 더하기 연산자 (+)

12.8.3 The Addition Operator (+)를 살펴보도록 합시다.

▶ NOTE The addition operator either performs string concatenation or numeric addition.

12.8.3.1 Runtime Semantics : Evaluation

AdditiveExpression : AdditiveExpression + MultiplicativeExpression

더하기 연산자는 문자의 연결과 숫자의 덧셈을 한다는 것을 알 수 있습니다.

다음으로 JavaScript에서 처리의 흐름을 살펴 보도록 해요.

1. Let lref be the result of evaluating AdditiveExpression.
2. Let lval be? GetValue (lref).
3. Let rref be the result of evaluating MultiplicativeExpression.
4. Let rval be? GetValue (rref).
5. Let lprim be? ToPrimitive (lval).
6. Let rprim be? ToPrimitive (rval).
7. If Type (lprim) is String or Type (rprim) is String, then
1. a. Let lstr be? ToString (lprim)
2. b. Let rstr be? ToString (rprim).
3. c. Return the string-concatenation of lstr and rstr.
8. Let lnum be? ToNumeric (lprim).
9. Let rnum be? ToNumeric (rprim).
10. If Type (lnum) is different from Type (rnum) throw a TypeError exception.
11. Let T be Type (lnum).
12. Return T :: add (lnum, rnum)

흐름을 확인하면 7에서 형식 검사를 한다는 걸 알 수 있습니다.

확인할 값이 String인 경우 ToString() 호출하는 사양을 볼 수 있네요.

그렇지 않은 경우엔 ToNumeric()입니다.

확인 후 깨달은 점

JavaScript 더하기 연산자(+)는 문자의 연결, 숫자를 더하는 기능을 담당합니다.

값의 형식을 검사하여 문자열이나 숫자로 변환하고 있습니다.

JavaScript 빼기 연산자 (-)

12.8.4 The Subtraction Operator (-) 를 살펴 보도록 합시다.

▶ 12.8.4.1 Runtime Semantics : Evaluation

AdditiveExpression : AdditiveExpression-MultiplicativeExpression

1. Let lref be the result of evaluating AdditiveExpression.
2. Let lval be? GetValue (lref).
3. Let rref be the result of evaluating MultiplicativeExpression.
4. Let rval be? GetValue (rref).
5. Let lnum be? ToNumeric (lval).
6. Let rnum be? ToNumeric (rval).
7. If Type (lnum) is different from Type (rnum) throw a TypeError exception.
8. Let T be Type (lnum).
9. Return T : subtract (lnum, rnum).

보시면 이해가 됩니다. 타입 검사가 없네요.

뺄셈 연산자엔 문자열 연결 기능은 없어서 자료형(데이터 타입)을 변환할 필요가 없다는 뜻입니다.

값을 숫자로 변환하여 그대로 처리한다는 것을 알 수 있습니다.

확인 후 깨달은 점

JavaScript 빼기 연산자 (-)는 숫자의 뺄셈을 담당하는 기능입니다.

평가 값을(형식 검사없이) 숫자로 변환합니다.

정리

더하기 연산자(+)는 형식 검사 결과, 문자의 연결로 처리하기 때문에 "10"+ 1은 "101" 입니다.

빼기 연산자 (-)는 숫자의 뺄셈만 하기 때문에 "10"- 1은 9 가 됩니다.

이제 왜 "10" + 1 은 "101" 이고 "10" - 1 은 9 가 되는지 확신을 갖고 말할 수 있게 되었습니다!

앞으로는 이런 JavaScript 코드에 대한 질문도 정확하게 대답할 수 있겠네요!

"10" + 1       // => '101'

"10" - 1       // => 9

"10" + 1 - 1   // => 100

"10" + (1 - 1) // => "100"

"1" - 1 + "1"  // => "01"

1 - "1" + 1    // => 1