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

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

7장 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피대상자라 한다.

7.1 산술 연산자

수학적 계산을 수행해 새로운 숫자 값을 만들고 연산이 불가능할 경우, NaN을 반환한다. 

7.1.1 이항 산술 연산자( +, -, / )

이항 산술 연산자는 2개의 피연산자를 연산하여 새로운 값을 만든다. 

7.1.2 단항 산술 연산자( ++, -- )

단항 산술 연산자는 1개의 피연산자를 산술 하여 값을 만드는데 피연산자의 값을 변경하는 부수 효과가 있다. 1개의 피연산자를 대상으로 연산하는 것이니 결괏값을 해당 피연산자에 암묵적 할당(재할당) 할 수밖에 없다. 증가/감소(++/--) 연산자는  피연산자 앞이나 뒤에 붙일 수 있고, 이 위치에 따라 피연자의 값을 연산하는 시점이 달라진다.
숫자 타입이 아닌 피연산자에 +나 - 단항 연산자를 사용하면 숫자 타입으로 변환한 값을 생성해서 반환한다. 재할당 되는 것은 아니다.

7.1.3 문자열 연결 연산자( '1' + 1 )

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 결과를 문자열로 반환한다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데 1 + true의 경우 true를 숫자 타입인 1로 강제 변환 후 연산을 수행한다. 이를 암묵적 타입변환 또는 타입 강제 변환이라고 한다.

7.2 할당 연산자( =, +=, /=, *= )

할당연산자는 대입연산자( = ) 기호가 포함된 모든 연산자를 말한다. 피연산자의 평가(실행) 결과를 좌항에 있는 변수에 할당하며, 결과적으로 값이 기존 변수에 재할당 된다. 할당문도 '할당된 값'이라는 결과값이 해당 변수를 통해 평가(실행)되기 때문에 표현식이다.

7.3 비교 연산자

좌항과 우항의 피연산자를 비교해 결과를 불리언 값으로 반환한다. 

7.3.1 동등/일치 비교 연산자( ==, ===, !=, !== )

동등 비교 연산자( ==, != )는 좌항에 대해 우항을 암묵적 타입 변환을 통해 타입을 강제로 일치시킨 후 값을 비교한다. 일치 비교 연산자( ===, !== )는 좌항과 우항의 피연산자가 타입도 같고 값도 같은지 비교하기 때문에 조건문에서 값을 비교할 때는 일치 비교 연산자를 사용해야 한다.

NaN은 자신과 일치하지 않는 유일한 값으로 Number.isNaN 함수를 사용해서 확인해야 한다.
※ isNaN vs Number.isNaN ?
isNaN은 undefined나 빈 객체 {} 도 true를 반환하는 문제가 있다. ES6부터 도입된 Number.isNaN이나 Object.is 함수를 통해 정확한 확인이 가능하다.

7.3.2 대소 관계 비교 연산자( >, <, >=, <= )

피연산자 간 크기를 비교하여 불리언 값을 반환한다. 

7.4 삼항 조건 연산자

조건문의 한 가지 형태로 React는 if문 사용이 안되기 때문에 삼항 연산자를 필수로 활용할 수 있어야 한다. 조건식의 평가(실행) 결과가 불리언(true나 false)이 아니면 불리언 값으로 암묵적 타입 변환한다. if ... else 문은 조건문으로 표현식이 아니다. 따라서 조건식 부분에 if .. else 같은 조건문을 넣을 수 없다. 삼항 연산자는 조건식의 결과로 값이 반환되기 때문에 이 자체로 표현식인 문이다(!) 따라서 값을 할당할 수 있는 곳에는 삼항 연산자를 할당할 수 있어 매우 유용하다. 단, 조건에 따라 수행해야 할 문이 여러개라면 if ... else 문의 가독성이 더 좋다.

조건식 ? 참일 경우 반환할 값 : false일 때 반환할 값

console.log( (3 < 0) ? "0이 크다" : "3이 크다" )

7.5 논리 연산자( ||, &&, ! )

논리 연산자는 좌항과 우항의 피연산자를 비교해 불리언 값을 반환한다. 논리 부정 연산자( ! )의 경우 피연산자가 불리언 값이 아니면 falsy 값은 false, 그 외에는 true인 불리언 타입으로 암묵적 타입 변환 후 값을 반환한다. 논리합( || ) 또는 논리곱( && )은 결과값이 불리언 값이 아닐 수도 있다.

논리곱( && ) 연산자는 두 항이 모두 true일 때만 true를 반환한다.
true && true;

논리합( || ) 연산자는 두 항 중 하나라도 true일 때 true를 반환한다.
true || false;
false || true;

논리 부정( ! ) 연산자는 불리언값을 반대로 반환한다.
!false;

!"good" // false

'Cat' && 'Dog'; // 'Dog'

※ falsy 값이란?
 : 자바스크립트에서 문맥상 false로 평가하는 값이다. null, undefined, false, NaN, "", 0, -0, 0n 등이 있다.
※ 드모르간의 법칙이란?
 : !( x || y ) === ( !x && !y ) 양쪽이 같다는 법칙으로 벤다이어그램을 직접 그려가며 해보면 눈으로도 확인할 수 있다.
  논리 부정( ! ) 연산자가 괄호 밖으로 나오면 괄호 내 각 항에서는 제거되고 피연산자 사이 논리곱( && )이나 논리합( || )이 반대가 된다.

7.6 쉼표 연산자( , )

피연산자를 왼쪽부터 차례대로 평가하고 결과는 마지막 피연산자에 대해서만 반환한다. 정재남 님이 스터디 영상에서 좋지 않은 코드니까 쓰지 말라셨다ㅋㅋ 여러 변수를 할당하는 목적으로 쓸 수도 있겠지만 특별한 사항이 아니면 변수는 선언과 동시에 할당하는 게 가장 좋고, 마지막 변수를 반환할 거면 굳이 이렇게 쓸 이유가 없다.

var x, y, z;

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

7.7 그룹 연산자( ( ) )

연산자 중 우선순위가 가장 높다. 나눗셈, 곱셈에서 괄호를 쓰냐 안 쓰냐에 따라 결과가 다른 것처럼 먼저 연산해야 할 부분은 괄호로 묶어 주면 된다. 

7.8 typeof 연산자

데이터 타입을 문자열로 반환한다. null 값의 경우 object를 반환하는 오류가 있다. null이 할당된 변수와 비교 시 일치 연산자( === )를 사용해야 한다. 배열도 object를 반환하기 때문에 Array.isArray()를 통해 타입을 확인하는 게 정확하다.

7.9 지수 연산자( ** )

ES7에서 도입된 것으로 거듭제곱을 계산할 때 기존에는 Math.pow(값, 지수)의 형태로 사용했던 것을 간단하게 표현할 수 있어 가독성이 좋다. 음수의 경우는 기호와 값을 괄호로 묶어서 사용해야 한다.

5 ** 2
(-5) ** 2

// 25

7.10 그 외의 연산자

?. 옵셔널 체이닝 연산자. 9장에서 상세하게 나오는데 React에서 자주 사용한다. delete 연산자. 10장에서 소개된다.

7.11 연산자의 부수 효과

할당 연산자( = ) , 증가/감소 연산자( ++ / -- ), delete 연산자는 피연산자의 값을 변경하거나 객체의 프로퍼티를 삭제하는 등 변수나 객체의 값에 영향을 준다.

7.12 연산자 우선순위

여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행 되는 순서가 있는데 우선적으로 연산해야 할 부분을 괄호()로 묶는 것을 권장한다.

정리

정재남 님이 스터디 영상에서 for 문의 증감식에 단항 산술 연산자 ++i 와 i++ 를 대입해 보시는데 관습적으로 i++를 사용하다 보니 깊게 생각해 본 적이 없어서 그런가 둘 다 같은 결과인 게 좀 신기했다. 변수에 따로 연산해서 콘솔로 결과를 보여줄 때는 위치에 따라 다르다 보니 당연히 for문에서도 결과가 달라진다고 생각했다.

삼항연산자는 과거 javascript를 처음 배울 때 가독성이 좋지 않으니 쓰지 말라고 강사 선생님이 말씀하셨는데 지금 React를 공부하다 보니 삼항연산자만큼 중요한 게 없다;; 아마 단계에 따라 추가적으로 알려주시려고 하지 않았나 싶긴 한데 당시에 뭣도 모르고 삼항연산자는 가독성이 안 좋으니 쓰지 말라고 블로깅 했던 걸 생각하면...

그 외 isNaN과 Number.isNaN이 별개의 함수로 기억해둬야 할 것 같고, 옵셔널 체이닝이 등장하는데 마찬가지 React에서 많이 쓰이기 때문에 9장에서 집중해서 봐야 할 것 같다.