개발지식 및 기초지식/JAVASCRIPT

js기초 - 연산자

jeong_ga 2022. 7. 14. 16:13

모던자바스크립트 DEEPDIVE - chapter 7 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수연산 등을 수행하여 하나의 값을 만든다.

피연산자

  • 연산의 대상
  • 값으로 평가될 수 있는 표현식이어야 한다.

연산자

  • 피연산자를 연산하여 새로운 값을 만듦

연산자 & 피연산자로 이루어진 연산자 표현식도 값으로 평가될 수 있기 때문에 표현식이다.

산술연산자

피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자값을 만든다.

산술이 불가능한 경우 NaN을 반환

이항 산술 연산자

2개의 피연산자를 연산하여 숫자값을 만듦

어떤 산술 연산을 하더라도 피연산자의 값이 바뀌지 않는다. -> 새로운 값을 생성

단항 산술 연산자

1개의 피연산자를 산술연산하여 값을 생성

  • ++, -- (피연산자의 값을 변경하는 부수효과O)
  • 증가, 감소 연산을 하면 피연산자의값을 변경하는 암묵적 할당이 이루어진다.
  • ++x : 피연산자의 값을 증가시킨 후 다른 연산 수행
  • `x++ : 다른 연산 수행 후 피연산자 값을 증가
var x = 1;

x++; // x = x+1;

x--; // x = x-1;
  • +, - (음수, 양수 표현)
  • 숫자타입이 아닌 피연산자에게 + || - 단항 연산자를 사용하면 숫자타입으로 변환된다.

문자열 연결 연산자

+ 연산자는 피연산중 하나 이상의 피연산자가 문자열일 경우 문자열 연결 연산자로 동작

  • 암묵적 타입 변환(다른 말로는 타입 강제 변환)이 이루어져 1+true = 2 와 같은 결과가 나온다.

할당연산자

  • 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
  • 부수효과 존재
var x;

x += 10; // x = x + 10;

x /= 10 //  x = x / 10;

var srt = "jeonga"

str += "lee" // str = "jeonga" + "lee"

할당문은 값으로 표현될 수 있는 표현식이다.

비교연산자

if, for문과 같은 제어문의 조건식에서 주로 사용되며 좌항과 우항을 비교하여 결과를 불리언 값으로 반환

동등, 일치 비교 연산자

== 동등비교 <-> 부동등 비교 암묵적 타입변환을 통해 타입을 일치시킨 후 비교

=== 일치비교 <-> 불일치 비교 NaN!==NaN이기 떄문에 숫자가 NaN인지를 확인하고 싶을 땐 Number.isNaN을 사용해야 한다.

대소관계 비교 연산자

삼항 조건 연산자

  • 부수효과 X
  • if문은 값처럼 사용할 수 없지만(표현식이 아닌 문이기 때문!!!) 삼항조건연산자는 값처럼 사용할 수 있다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값


불리언값을 반환할 조건식, 결과가 불리언 값이 아니라면 암묵적 타입변환

논리연산자

피연산자를 논리 연산한다.

  • ||
  • &&
  • ! (부정, 불리언 값을 반환한다.)

!(x || y) === (!x || !y)드모르간의 법칙

쉼표 연산자

왼쪽 연산자부터 차례로 피연산자를 평가, 마지막 연산자의 평가가 끝나면 마지막 연산자의 결과를 반환

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

그룹연산자

소괄호로 피연산자를 감싸 우선순위를 조절한다.

typeof 연산자

데이터타입을 문자열로 반환한다.

  • string
  • number
  • blooean
  • undefined
  • symbol
  • object
  • funcion

null을 반환하는 경우는 없다. typeof null은 object를 반환한다.

선언하지 않은 식별자를 검사할 때 ReferenceError가 아닌 undefined가 반환된다.

지수연산자

  • es7에서 도입되었다.
  • 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱하여 숫자값 반환
  • 지수연산자가 도입되기 전엔 Math.pow메소드를 사용했다.
  • 이항연산자 중 우선순위가 가장 높다.
2 ** 2; //4

(-5) ** 2; // 음수를 사용하기 위해서는 괄호로 묶어야 함

Math.pow(2,2);

그외 연산자

?. // 옵셔널 체이닝 연산자

?? // null 병합 연산자

delete // 프로퍼티 삭제

**new** // 생성자 함수를 호출할 때 사용하여 인스턴스 생성

instanceof // 좌변의 개게가 우변의 생성자 함수와 연결된 인스턴스인지 판별

in // 프로퍼티 존재 확인

연산자의 부수효과

대부분의 연산자는 다른 코드에 영향을 주지 않지만 일부 연산자는 다른 코드에 영향을 주는 부수효과가 있다.

  • 할당연산자=
  • 변수값이 변하기 때문
  • 증가, 감소 연산자 ++ / --
  • 값이 재할당되어 변경되기 때문
  • delete 연산자
  • 객체의 프로퍼티를 삭제하기 때문

연산자 우선순위

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

  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. ,

헷갈리기 쉽기 때문에 ()가 가장 높은 우선순위를 가지고 있다는 것을 기억하자!

'개발지식 및 기초지식 > JAVASCRIPT' 카테고리의 다른 글

js기초 - 타입변환과 단축평가  (0) 2022.07.14
js기초 - 제어문  (0) 2022.07.14
js기초 - 데이터타입  (0) 2022.07.14
js기초 - 표현식과 문  (0) 2022.07.14
js기초 - 변수  (0) 2022.07.14