[모던 자바스크립트 Deep Dive] 7장. 연산자

2024. 3. 21. 11:39·웹 프로그래밍/JavaScript | TypeScript
반응형

7.1. 산술 연산자

산술 연산이 불가능한 경우, NaN을 반환한다.

 

7.1.2 단항 산술 연산자

숫자가 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해 반환한다. 따라서 부수효과는 존재하지 않는다 (=다른 코드에 영향을 주지 않는다) .

var x = "1";
console.log(+x); //1
console.log(typeof +x); //number
console.log(x);  //"1"

var x = false;
console.log(+x); //0
console.log(typeof +x); //number

var x = "Hello";
console.log(+x); //NaN
console.log(typeof +x); //number

 

- 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. +단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 부수효과는 존재하지 않는다.

var x = -10;
console.log(-x); //10

var x = false;
console.log(-x); //-0

var x = "10";
console.log(-x); //-10

var x = "Hello";
console.log(-x); //NaN

 

 

7.3. 비교 연산자

  • 동등 비교(==) 연산자는 좌, 우항 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
  • 일치 비교(===) 연산자는 좌, 우항 피연산자가 타입도 같고 값도 같은 경우에만 true를 반환한다.

 

7.6. 쉼표 연산자

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

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

 

 

7.8. typeof 연산자

typeof: 피연산자의 데이터 타입을 문자열로 반환하는 연산자

Type Result
Undefined "undefined"
* Null "object"
Boolean "boolean"
Number "number"
BigInt "bigint"
String "string"
Symbol (ECMAScript 2015에서 추가) "symbol"
호스트 객체 (JS 환경에서 제공) 구현체마다 다름
Function 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체) "function"
다른 모든 객체 "object"

 

🚫주의🚫

1. typeof 연산자로 null값을 연산할 시, "null"이 아닌 "object"를 반환하는데 이는 js에 존재하는 버그이다. 기존 코드에 영향을 줄 수 있기 때문에 해당 버그는 아직까지 수정되지 못하고 있다.

따라서 값이 null타입인지 확인할 때는 typeof 연산자 대신 일치(===) 연산자를 사용해야 한다.

2. 선언하지 않은 식별자를 typeof 연산자로 연산할 시 ReferenceError 대신 undefined가 반환된다.

 

 

7.9. 지수 연산자

2 ** 2 // 4
2 ** 0 // 1
2 ** -2 // 0.25
2 ** 3 // 8

 

지수 연산자 도입 이전에는 Math.pow 메서드를 사용했다.

Math.pow(2, 2); //4
Math.pow(2, 0); //1
Math.pow(2, -2); //0.25
Math.pow(2, 3); //8

 

 

7.10. 그 외의 연산자

  • ?. : 옵셔널 체이닝 연산자
  • ??: null 병합 연산자
  • delete: 프로퍼티 삭제
  • new: 생성자 함수 호출 시 사용하여 인스턴스 생성
  • in: 프로퍼티 존재 확인

 

7.12. 연산자 우선순위

우선순위 연산자 유형 결합성 연산자
19 그룹 없음 ( … )
18 멤버 접근 좌결합성 … . …
계산된 멤버 접근 좌결합성 … [ … ]
new (인자 리스트 제공) 없음 new … ( … )
함수 호출 좌결합성 … ( … )
옵셔널 체이닝 좌결합성 ?.
17 new (인자 리스트 생략) 우결합성 new …
16 후위 증가 없음 … ++
후위 감소 … --
15 논리 NOT 우결합성 ! …
비트 NOT ~ …
단항 양부호 + …
단항 부정 - …
전위 증가 ++ …
전위 감소 -- …
typeof typeof …
void void …
delete (en-US) delete …
await await …
14 거듭제곱 우결합성 … ** …
13 곱하기 좌결합성 … * …
나누기 … / …
나머지 … % …
12 더하기 좌결합성 … + …
빼기 … - …
11 비트 왼쪽 시프트 좌결합성 … << …
비트 오른쪽 시프트 (en-US) … >> …
비트 부호 없는 오른쪽 시프트 (en-US) … >>> …
10 미만 (en-US) 좌결합성 … < …
이하 (en-US) … <= …
초과 (en-US) … > …
이상 (en-US) … >= …
in … in …
instanceof … instanceof …
9 동등 좌결합성 … == …
부등 … != …
일치 (en-US) … === …
불일치 (en-US) … !== …
7 비트 AND 좌결합성 … & …
7 비트 XOR (en-US) 좌결합성 … ^ …
6 비트 OR (en-US) 좌결합성 … | …
5 논리 AND 좌결합성 … && …
4 논리 OR 좌결합성 … || …
널 병합 연산자 좌결합성 … ?? …
3 조건 (삼항) 우결합성 … ? … : …
2 할당 (en-US) 우결합성 … = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
… &&= …
… ||= …
… ??= …
yield 우결합성 yield …
yield* yield* …
1 쉼표 / 시퀀스 좌결합성 … , …

 

 


출처:

  • 모던 자바스크립트 Deep Dive (이웅모 저, 위키북스)
  • https://developer.mozilla.org/  typeof 연산자, 연산자 우선 순위
 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'웹 프로그래밍 > JavaScript | TypeScript' 카테고리의 다른 글

[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가)  (0) 2024.03.25
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환)  (1) 2024.03.22
[모던 자바스크립트 Deep Dive] 8장. 제어문  (1) 2024.03.22
[모던 자바스크립트 Deep Dive] 6장. 데이터 타입  (0) 2024.03.21
[모던 자바스크립트 Deep Dive] 5장. 표현식과 문  (0) 2024.03.20
리액트 공식문서 읽기 - 주요개념(Lifecycle)  (0) 2024.03.18
'웹 프로그래밍/JavaScript | TypeScript' 카테고리의 다른 글
  • [모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환)
  • [모던 자바스크립트 Deep Dive] 8장. 제어문
  • [모던 자바스크립트 Deep Dive] 6장. 데이터 타입
  • [모던 자바스크립트 Deep Dive] 5장. 표현식과 문
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
    반응형
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기 (505)
      • 프로그래밍 (41)
        • Programming (1)
        • C | C++ (6)
        • Java (28)
        • Python (5)
      • 웹 프로그래밍 (108)
        • HTML | CSS (5)
        • JavaScript | TypeScript (41)
        • React (25)
        • Vue.js (0)
        • Next.js (18)
        • Spring & Spring Boot (13)
        • JSP & Servlet (1)
        • DB (4)
      • 웹 프로젝트 (77)
        • 웹 프로젝트 (22)
        • 🥨스낵몰 (3)
        • 👨‍👨‍👧‍👧소셜 가계부 (26)
        • 🌜꿈 일기장 (11)
        • 🔮포트폴리오 사이트 (11)
        • 🏃‍♂️팀 프로젝트: 일정관리 프로그램 (0)
        • 📈팀 프로젝트: AI기반 주식 분석 플랫폼 (0)
        • 😺Just Meow It: 조언 사이트 (2)
        • 📕Workly: 교대근무 다이어리 (1)
      • 앱 프로그래밍 (26)
        • Flutter (24)
        • Kotlin (2)
      • Problem Solving (166)
        • 백준 (52)
        • 프로그래머스 (79)
        • SWEA (29)
      • Computer Science (40)
        • 알고리즘 (14)
        • 컴퓨터 네트워크 (18)
        • 이산수학 (8)
      • Developer (47)
        • 후기 (4)
        • 자료정리 (4)
        • 취업 | 취준 (9)
        • SSAFY (1)
        • 웹개발 교육 프로그램 (9)
        • TIL (20)
  • 블로그 메뉴

    • 홈
    • Github
  • 공지사항

    • 프로그래밍 공부 중😊
  • 인기 글

  • 태그

    bfs
    Til
    ZeroCho
    SWEA
    컴퓨터네트워크
    리액트
    뉴렉처
    웹사이트
    파이썬
    React
    블로그 제작
    프로젝트
    d3
    공식문서
    클론 프로젝트
    AWS
    백준
    Next.js
    타입스크립트
    강의내용정리
    자바
    구현
    mysql
    포트폴리오
    프로그래머스
    플러터
    Jiraynor Programming
    자바스크립트
    spring boot
    알고리즘
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
[모던 자바스크립트 Deep Dive] 7장. 연산자
상단으로

티스토리툴바