FE/리뷰

모던 자바스크립트 딥다이브 7장 정리

따봉치치 2024. 3. 9. 16:11

연산자
  • 산술 연산자
  • 문자열 연결 연산자
  • 할당 연산자
  • 비교 연산자
  • 논리 연산자
  • 타입 연산자

 

피연산자
  • 연산의 대상
  • 값으로 표현될 수 있는 표현식

 

산술 연산자
  • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값 생성
  • 불가할 경우 NaN 반환
  • 이항 산술 연산자
  • 단항 산술 연산자

 

이항 산술 연산자
  • 2개의 피연산자를 산술 연산하여 숫자 값 생성
  • 피연산자의 값을 바꾸는 것이 아닌 새로운 값을 생성하는 것
  • + : 덧셈
  • - : 뺄셈
  • * : 곱셈
  • / : 나눗셈
  • % : 나머지

 

단항 산술 연산자
  • 1개의 피연산자를 산술 연산하여 숫자값 생성
  • 증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과가 있다
  • 즉, 피연산자의 값을 변경하는 암묵적 할당이 발생
  • ++ : 증가
  • -- : 감소
  • - : 양수를 음수로, 음수를 양수로 반전한 값 반환

 

문자열 연결 연산자
  • + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
1 + true 연산의 경우 자바스크립트 엔진이 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제로 변환한 후 연산 수행
이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 함

 

할당 연산자
  • 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

 

비교 연산자
  • 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
  • == : x와 y의 갑이 같음, 동등 비교 
    • 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교!
  • === : x와 y의 값과 타입이 같음, 일치 비교
    • NaN은 자신과 일치하지 않는 유일한 값
    • +0과 -0은 값은 값
    • Object.is 메서드를 대신 사용해도됨
Object.is(+0, -0)  // false
Object.is(NaN, NaN) // true
  • != : x와 y의 값이 다름, 부동등 비교
  • !== : x와 y의 값과 타입이 다름, 불일치 비교

 

대소 관계 비교 연산자
  • 피연산자의 크기를 비교하여 불리언 값 반환
  • >
  • <
  • >=
  • <=

 

삼항 조건 연산자
  • 조건식의 평가 결과에 따라 반환할 값 결정함
  • 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
  • 삼항 조건 연산자 표현식은 if else 문과 달리 값처럼 사용 가능함

 

논리 연산자
  • 우항과 좌항의 피연산자를 논리 연산함
  • || : 논리합(OR)
  • && : 논리곱(AND)
  • ! : 부정(NOT)
  • 피연산자가 반드시 불리언 값이 아니여도 됨. 암묵적 타입 변환되기 때문

 

쉼표 연산자
  • 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환
var x,y,x;

x=1, y=2, z=3; // 3
그룹 연산자
  • 소괄호를 사용해 피연산자를 감싸면 자신의 피연산자인 표현식을 가장 먼저 평가
  • 연산자의 우선순위 조절 가능
  • 그룹 연산자는 연산자 우선순위가 가장 높음

 

typeof 연산자
  • 피연산자의 데이터 타입을 문자열로 반환함
  • string, number, boolean, undefined, symbol, object, function 중 하나 반환
  • null을 반환하는 경우는 없음 (typeof null은 "object"를 반환함. 오류 중 하나)
  • 선언하지 않은 식별자를 typeof 연산 시 ReferenceError 가 아닌 undefined 반환
typeof undeclared; // undefined
typeof '' // string
typeof NaN // number
typeof null // object
typeof function () {} // function
지수 연산자
  • 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱한 숫자 값 반환
  • **
  • Math.pow 메서드를 사용가능
  • 음수를 밑으로 사용하려면 괄호로 묶어야 함
  • 이항 연산자 중에서 우선순위가 가장 높음
2 ** 2 // 4
(-5) ** 2 // 25

 

그 외 연산자
  • ?. : 옵셔널 체이닝 연산자
  • ?? : null 병합 연산자
  • delete : 프로퍼티 삭제
  • new : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
  • instanceof : 좌변의 객체를 우변의 생성자 함수와 연결된 인스턴스인지 판별
  • in : 프로퍼티 존재 확인

 

연산자의 부수 효과(Side Effect)
  • 할당 연산자 (=) : 변수 값이 변하는 부수 효과
  • 증가/감소 연산자(++/--) : 피연산자 값이 재할당되어 변경되는 부수효과
  • delete 연산자 : 객체의 프로퍼티를 삭제하는 부수 효과

 

 

Q. 동등 비교 연산자와 일치 비교 연산자의 차이점에 대해 말씀해주세요

Q. 산술 연산자의 종류에는 어떤 것이 있나요?

Q. typeof 연산자에 대해 말씀해주세요

Q. 선언하지 않은 식별자를 typeof 연산 시 어떤 값이 반환되나요?

Q. 연산자 중에 부수효과가 있는 연산자는 어떤 것들이 있나요?