[Javascript] ⑤ 구문과 연산자

 

▶구문과 연산자

프로그래밍 언어에서 구문(Synrax)은 애플리케이션 또는 프로그램을 만들기 위해 언어가 작동하는 규칙을 정의하며, 정형화된 문법에 따라 작성해야 합니다.

즉 올바른 구문을 작성하려면 언어의 문법과 구성 요소에 대해 명확하게 이해해야 합니다.

이 글에서는 자바스크립트 구문의 중요한 구성 요소인 표현식(Expression)과 문(Statement) 그리고 연산자(Operator)에 대해 살펴보겠습니다.

 

1) 표현식(Expression)

자바스크립트에서 표현식과 문의 차이를 이해하는 것은 매우 중요합니다.

이 둘의 차이를 정확하게 이해하고 조합해야 자바스크립트 구문을 올바르게 작성할 수 있습니다.

먼저 표현식부터 알아보겠습니다.

표현식은 값으로 평가되는 구문입니다. 예를 들어 임의의 숫자나 문자열은 모두 표현식입니다.

값을 반환한다는 표현을 자바스크립트에서는 보통 값을 평가한다고 표현합니다.

// 아래 문자열은 결과값으로 'javascript'를 반환하는 표현식입니다.
'javascript'

또한 변수에 값을 할당하는 것도 표현식입니다.

var a;
a = 1;

마지막 줄을 보면 변수 a에 숫자 1을 할당했습니다.

이러한 구문을 할당 표현식이라고 하며, 할당된 값이 결과값으로 평가됩니다.

위 코드에서는 할당된 값이 1이기 때문에 할당 표현식은 1이라는 값으로 평가됩니다.

 

표현식의 결과는 항상 값이 되므로 이 결과를 다른 표현식과 결합해 다른 결과값을 얻을 수 있습니다.

이렇게 여러 표현식을 결합하는 것을 복합 표현식이라고 합니다.

복합 표현식을 작성하는 가장 간단한 방법은 연산자를 사용하즌 것입니다.

var x = 1;
var y = 2;

x + y;

표현식 x와 표현식 y를 덧셈 연산자로 결합해 새로운 값으로 평가합니다.

즉 x와 y 값의 덧셈 연산 결과가 복합 표현식의 결과값입니다.

또한 x+y 복합 표현식을 할당 표현식과 결합해 사용(z=x+y)하기도 합니다.

표현식이 값으로 평가되기 때문에 이러한 동작이 가능한 것입니다.

 

2) 문(Statement)

자바스크립트의 문은 일종의 지시를 내리는 것입니다.

예를 들어 A라는 값과 B라는 값을 더해라 처럼 지시를 내리는 것을 자바스크립트에서는 문이라고 합니다.

표현식이 값으로 평가되는 결과는 가져온다면, 문은 표현식 또는 다른 문을 조합해 동작을 수행하는 지시를 내립니다.

문 또한 완료 값이라는 결과값이 있지만, 표현식처럼 다른 변수나 객체의 프로퍼티에 할당할 수 없습니다.

let a;
// 아래의 조건문은 결과값으로 '1'을 가지지만 변수에 할당할 수 없습니다.
const b = if (true) {a = '1'} // Uncaught SyntaxError: Unexpected token 'if'

문을 만드는 간단한 방법은 부수 효과(Side-Effect)가 있는 표현식을 실행하는 것입니다.

 

[NOTE] 부수효과란?

원래의 목적과 다르게 다른 효과 또는 부작용이 나는 상태를 지칭합니다.

 

부수 효과가 있는 표현식은 독립적인 문으로서 사용할 수 있습니다.

앞서 표현식에서 봤던 할당 표현식인 대표적인 예시입니다.

할당 표현식은 변수에 다른 값을 할당해 변수값을 변화시킵니다.

즉 변수값의 변화라는 부수 효과가 발생합니다.

이렇게 문으로도 사용할 수 있는 표현식을 표현문이라고 합니다.

자바스크립트에는 표현문을 포함해 다음과 같은 문들이 있습니다.

▷표현문

부수 효과가 있는 표현식으로 할당 표현식 또는 함수 호출과 같은 표현식입니다.

function doSomething() {
	//...
}
// 함수 호출도 부수 효과를 발생시키기 때문에 표현문입니다.
doSomething();

 

▷선언문

변수 또는 함수를 정의합니다.

var a = 1;

 

▷조건문

조건부에 해당하는 표현식의 값에 따라 문을 실행하거나 건너뜁니다.

// 표현식의 a의 평가 결과가 true일 때만 조건문 안에 있는 문을 실행합니다.
if (a) {
	console.log('실행 완료');
}

 

▷반복문

조건 표현식의 평가 결과가 true라면 반복문 내의 코드를 실행합니다. 

이 과정을 조건 표현식의 결과가 false가 나오지 않는 한 계속 반복 실행합니다.

// 표현식 a의 평가가 true라면 반복문 안에 있는 문을 실행합니다.
while (a) {
	console.log('반복 수행');
}

 

▷점프문

특정 위치로 건너뛰어 문을 실행합니다. break문, continue문, return문 등이 있습니다.

// return 문을 만나면 doSomething() 함수가 호출된 부분을 건너뛰고 호출부에 값을 전달합니다.
function doSomething() {
	return 'foo';
}
console.log(doSomething()); // 'foo'

 

3) 연산자(Operator)

앞서 표현식과 문에 대해 알아보았습니다.

그럼 표현식의 결과인 값을 활용해 새로운 값을 만들려면 어떻게 해야 할까요?

표현식의 값들을 더하거나 곱하거나 대소 비교를 하고 싶다면 어떻게 해야 할까요?

단순하게 문자열이나 숫자를 표현식으로 정의하는 것만으로는 이러한 작업들을 할 수 없습니다.

표현식과 표현식을 결합해 복합 표현식을 만들려면 '무엇'인가의 도움이 필요합니다.

이때 사용하는 '무엇'이 바로 연산자입니다.

표현식이 값으로 평가된다면 연산자는 값을 만들어 내는 방법입니다.

덧셈을 하고 싶다면 + 산술 연산자를 사용하여 표현식의 값들을 더한 새로운 값을 만들어낼 수 있습니다.

▷산술 연산자

산술 연산자는 말 그대로 숫자 연산에 필요한 연산자를 의미합니다.

자바스크립트에는 다음과 같은 산술 연산자들이 있습니다.

연산자	수행 연산	피연산자 개수	결합 방향	예제	예제 결과
+	덧셈	2	좌 → 우	1 + 2	3
-	뺄셈	2	좌 → 우	2 - 1	1
*	곱셈	2	좌 → 우	1 * 2	2
/	나눗셈	2	좌 → 우	4 / 2	2
%	나머지	2	좌 → 우	5 % 2	1
++	전치, 후치 증가(단항 연산)	1	우 → 좌, 좌 → 우	const a = 1; ++a, a++	2, 1
--	전치, 후치 감소(단항 연산)	1	우 → 좌, 좌 → 우	const a = 1; --a, a--	0, 1
+ 단항	피연산자 값을 숫자로 변환	1	우 → 좌	const a = '1'; +a	1
- 단항	피연산자 값의 부호를 변경	1	우 → 좌	const a = 1; -a	-1

여산자들을 사용한 대부분의 표현식들은 부수 효과가 없습니다.

a+3과 같은 덧셈 연산을 해도  a의 값을 변경하지는 않습니다.

단지 덧셈 연산의 값이 평가되어 반환될 뿐입니다.

하지만 전치, 후치 증감 연산자는 부수 효과를 가진 연산자입니다.

let a = 1;
let b = a++;

console.log(a, b); // 2, 1

let c = ++a;

console.log(a, c); // 3, 3

먼저 후치 증가 연산자를 사용한 표현식 a++부터 살펴보겠습니다.

이 표현식은 두 가지 일을 수행합니다.

a를 평가해 값(여기서는 1)을 반환한 후 a의 값을 1만큼 증가시켜 변경합니다.

간혹 증가된 값을 할당한다고 착각하는데 값이 먼저 평가되기 때문에 증가된 값이 아닌 기본 값이 할당됩니다.

따라서 위 코드의 2번째 줄에서 b에 할당되는 값은 1입니다.

 

전치 증가 연산자는 후치 증가 연산자와 반대로 동작합니다.

값을 먼저 1만큼 증가시킨 후에 평가된 값을 반환합니다.

++a는 기존의 a값(2)을 1만큼 증가시킨 3을 반환하며, 최종적으로 c에 이 값(3)이 할당됩니다.

전치, 후치 감소 연산자는 증가 연산자와 동일한 단계로 동작하되, 1을 증가시키는 것이 아닌 감소시키는 부수 효과를 발생시킵니다.

 

+, - 연산자는 덧셈, 뺄셈 연산자로 사용되기도 하지만, 단항 연산자로서 다른 역할을 하기도 합니다.

let num1 = '1';
let num2 = 2;

// 단항 + 연산자를 사용해 문자 '1'을 숫자 1로 변환합니다.
const a = +num1;

// 단항 - 연산자를 사용해 숫자 2의 부호를 변경합니다.
const a = -num2

단항 + 연산자는 피연산자가 숫자로 변환할 수 없는 문자열일 때 결과값으로 NaN으로 반환합니다.

 

마지막으로 산술 연산자의 결합 방향에 대해 알아보겠습니다.

연산자의 결합 방향에 따라 연산들간의 수행 순서가 결정됩니다.

결합 방향이 좌측에서 우측이라면 연산은 좌측에서 우측으로 일어나며, 반대이면 연산은 우측에서 좌측으로 일어납니다.

예를 들어 덧셈 연산자는 결합 방향이 왼쪽에서 오른쪽이기 때문에 왼쪽부터 연산을 실행합니다.

반면 +, - 단항 연산자와 ++, -- 전치 증감 연산자는 결합 방향이 오른쪽에서 왼쪽이기 때문에 오른쪽부터 연산을 실행합니다.

a = x + y - z;
// 위의 할당문은 아래와 동일합니다.
a = (x + y) - z;

-+a;
// 위의 단항 연산자는 아래처럼 우측부터 평가를 진행합니다.
-(+a);

 

▷논리 연산자

논리 연산자 &&, ||, !는 보통 참과 거짓을 나타내는 불리언 값을 이용해 연산을 수행하며, 이 경우 결과값도 불리언 값입니다.

하지만 자바스크립트에서는 불리언이 아닌 값도 논리 연산자의 피연산자가 될 수 있습니다.

만약 논리 연산자의 피연산자로 불리언이 아닌 값이 온다면, truthy 값과 falsy 값이라는 개념을 사용해 피연산자를 평가합니다.

즉 논리 연산자를 제대로 이해하려면 truthy 값과 falsy 값의 개념을 알아야만 합니다.

• truthy 값과 falsy 값

truthy 값은 참과 같은 값입니다.

이 값들은 불리언 타입은 아니지만, 논리 연산자와 함께 사용하면 참으로 평가됩니다.

이와 반대로 falsy 값은 거짓과 같은 값으로 논리 연산자와 함께 사용하면 거짓으로 평가됩니다.

자바스크립트의 모든 값은 truthy 값과 falsy 값 두 가지로 나뉩니다.

falsy 값들은 다음과 같습니다.

- false	- ''(빈 문자열)	- null	- 0
- undefined	- 0n	- NaN

이들 외에는 모두 truthy 값입니다.

falsy 값만 잘 알면 논리 연산자에서 다른 타입의 값들이 어떻게 변환되고 연산이 평가될지 정확하게 알 수 있습니다.

종종 개발자들이 truthy 값이지만 falsy 값으로 착각하는 몇 가지를 정리했습니다.

빈 배열, 빈 객체	공백 또는 줄 바꿈 문자열	문자열 'false'
배열이나 객체는 항상 참으로 평가됩니다. 만약 빈 배열이 거짓으로 평가되길 원한다면 length 프로퍼티를 사용합니다.	공백과 줄 바꿈을 표현하는 문자열 값이 있으므로, 참으로 평가됩니다.	const a = 'false'를 보면 'false'라는 문자열 값이 있어 참으로 평가됩니다.

• &&, ||, ! 연산자

논리 연산자는 &&, ||, ! 세 가지로 나뉩니다. 각각 어떠한 연산을 담당하는지는 다음 표를 참고해봅시다.

연산자	수행 연산	피연산자 개수	결합 방향	예제
&&	논리 AND	2	좌 → 우	x && y > z
||	논리 OR	2	좌 → 우	x || y > z
!	논리 NOT	1	우 → 좌	!x

AND 연산자(&&)는 피연산자가 모두 참으로 평가될 때 참으로 평가됩니다,

const x = 1;
const y = 2;
const z = 3;

x && y > z // false

피연산자 x는 truthy 값이므로 참으로 평가되지만, 우측 비교 연산의 결과값이 거짓으로 평가되어 결과값으로 false를 반환합니다.

참고로 y>x가 false이고 x가 truthy 값이므로 AND 연산을 하게 되면 false 값을 가지게 되는 것입니다.

 

OR 연산자(||)는 피연산자가 모두 거짓으로 평가될 때만 거짓으로 평가되며, 피연산자 중 하나라도 참으로 평가되는 값이 있다면 참으로 평가됩니다.

const x = 1;
const y = 2;
const z = 3;

x || y > z; // true

x가 truthy 값이기 때문에 결과값으로 true를 반환합니다.

 

NOT 연산자(!)는 단항 연산자로 피연산자의 불리언 값을 반대로 반전시킵니다.

NOT 연산자는 !! 처럼 연속해서 사용하기도 하는데, 이런 연산을 부정을 두 번 한다고 해서 이중 부정 연산자라고 부릅니다.

주로 기존 값을 불리언 타입으로 변환할 때 사용합니다.

const x = ''; // x는 falsy
const y = !!x;

console.log(y); // false

 

• 단락 평가(Short Circit)

AND 연산자와 OR 연산자는 단락 평가라는 특징을 가집니다.

AND 연산의 경우 앞의 평가 결과가 거짓이라면 뒤의 평가 결과와는 상관없이 false를 반환합니다.

이런 경우 뒤의 표현식을 평가할 필요가 없기 때문에 평가하지 않습니다.

OR 연산의 경우 앞의 평가 결과가 참이라면 뒤의 평가 결과와 상관없이  true를 반환합니다.

그리고 마찬가지로 뒤의 표현식은 평가하지 않습니다.

이러한 방식을 단락 평가라고 합니다.

 

자바스크립트 코드를 보면 단락 평가의 특징을 이용한 코드를 흔하게 볼 수 있습니다.

가장 일반적인 예제 중 하나는 조건에 따라 함수를 호출하는 경우입니다.

if (x > y) {
	doSomething();
}
// 아래 코드는 위의 코드와 동일한 동작을 합니다.
x > y && doSomething();

마지막 줄을 보면 좌측 비교 연산의 결과가 참으로 평가될 때만 doSomething() 함수를 호출합니다.

만약 반대로 좌측의 결과가 거짓으로 평가된다면 doSomething() 함수는 실행되지 않습니다.

 

▷관계형 연산자

코드를 작성하다 보면 두 피연산자의 관계를 검증하고 싶을 때가 있습니다.

두 값이 같은지 한 값이 다른 값보다 큰지 검사해 관계가 성립하는지 알아보는 것입니다.

이럴 때 사용하는 연산을 관계형 연산이라고 합니다.

관계형 연산의 결과는 항상 불리언 값이며, 주로 조건문이나 반복문 내의 조건을 정의할 때 사용됩니다.

연산자	수행 연산	피연산자 개수	결합 방향	예제
>, >=, <, <=	숫자의 대수 비교 또는 문자열을 알파벳 순서로 비교	2	좌 → 우	x >= y
==	값의 동등을 판단	2	좌 → 우	x == y
===	값의 일치를 판단	2	좌 → 우	x === y
instanceof	객체의 클래스 확인	2	좌 → 우	car instanceof Vehicle
in	객체의 특정 프로퍼티가 있는지 확인	2	좌 → 우	name in Obj

• 비교 연산자

비교 연산자는 수학에서 익숙하게 접했던 연산자일 것입니다.

두 피연산자 값의 상대적인 순서를 판단하며 숫자(Number 또는 BigInt)와 문자열의 순서만 비교할 수 있습니다.

console.log(1 < 2); // true
console.log('ab' <= 'b') // true

자바스크립트의 문자열을 16비트 유니코드 값의 집합이므로 문자열 비교는 이 코드의 순서를 비교해 연산을 수행합니다.

나라별 언어마다 유니코드의 인코딩 순서가 다르고, 대소 문자를 구분하기 때문에 문자열을 비교할 때 이 부분을 유의해야 합니다.

• 동등 연산자

동등 연산자는 값의 동등함을 판단하는 연산자입니다.

자바스크립트에서는 일반적인 동등 연산자(==)와 엄격한 동등 연산자(===) 두 가지로 동등함을 판단할 수 있습니다.

먼저 동등 연산자부터 알아보겠습니다.

동등 연산자는 객체의 참조 값이 동일하거나 피연산자의 타입이 달라도 같은 값을 반환할 수 있다면 동등하다고 판단합니다.

동등 연산자의 두 번째 특징은 많은 개발자가 자바스크립트의 골칫거리라고 생각하는 부분 중 하나입니다.

console.log(1 == true); // true

숫자 1과 불리언 값 true가 동등하다는 결과가 나왔습니다.

이러한 결과가 나오는 이유는 불리언 값 true가 숫자 1로 변환되어 같은 값을 반환하기 때문입니다.

이 이상한 동작의 원리를 암시적 강제 변환이라고 합니다.

암시적 강제 변환은 연산 중에 내부적으로 타입을 변환해 연산을 수행하는 것을 의미합니다.

 

정리하자면 동등 연산자는 암시적 강제 변환을 통해 값의 타입을 변환해 비교하는 것입니다.

그렇다면 엄격한 동등 연산자와 일반 동등 연산자는 어떤 차이가 있을까요?

엄격한 동등 연산자는 암시적 강제 변환을 허용하지 않습니다.

console.log(1 === true); // false
console.log(1 === 1); // true

동등 연산자와 달리 타입 변환이 발생하지 않기 때문에 타입이 다르다면 무조건 다른 값으로 판단합니다.

피연산자들의 타입과 값이 모두 일치해야 동등하다고 판단하기 때문에 '엄격한'이란 표현을 붙여서 사용하며 일치 연산자라고도 합니다.

 

[NOTE]

엄격한 동등 연산의 결과가 동등하다고 판단되었다면, 당연히 동등 연산의 결과도 동등합니다.

 

▷in, instanceof 연산자

in 연산자는 객체에 특정 프로퍼티가 있는지 확인하는 연산자이며, 우측에는 반드시 객체 타입이 와야 합니다.

좌측 평가값이 우측 객체의 프로퍼티라면 참으로 판단하며, 아니라면 거짓으로 판단합니다.

const obj = {a: 1, b: 2}
console.log('a' in obj); // true
console.log('c' in obj); // false

instanceof 연산자는 좌측 피연산자가 우측 피연산자의 인스턴스인지 판단하는 연산자입니다.

우측에는 반드시 생성자 함수 또는 클래스가 와야 합니다.

촤측 평가값이 우측 클래스의 인스턴스이면 참으로 판단하고 그렇지 않다면 거짓으로 판단합니다.

const arr = [1, 2];

console.log(arr instanceof Array); // ture
console.log(arr instanceof Date); // false

 

5) 기타 연산자

▷비트 연산자

비트 연산자는 숫자의 비트를 조작하는 연산자이며, 이진 연산을 수행하지만 결과값은 자바스크립트 숫자 값을 반환합니다.

비트 연산자의 피연산자는 32비트 정수 표현법을 따르므로 연산을 수행할 때 피연산자를 32비트 정수로 변환해 수행합니다.

연산자	수행 연산	피연산자 개수	결합 방향	예제
&	비트 AND	2	좌 → 우	x & y
|	비트 OR	2	좌 → 우	x | y
^	비트 XOR	2	좌 → 우	x ^ y
~	비트 NOT	1	좌 → 우	~x
<<	왼쪽 시프트	2	좌 → 우	x << 1
>>	부호 비트 확장 오른쪽 시프트	2	좌 → 우	x >> 1
>>>	부호 비트 확장 없는 오른쪽 시프트	2	좌 → 우	x >>> 1

시프트 연산의 예제를 살펴보겠습니다.

const a = 20; // 10100(2진수) => 20(10진수)
console.log(a << 1); // 101000(2진수) => 40(10진수)
console.log(a >> 1); // 1010(2진수) => 10(10진수)

왼쪽 시프트는 말 그래도 비트를 왼쪽으로 옮기는 것이며, 왼쪽으로 초과되는 비트들은 버려집니다.

왼쪽 시프트의 연산 결과는 이진수 101000이며 이를 10진수로 변환하면 40입니다.

즉 왼쪽 시프트 연산은 2를 곱하는 효과가 있습니다.

 

오른쪽 시프트는 반대로 비트를 오른쪽으로 옮기고 오른쪽으로 초과되는 비트들은 버려집니다.

오른쪽 시프느 연산의 결과는 이진수 1010이며 이를 10진수로 변환하면 10입니다.

즉 오른쪽 시프트 연산은 2로 나누는 효과가 있습니다.

 

▷조건 연산자

조건 연산자는 자바스크립트에서 유일하게 피연산자를 세 개 갖는 3항 연산자입니다.

조건 연산자는 'if else' 조건문의 축약형입니다.

if (a > 1) {
	b = a;
} else {
 	b = 2;
}
// 아래 조건 연산자를 이욯한 표현식은 위의 조건문과 동일합니다.
b = a > 1 ? a : 2;

물음표 앞에 있는 첫 번째 피연산자 (a>1)가 참으로 판단되면 이 표현식의 값은 두 번째 피연산자(a)로 평가되며, 거짓으로 판단된다면 세 번째 피연산자(2)로 평가됩니다.

다시 말해 b = (첫 번째 피연산자) ? (참이라면 b = 여기) : (거짓이라면 b = 여기) 

3항 연산자는 조건문을 간결하게 표현할 수 있어 유용하게 사용됩니다.

 

▷할당 연산자

할당 연산자는 변수에 값을 할당할 때 사용하는 연산자로 이미 앞의 코드에서 많이 보았기 때문에 익술할 것입니다.

우측 피연산자의 값을 좌측 피연산자의 값에 할당하며, 좌측 피연산자의 값은 반드시 변수나 객체의 프로퍼티 또는 배열의 원소처럼 값을 할당할 수 있는 요소 중 하나여야 합니다.

let a, b;
a = b = 2;

할당 연산자의 결합 방향은 우측에서 좌측입니다.

여러 개의 할당 연산이 발생하면 우측부터 연산을 시작해 좌측으로 평가됩니다.

위의 코드에서는 우측부터 b = 2 할당 연산을 먼저 수행한 후 이 연산의 결과값인 2를 변수 a에 할당합니다.

 

자바스크립트에서는 연산과 할당을 동시에 수행하는 할당 연산자도 있습니다.

연산자	표현식	동등한 표현식
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
&=	x &= y	x = x & y
|=	x |= y	x = x | y
^=	x ^= y	x = x ^ y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
||=	x ||= y	x = x || y

 

▷쉼표 연산자

두 개의 피연산자를 가지며 피연산자는 어떤 타입이든 올 수 있습니다.

좌측부터 우측으로 피연산자를 평가하며 우측 피연산자의 평가값을 최종 결과로 반환합니다.

for 반복문 루프 변수를 갱신할 때 사용할 수 있습니다.

// 루프 변수 i, j를 한꺼번에 갱신할 때 쉼표 연산자를 사용합니다.
for (let i = 0; j = 10; i < j; i++, j--) {
	// ...
}

 

▷typeof 연산자

typeof 연산자는 피연산자의 타입을 문자열로 반환하는 단항 연산자입니다.

다음 표는 피연산자 타입에 따른 typeof 연산의 결과입니다.

피연산자 타입	결과	예제
문자열	'string'	typeof 'javascript'
숫자	'number'	typeof 1
불리언	'boolean'	typeof true
undefined	'undefined'	typeof undefined
null	'object'	typeof null
함수	'function'	typeof function()
객체	'object'	typeof {}
심볼	'symbol'	typeof Symbol()
BigInt	'bigint'	typeof 1n

위 표에서 typeof null의 결과를 자세히 봅시다.

결과가 'null'이 아닌 'object'입니다.

안타깝지만 이는 초창기 자바스크립트 설계의 오류로 생긴 버그이며, null타입인지 확인하고 싶으면 엄격한 동등 연산자를 사용해 확인해야만 합니다.

또한 typeof는 함수 외의 객체들은 모두 'object' 문자열은 반환해 정확하게 구분하지 못합니다.

만약 객체의 클래스를 구반하고 싶다면 앞에서 봤던 instanceof 연산자를 사용해야 합니다.

const vehicle = new Vehicle();
console.log(vehicle instanceof Vehicle); // true
console.log(typeof vehicle); // 'object'

 

▷연산자 우선순위

산술 연산자, 논리형 연산자, 관계형 연산자 등 자바스크립트의 연산자들이 어떠한 연산을 수행하는2지 알아봤습니다.

그렇다면 이제 우리가 배웠던 연산자들을 조합해서 사용하면 어떻게 동작하는지 알아보겠습니다.

const a = 1 + 2 * 5; // 11

덧셈과 곱셈 연산은 좌측에서 우측으로 평가된다고 했습니다.

이 규칙대로라면 1 + 2의 결과인 3과 5를 곱해 최종적으로 15가 되어야 하지만 결과는 11입니다.

우측의 곱셈 연산을 먼저 수행한 후 그 결과값으로 덧셈 연산을 하기 때문입니다.

우리는 위 코드로 곱셈 연산자가 덧셈 연산자보다 우선순위임을 알 수 있습니다.

이처럼 연산자가 여러 개일때 어떤 순서로 처리할지 정의한 규칙을 연산자 우선순위라고 합니다.

좀 더 헷갈릴 만한 에제를 보겠습니다.

const x = true;
const y = false;
const z = false;

console.log(x || y && z); // true;

이 표현식은 우측의 AND 연산을 먼저 실행하고 좌측 OR 연산을 실행합니다.

왜 그럴까요? 연산자 우선순위 규칙에 따르면 논리 AND 연산자가 OR 연산자보다 우선 순위가 높기 때문입니다.

마지막으로 한 가지 예제를 더 살펴봅시다.

let x = 2, y;

y = x++, x;

console.log(y); // 2

y의 값은 2로 할당되었습니다.

쉼표 연산자는 마지막 평가값을 반환한다고 배웠습니다.

그렇다면 앞에서 x 값을 증가시켜 3이 할당되어야 하지 않을까요?

2가 할당된 이유는 쉼표 연산자는 할당 연산자보다 우선순위가 낮기 때문입니다.

위 코드의 표현식은 (y = x++), x와 동등한 표현식입니다.

할당 표현식이 먼저 평가되기 때문에 2가 할당됩니다.

 

코드를 작성하다 보면 연산자 우선순위를 변경하고 싶은 경우도 있을 것입니다.

그럴 때는 괄호를 사용해 연산 순서를 원하는 대로 변경할 수 있습니다.

let x = 2, y;
// 괄호를 사용해 쉼표 연산이 먼저 수행되도록 변경했습니다.
y = (x++, x);

console.log(y); // 3

 

---

여기까지 자바스크립트 구문과 연산자에 대해 알아보았습니다 :)

 

이때까지 변수 선언에 사용되는 var, let, const 키워드의 특징, 원시타입과 참조형(객체) 타입의 정의와 차이점, 마지막으로 표현식과 문 그리고 연산자를 사용하여 구문을 작성하는 방법까지 알아보았습니다.

기초적인 내용이지만 다양한 명세와 문법들이 얽혀 상호작용하고 있으며, 모던 자바스크립트에서는 지양해야 할 안티 패턴들도 있었습니다.

앞서 살펴본 것들은 자바스크립트의 뼈대가 되는 기본적인 내용입니다.

앞으로 나올 함수, 프로토타입 등 다양한 개념들을 이해하기 위해서 반드시 필요한 내용이니 명확히 숙지해야 합니다.