[JS] 연산자(Operator)

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.

✏️ 산술 연산자

• 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
• 산술 연산이 불가능하면 NaN을 반환한다.
• 이항 산술 연산자
  • 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
  • ✖,➖,➕,%, /
• 단항 산술 연산자
  • 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
  • ++, --, +, -(양수, 음수 반전)
  • 전위 연산자 -> 값 변경 후 다른 연산 수행
  • 후위 연산자 -> 다른 연산 수행 후 값 변경
  • 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 숫자 타입으로 변환한다.
  • 피연산자의 값을 변경하는 부수 효과가 있다.

    <부수 효과가 있는 연산자>

    • ++, --, =, delete 연산자
    • delete 연산자 : 객체의 프로퍼티를 없애거나 배열의 슬롯을 없애는 연산자이다. 성공하면 true 를 반환하고 실패하면 false 를 반환하거나 에러를 발생시킨다.

• 문자열 연결 연산자
  • + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
    1+true -> 2
1+'1' -> '11' -> 암묵적 타입 변환 / 타입 강제 변환

✏️ 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
  =, +=, -=, *=, /=, %=
• 할당문은 표현식인 문이다.

✏️ 비교 연산자

• 좌항과 우항의 피연산자를 비교한 다음 결과를 boolean 값으로 반환한다.
• if, for문 같은 제어문 조건식에서 주로 사용한다.
• 동등/일치 비교 연산자
  • 동등/비동등 비교 : 값이 같음/다름. ==, !=
  • 동등/비동등 연산자는 암묵적 타입 변환을 통해 타입을 일치시킨 후 비교한다.
    5 == '5' //true
  • 일치/비일치 비교 : 값과 타입이 같음/다름. ===, !==
  • NaN은 자신과 일치하지 않는 유일한 값이다. -> 이해에 도움이 되는 정리글 : About NaN
  • 숫자가 NaN인지 조사하려면 isNaN을 사용해야 한다.
  • Object.is : 예측 가능한 정확한 비교 결과를 반환한다.

  	NaN === NaN // false
	Object.is(NaN, NaN) //true
  	+0 === -0 // true
	Object.is(+0, -0) //false

• JS에서는 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다.
• 대소 관계 비교 연산자
  • 피연산자의 크기를 비교하여 boolean값을 반환한다.
  • >, <, >=, <=

✏️ 삼항 조건 연산자

• var result = score >= 60 ? 'pass' : 'fail'
• 첫번째 피연산자가 true면 두번째 피연산자를, 첫번째 피연산자가 false면 세 번째 피연산자를 반환한다.
• 삼항 조건 연산자는 값으로 사용할 수 있는 표현식이다. 그러나 if...else문은 값처럼 사용할 수 없다.

✏️ 논리 연산자

• 우항과 좌항의 피연산자를 논리 연산한다.
  ||, && !
• !(논리 부정): 은 언제나 boolean 값을 반환한다.
• ||(논리합), &&(논리곱): 은 항상 boolean값은 아니다. 언제나 2개 중 한쪽으로 평가된다. ex)'Cat' && 'Dog' -> Dog

✏️ 쉼표 연산자

• 왼쪽 피연산자부터 차례대로 평가한다. 마지막 피연산자의 평가 결과를 반환한다.

	var x,y,z;
	x = 1, y = 2, z = 3 // 3

✏️ 그룹 연산자

• ()으로 감싼다.
• 연산자 우선순위가 가장 높다.
  10 * (2 + 3) // 50

✏️ typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환한다.
• 함수는 object 가 아니라 function을 반환한다.
• typeof null을 해 보면 object를 반환하는데 이것은 버그이다. 따라서 ===를 사용해라.
• 선언하지 않은 값은 undefined로 반환한다.

✏️ 지수 연산자

• 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱하여 숫자 값을 반환한다.

2 ** 2 ** 2// 16
(-5) ** 2 // 25 -> 음수를 밑으로 사용하려면 ()로 묶어야 한다.

• 지수 연산자 사용 전에는 Math.pow method를 사용했다.

✏️ 연산자 우선순위

• 여러 개의 연산자로 이루어진 문이 실핼될 때 실행되는 순서

우선순위	연산자
1	()
2	new(매개변수 존재), [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3	new(매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof, delete
6	** (이항 연산자 중 가장 우선순위 높음)
7	*, /, %
8	+, -
9	<, <=, >=, >, in, instanceof
10	==, !=, ===, !===
11	??(null 병합 연산자)
12	&&
13	|
14	? ... : ...
15	할당 연산자(=, +=, -= ...)
16	,

✏️ 연산자 결합 순서

• 연산자의 어느 쪽부터 평가를 수행할 것인지를 나타내는 순서,

결합 순서	연산자
좌항 ->우항	+, -, /, %, <, <=, >=, >, ||, &&, ., [], (), ??, ?., in, instanceof
우항 -> 좌항	++, --, 할당 연산자(=, +=, -= ...), !x, +x, -x, ++x, --x, typeof, delete

<모던 자바스크립트 deepdive와, 추가 탐구한 내용을 정리한 포스트입니다.>