[JS] 연산자(Operator)

vSsongv·2021년 11월 22일
0

JS

목록 보기
5/40
post-thumbnail

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

✏️ 산술 연산자

  • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
  • 산술 연산이 불가능하면 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()
2new(매개변수 존재), [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3new(매개변수 미존재)
4x++, 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와, 추가 탐구한 내용을 정리한 포스트입니다.>

profile
wanna be bright person✨ Front-End developer

0개의 댓글