LearningJS-CH05~5.7

ch05 표현식과 연산자

표현식은 값으로 평가될 수 있는 문이다. 표현식, 즉 결과가 값인 문과, 표현식이 아닌 문의 차이를 이해하는 것이 매우 중요하다. 이 차이를 이해해야만 자바스크립트의 요소들을 효과적으로 조합할 수 있다.

표현식은 어떠한 결과를 반환하라고 명시적으로 말한다. 이것이 그냥 문과 다른 점이다.

표현식은 값이 된다. 그 결과를 다른 표현식에 결합해서 다른 값을 얻을 수도 있다. 그 값을 또 다른 표현식에 결합해서 또 다른 값을 얻는 식으로 이어질 수 있다. 표현식이 아닌 문은 이런 식으로 결합할 수 없다.

표현식은 또한 값이 되기에 할당해서 쓸 수 있다. 표현식의 결과를 변수, 상수, 프로퍼티에 할당할 수 있다. 예를 들어보자.

let x;
x = 3 * 5;

첫번째 행은 선언문입니다. 두번째 행은 표현식이다. 그것도 표현식 2개로 이루어진. 우선 첫번째 표현식은 3 * 5이다. 그 다음은 이 계산 결과를 x에 할당한 표현식이다. 할당은 그 자체로 표현식이다. 다음 예시를 보자.

let x, y;
y = x = 3 * 5;

이제 x와 y 두 변수가 있고, 값은 모두 15입니다. 이런 일이 가능한 것은 곱셈과 할당이 모두 표현식이기 때문입니다. 자바스크립트는 이렇게 위와 같이 표현식이 결합된 것을 보면 쪼갤 수 있는 만큼 쪼개서 한 부분씩 실행합니다.

let x, y;
y = x = 3 * 5; // 원래 문
y = x = 15; // 곱셈 표현식을 평가함.
y = 15; // 첫번째 할당을 평가한다. x는 이제 15이고, y는 아직 undefined 이다.
15; // 두 번째 할당을 평가한다. y는 이제 15이다.
	// 전체 문의 결과는 15이다. 이 값은 사용하지도 않았고, 어디에도 할당되지 않았기에 이제 그냥 버려진다.

표현식은 대부분 연산자(operator)표현식이다. 즉 곱셈 표현식은 곱셈 연산자(*)와 피연산자 두개로 이루어진다.

연산자 표현식이 아닌 표현식에는 식별자 표현식과 리터럴 표현식 두가지가 있다. 변수와 상수, 리터럴은 그 자체가 표현식이다.

5-1. 연산자

연산자를 표현식의 명사에 대한 동사라고 생각하는 게 오히려 편하다. 표현식이 값이 되는 것이라면, 연산자는 값을 만드는 행동이라는 의미이다.

5-2. 산술 연산자

다음은 자바스크립트의 산술 연산자이다.

연산자	설명	예시
+	더하기(문자열 병합에도 사용)
-	빼기
/	나눗셈
*	곱셈
%	나머지
-	단항 부정	-x // x의 부호를 바꾼다. x가 5이면 -x는 -5!
+	단항 플러스	+x // x가 숫자가 아니면 숫자로의 변환을 시도한다.
++	전위, 후위 증가	++x, x++ // x에 1을 더한 다음 평가한다. x를 평가한 다음 1을 더한다.
--	전,후위 감소	--x, x-- // 위와 동일

참고로 자바스크립트의 숫자형은 모두 double형식이므로 3/2처럼 정수를 연산한 결과도 더블 형식이다.

뺄셈과 단항 부정은 모두 -기호를 사용한다. 이때 주의해야할 것은 단항 부정이 먼저 이루어지고, 그 다음에 뺄셈을 한다는 순서이다.

const x = 5;
const y = 3 - -x; // y = 8

같은 규칙이 단항플러스에도 적용된다. 단항 플러스 연산자를 사용한다면 문자열을 숫자로 강제 변환하는 경우이며, 드물게는 세로줄을 맞추고 싶을 때 사용한다.

const s = "5";
const y =  3 + +s // y = 8
				// 만약 단항플러스를 하지않으면 "35"가 된다.

// 여기서는 굳이 단항 플러스가 필요하지 않지만, 줄을 잘 맞출 수 있다.
const x1 = 0, x2 = 3, x3 = -1.5, x4 = -6.33;
const p1 = -x1*1;
const p2 = +x2*2;
const p3 = +x3*3;
const p4 = -x4*4;

나머지% 연산자는 나눗셈을 한 나머지를 반환한다. 자바스크립트에서는 피연산자에 소수점이 있어도 작동을 잘한다. 예를 들어 10 % 3.6 = 2.8이다.

증가 감소 연산자는 이미 Java에서 너무 많이 해봤기때문에 넘어가겠습니다.

5.3 연산자 우선순위

자바스크립트에서 표현식을 평가하는 순서도 우리가 기존에 초등학교에서 배웠던 순이랑 같다고 생각하면 된다.

물론 좀 더 기억해야할 것이 늘어나지만, 산수와 마찬가지로 괄호가 최우선이다.

let x = 3, y;
x += y = 6*5/2;
// 이 표현식을 우선순위에 따라 다음에 일어날 행동에 괄호를 친다.
//
// 곱셈과 나눗셈, 우선순위 14, 왼쪽에서 오른쪽으로
// x += y = (6*5)/2
// x += y = (30/2)
// x += y = 15
// 할당, 우선순위 3, 오른쪽에서 왼쪽으로
// x += (y = 15)
// x += 15    y는 15
// 18		 x는 이제 18

5.4 비교 연산자

비교 연산자는 이름처럼 두 개의 값을 비교한다. 크게 말해서 비교 연산자는 3가지로 나뉜다. 일치 strict equality(===), 동등 loose equality(==), 대소관계.

두 값이 일치하는지 확인할 때는 === 또는 !==연산자를 쓴다.

두 값이 같은 객체를 가리키거나 같은 값을 갖도록 변환할 수 있다면 두 값을 ‘동등’하다고 한다.

뭔소리야. 그래서 다시 찾아봤다.

일치 연산자 === 는 타입 변환이 안되는 것을 제외하고 동등 연산자 == 와 동일하게 동작하며, 일치하는 것으로 간주되려면 타입이 항상 같아야 합니다.

동등 연산자 == 는 모든 필수적인 타입 변환을 한 후에 동등함을 비교할 것입니다. 일치 연산자 === 는 타입 변환을 하지 않기 때문에, 두 값이 같은 타입이 아니면 === 는 단순히 false를 반환합니다. 둘 다 속도는 같습니다.

다음 예시를 통해 이해도를 높이자.

const n = 5;
const s = "5";

console.log(n===s)
console.log(n!==s)
console.log(n==s)
console.log(n!=s)

// false
// true
// true
// false

5.5 숫자비교

숫자를 비교할 때는 염두에 두어야할 것이 있다.

우선 NaN은 그 자신을 포함해서 무엇과도 같지않다. 즉, .NaN === NaN과 NaN == NaN은 모두 False 이다.

숫자가 NaN인것을 알아보기 위해서는 isNaN함수를 사용하면 된다.

자바스크립트에서 정수를 비교할 때, 그 정수가 안전한 범위에 있다면(Number.MIN_SAFE_INTEGER이상, Number.MAX_SAFE_INTEGER이하) 안심하고 사용할 수 있다.

5.6 문자열 병합

자바스크립트에서 + 연산자는 숫자의 덧셈뿐아니라 문자열의 병합에도 사용된다.

자바스크립트는 피연산자의 타입을 보고 덧셈인지 문자열의 병합인지를 판단한다. 이는 모두 왼쪽에서 오른쪽으로 판단하는데, 두 피연산자를 왼쪽에서 오른쪽으로 판단한 뒤에 피연산자 중 하나라도 문자열이면 문자열 병합을 수행한다. 두 값이 모두 숫자면 바로 덧셈한다.

3 + 5 + "8" // 문자열 "88"이 된다.
// 자바스크립트는 3 + 5는 덧셈으로, 그 다음 8 + "8"은 문자열 병합으로 판단하여 계산한다.
"3" + 5 + 8 // 문자열 "358"이 된다. 이건 그냥 계속 문자열병합으로 판단.