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

7장 연산자

학습 목표

• 7.1.2 - 증감연산자의 전위/ 후위 위치별 수행순서
• 7.1.3 문자열 연결 연산자의 암묵적 형변환, 7.3 - 동등비교연산자의 암묵적 형변환
• 7.4 - 복잡한 삼항 연산자 문제들
• 7.5 - 단축 평가로 if문 대체하기 예시 소개
• 7.11 , 7.12 - 연산자의 부수효과와 우선순위 코드로 이해하기
• 7.13 - 연산자의 결합 순서 코드로 이해하기

피연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다. (p 74)

• ‘하나 이상’이므로, 피연산자가 한 개여도 됨.
• 피연산자: 연산의 대상이 되는 값(표현식)이다. 따라서 반드시 값으로 평가될 수 있어야 한다.
• 피연산자도 표현식이며, 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.
• 연산자 표현식: 값으로 평가된 피연산자를 연산해 새로운 값을 만듬.

연산자 표현식 예시

// 산술 연산자
3 * 5; // 3도 표현식이며 5도 표현식, 3 * 5도 표현식이다.

// 문자열 연결 연산자
'Hi, ' + 'Ryan!'; // --> Hi, Ryan!

// 비교 연산자
2 > 4; // false

// 논리 연산자(AND, OR, NOT)
true && true; // --> true

// 타입 연산자
typeof obj1; // --> 'object' (obj1이라는 객체가 선언되어 있다고 가정)

• 연산자 표현식에서 피연산자를 ’명사'로, 연산자를 ’동사'로 생각하면 된다.

7.1 산술 연산자

7.1.1 이항 산술 연산자

• 이항 = binary 이므로, 숫자 타입의 값인 피연산자 2개를 산술 연산하여 평가되어 숫자 값을 생성.
• 부수 효과가 없다. 즉 피연산자의 값이 바뀌지 않는다. 산술 연산된 새로운 값만 만든다.
• 이항 산술 연산자의 종류: 덧셈, 뺄셈, 나눗셈, 곱셈, 나머지 연산자(+, -, /, *, %)

*7.1.2 단항 산술 연산자

부수 효과 있음: ++, —

부수 효과 없음: +, -

• 일부 단항 연산자는 부수효과를 가진다. 증감연산자(++, —)는 피연산자의 값을 변경시킨다!!
• +, - 의 단항 산술 연산자는 형변환, 또는 부호를 반전한 값을 반환하나 부수 효과는 없다. 즉 반환값만 다르고 원본(피연산자) 불변.

*증감 연산자의 전위 연산/ 후위 연산의 결과

let x = 3, result = 0;

// 선할당 후증가 -> 후위 증가 연산자(postfix increment operator)
result = x++;
// 1. 할당 먼저: result = 3
// 2. 그다음 증가: x = 4
console.log(result, x); // 3 4

// 선증가 후할당 -> 전위 증가 연산자(prefix increment operator)
result = ++x;
// 1. 증가 먼저: x = 5
// 2. 그다음 할당: result = 5
console.log(result, x); // 5 5

// 선할당 후감소 -> 후위 감소 연산자(prefix decrement operator)
result = x--;
// 1. 할당 먼저: result = 5
// 2. 그다음 감소: x = 4
console.log(result, x); // 5 4

// 선감소 후할당 -> 전위 감소 연산자(prefix decrement operator)
result = --x;
// 1. 감소 먼저: x = 3
// 2. 그다음 할당: result = 3
console.log(result, x); // 3 3

• 전위(prefix) : 먼저 피연산자의 값부터 증가 또는 감소시키고 나서 다른 연산을 수행.
• 후위(postfix) : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가 또는 감소시킴.

*첨언: for문의 증감문으로 ++i 하던 i++하던 반복횟수는 같음. 증감 외에는 다른 연산이 없기 때문에!

단항 산술 연산자 +, - 의 형변환

• 숫자가 아닌 타입을 숫자 타입으로 형변환 시킨다.
• 불리언 값도 형변환 시킨다. 자바스크립트에서 true = 1, false = 0 이기 때문에 가능.

// 단항 산술 연산자의 형변환
// + 연산자
let x = '1';
console.log(+x); // --> 1
console.log(x);  // --> '1' (부수효과 없으므로 원본(피연산자) 불변)
+10;    // 10
+(-10); // 10
+'hi'; // NaN

// - 연산자
// 부호 반전(음수 -> 양수)
-(-10); // 10
// 형변환
-'5'; // -5
-'hi'; // NaN

// 불리언 값의 형변환
-true  // -1
+true  // 1
-false //-0
+false // 0

// 응용: map 메서드 활용하기
// map 메서드:
// 배열 요소 갯수만큼 반복하며 배열의 각 요소들마다
// 매개변수로 받은 함수를 실행하여 새로운 배열을 반환.

let strArr = ['1', '2', '3'];
let numArr = strArr.map(item => +item);
console.log(numArr); // --> [1, 2, 3]
console.log(strArr); // --> ['1', '2', '3'] (부수효과 없으므로 원본(피연산자) 불변)

7.2 할당 연산자

• 좌항의 변수의 기존 값에 우항의 피연산자 평가 결과를 할당.
• 일반적으로 반복문 내에서 반복시마다 연산 결과를 누적시키기 위해 사용한다.(ex: +=)

할당 연산자의 연쇄 할당

let a, b, c;
a = b = c = 0;
console.log(a, b, c); // 0 0 0

let x = y = 10;
console.log(x, y); // 10 10

7.3 비교 연산자

7.3.1 동등/ 일치 비교 연산자

• 동등 비교 == : 값만 같은지 비교
• 일치 비교 === : 값과 타입까지 같은지 비교
• 부동등 비교 != : 값만 다른지 비교
• 불일치 비교 !== : 값과 타입까지 다른지 비교

5 == '5'  // true - 숫자 5와 문자 5가 같다고 판정해버린다.
5 === '5' // false
5 != '5'  // false - 숫자 5와 문자 5가 다르지 않다고 판정해버린다.
5 !== '5' // true

• 명확한 비교를 위해 값과 타입까지 비교하는 일치 비교 연산자 === 또는 불일치 비교 연산자 !== 를 사용하자.

동등 비교 연산자의 암묵적 형변환

동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 면저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. (p 81)

// 암묵적 형변환되는 여러 안티패턴들 예시
5 == '5';  // 5 == 5 이므로 true
'0' == ''; // true == false 이므로 false 반환.
0 == '';   // false == false 이므로 true 반환.
0 == '0';  // 0 == 0 이므로 true 반환.
false == 'false'; // false == true 이므로 false 반환.
false == '0'; // true (왜..?)
false == null; // false (왜..?)
false == undefined; // false (왜..?)

• 이해할 수 없는 비교 결과가 되기 때문에 값과 타입을 동시에 비교하는 일치/ 불일치 비교 연산자를 사용하여야 한다. 일치 비교(===) 연산자는 암묵적 형변환을 하지 않는다.

빌트인 함수 isNaN

• NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 비교연산자를 사용하여 NaN인지 여부를 판별할 수 없다.
• 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용하여 불린값을 반환받아야 한다.

NaN === NaN // false
undefined === undefined // true
null === null // true

isNaN(NaN); // true
let x = 10;
isNaN(x);   // false
isNaN(100); // false

7.4 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정한다.
• 부수 효과는 없다. (부수 효과: 피연산자의 값을 변경시키는 것)
• 기본 형태:
  • 조건식 ? true시 반환값 : false시 반환값

// 삼항 연산자의 기본 형태.(중첩 x)
// ? 이전까지의 부분이 if문에서의 조건식과 같다.
// : 을 기준으로, 왼쪽은 true일 경우의 반환값, 오른쪽은 false일 경우의 반환값이 된다.

const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt';

중첩 삼항 연산자 예제

js-playground/중첩삼항연산자.html at master · ryan-kim-dev/js-playground

7.5 논리 연산자

드 모르간 법칙으로 표현식 단순화하기

// x가 아니면서 y도 아닌 것 -> 합집합의 여집합
!(x || y) === (!x && !y)
// x가 아니거나 y가 아닌 것 -> x와 y의 교집합을 제외한 나머지 전부
!(x && y) === (!x || !y)

7.6 쉼표 연산자

• 평가 순서: 왼쪽 → 오른쪽 순서로 차례대로 피연산자를 평가.
• 반환값: 마지막 피연산자의 평가 결과

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

7.7 그룹 연산자

• 동작: 소괄호를 사용하여 피연산자를 감싼 그룹의 표현식을 가장 먼저 평가. (수학하고 똑같다.)
• 그룹 연산자의 연산자 우선순위가 가장 높기 때문에 연산자 간의 우선순위를 조절(먼저 계산해야 될걸 먼저 계산하도록)하기 위해 사용된다.

5 * 2 + 1;   // 11
5 * (2 + 1); // 15 

7.8 typeof 연산자

• 반환값: 피연산자의 데이터 타입을 문자열로 반환한다.
• 피연산자의 자료형과 정확하게 일치하지는 않는 경우가 있다. (ex: 배열, null)
• 7가지 문자열 중 하나를 반환한다.
  • ‘string’
  • ‘number’
  • ‘boolean’
  • ‘undefined’
  • ‘symbol’
  • ‘object’ → typeof null; 도 ‘object’를 반환함.
  • ‘function’

7.9 지수(exponent) 연산자

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

3 ** 3; // 27
2 ** 2.5; // 5.65685424949238
11 ** 0; // 1 (모든 수의 0제곱은 1이다.)
2 ** -2; // 0.25

7.10 그 외의 연산자

• ?. : 옵셔널 체이닝 연산자(9.4.2절 참조)
• ?? : null 병합 연산자(9.4.3절 참조)
• delete 연산자: 프로퍼티 삭제(10.8절 참조)
• new 연산자 : 생성자 함수를 호출하여 인스턴스를 생성할 때 인스턴스명 앞에 붙여서 인스턴스 생성.(17.2.6절 참조)
• instanceof 연산자: 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별.(19.10절 참조)
• in 연산자: 프로퍼티 존재 확인.

7.11 연산자의 부수 효과

• 부수 효과란?: 피연산자의 값을 변경함을 뜻함.
• 대부분의 연산자는 부수 효과가 없으나, 할당 연산자, 증감 연산자와 delete 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.

증감 연산자의 부수효과

#*7.1.2-단항-산술-연산자

7.12 연산자 우선순위

• 최우선 순위는 그룹 연산자이다. 그리고 (거의)마지막 순위는 할당 연산자(15순위)이다.
• 엄밀히 따지면 가장 마지막 우선순위는 , 연산자(16순위)이지만, 쉽게 기억하기 위해서 () 그룹 연산자가 최우선이고, 모든 연산이 끝난 후에 = += -= 할당 연산자가 마지막으로 평가된다고 생각하면 외우기 쉽다.
• 모르겠으면 일단 무조건 먼저 실행되어야 할 내용을 소괄호로 묶어라.
• 수학과의 공통점: 곱셈, 나눗셈(+ 나머지) 연산을 먼저 평가 후 덧셈, 뺄셈 연산을 평가한 후 좌항과 우항의 부등호 비교(평가).

// 3 ** 1 + 2를 27이 되도록 만들려면 어떻게 할까요?
3 ** 1 + 2;

// num에 할당되는 값은 무엇일까요?
let num = 1 + 2 * 3 > 6;

7.13 연산자 결합 순서

• 결합 순서란? 좌항, 우항 중 어느쪽부터 평가를 수행할 것인지의 순서.
• 좌항 → 우항 : 사칙연산, 나머지, 부등호 크기 비교, 논리연산 중 and와 or, in 연산자 등
• 우항 → 좌항 : 증감, 할당, typeof, delete, 논리연산자 중 not, 삼항연산자 등

// 방향: ->
1 + 2 < 15 - 1 && 55 % 5 === 0; // true
// 일치 비교: 10순위, and: 12순위, or: 13순위

// 방향: <-
typeof arr1;
delete user.age;
++x;
--x;