07장. 연산자

"모던 자바스크립트 Deep Dive" 자바스크립트의 기본 개념과 동작 원리

 

🔶 연산자란?

---

연산자는 하나 이상의 값에 대해 다양한 연산을 수행하는 기호입니다. 이때 연산의 대상이 되는 값을 피연산자라고 하며, 연산을 통해 새로운 값을 생성합니다.

 

🔶 산술 연산자

---

산술 연산자는 수학적 연산을 수행하여 새로운 숫자 값을 만들어내는 연산자입니다. 만약 연산이 불가능한 경우 ``NaN``(Not a Number)을 반환합니다.

산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단일 산술 연산자로 구분됩니다.

• 이항 산술 연산자 : 두 개의 피연산자를 대상으로 연산을 수행합니다. 덧셈(``+``), 뺄셈(``-``), 곱셉(``*``), 나눗셈(``/``), 나머지(``%``)가 이에 해당합니다. 이들은 피연산자를 변경하지 않고 새로운 값을 반환하므로 부수 효과가 없습니다.
• 단항 산술 연산자 : 하나의 피연산자를 대상으로 연산을 수행합니다. ``++``, ``--``(증가/감소 연산자)와 ``+``, ``-``(부호 연산자)가 이에 해당합니다. ``++``와 ``--``는 피연산자의 값을 변경하는 부수 효과를 가집니다. 위치에 따라 동작이 달라지는데, 연산자가 앞에 위치하면(전위 연산자) 먼저 값이 변경되고, 뒤에 위치하면(후위 연산자) 기존 값을 사용한 후 변경됩니다.
• ``+`` 연산자는 숫자 값에 영향을 주지 않지만, 문자열을 숫자로 변환하는 기능을 가집니다. 반면, ``-`` 연산자는 부호를 반전시키며 숫자가 아닌 값에 사용될 경우 숫자로 변환한 후 부호를 변경합니다.
• ``+`` 연산자는 문자열을 연결하는 기능도 합니다. 하나 이상의 피연산자가 문자열이라면 연산 결과도 문자열이 됩니다.

또한, ``1 + ture``와 같은 표현에서는 ``true``가 ``1``로 변환되는 것처럼, 자바스크립트 엔진이 자동으로 데이터 타입을 변환하는 과정을 암묵적 타입 변환 또는 타입 강제 변환이라고 합니다.

 

🔶 할당 연산자

---

할당 연산자는 우항의 값을 평가한 후 좌항의 변수에 할당하는 연산자입니다. ``=`` 연산자를 기본으로 하여, ``+=``, ``-=``, ``*=``, ``/=``, ``%=`` 와 같은 복합 할당 연산자도 있습니다. 이들은 피연산자의 값을 변경하는 부수효과를 가집니다.

할당 연산의 결과값은 할당된 값이므로, 연쇄적인 할당도 가능합니다.

var a, b, c;
a = b = c = 0;	// 모든 변수에 0을 할당

 

🔶 비교 연산자

---

비교 연산자는 두 개의 피연산자를 비교한 후 논리값(``true`` 또는 ``false``)을 반환합니다.

• 동등 비교(``==``) & 일치 비교(``===``)
  • ``==``(동등 비교 연산자) : 타입을 자동 변환하여 비교합니다. 즉, ``'1' == 1``은 ``true``가 됩니다.
  • ``===``(일치 비교 연산자) : 타입과 값이 모두 같아야 ``true``를 반환합니다. ``'1' === 1``은 ``false``가 됩니다.
  • ``NaN``은 어떠한 값과도 일치하지 않으며, ``NaN === NaN``도 ``false``가 됩니다. ``NaN``을 판별할 때는 ``Number.isNaN()``을 사용해야 합니다.
• 부등 비교(``!=``) & 불일치 비교(``!==``)
  • 위와 반대 개념으로 동작합니다.
• 대소 비교(``<``, ``>``, ``<=``, ``>=``)
  • 두 값을 비교하여 ``true`` 또는 ``false``를 반환합니다.

 

🔶 삼항 조건 연산자

---

삼항 조건 연산자는 조건에 따라 두 개의 표현식 중 하나를 반환하는 연산자입니다.

const result = score >= 60 ? "합격" : "불합격";

조건문인 ``if-else``와 비슷하지만, 값을 반환할 수 있어 변수에 직접 할당할 수 있다는 장점이 있습니다.

 

🔶 논리 연산자

---

논리 연산자는 논리적 판단을 수행하며, ``&&``(논리곱), ``||``(논리합), ``!``(논리 부정) 연산자가 있습니다.

• ``!``(논리 부정) 연산자는 언제나 불리언 값을 반환합니다. 피연산자가 불리언 값이 아닌 경우 자동으로 변환 후 연산합니다.
• ``&&``, ``||`` 연산자는 불리언 값 뿐만 아니라 피연산자 자체를 반환하는 특징이 있습니다.

console.log("hello" && "world");	// "world"
console.log(null || "default");		// "default"

 

🔶 쉼표 연산자

---

쉼표 연산자(``,``)는 왼쪽 피연산자부터 차례대로 평가한 후 마지막 피연산자의 결과를 반환합니다.

var z = (1, 2, 3);	// z는 3

 

🔶 그룹 연산자

---

그룹 연산자(``()``)는 연산자의 우선순위를 조정하는데 사용됩니다.

console.log(2 + 3 * 4);		// 14
console.log((2 + 3) * 4); 	// 20

 

🔶 ``typeof`` 연산자

---

`typeof`` 연산자는 데이터 타입을 문자열로 반환합니다.

console.log(typeof "Hello");	// "string"
console.log(typeof 123);        // "number"

하지만 ``typeof null``은 ``object``를 반환하므로 ``null`` 확인 시 ``=== null``을 사용해야 합니다.

또한, 선언되지 않은 변수에 ``typeof``를 사용하면 ``ReferenceError``가 아닌 ``undefined``를 반환합니다.

 

🔶 지수 연산자

---

지수 연산자(``**``)는 좌항을 밑(base)으로, 후항을 지수(exponent)로 거듭제곱을 수행합니다.

console.log(2 ** 3);	// 8

이전에는 ``Math.pow()``를 사용했으나, ES7부터 ``**`` 연산자가 도입되었습니다.

 

🔶 연산자의 부수효과

---

일반적으로 연산자는 피연산자의 값을 변경하지 않지만, 할당 연산자, 증가/감소 연산자, ``delete`` 연산자는 피연산자의 값을 변경하는 부수 효과를 가집니다.

 

🔶 연산자 우선순위

---

연산자의 우선순위는 어떤 연산이 먼저 수행되는지 결정합니다. 연산자 우선순위가 높을수록 먼저 실행됩니다. 이를 명확히 하기 위해 그룹 연산자 ``()``를 활용하는 것이 좋습니다.