제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.
7장 연산자
- 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이 때 연산의 대상을 피연산자(operand)라 한다.
- 피연산자는 값으로 평가될 수 있는 표현식이어야 하며, 연산자의 표현식(피연산자 + 연산자)도 표현식이다.
// 산술 연산자
5 * 4 //
// 문자열 연결 연산자
"My name is " + "Lee"
// 할당 연산자
color = "red"
// 비교 연산자
3 > 5 //
// 논리 연산자
true && false
// 타입 연산자
typeof "Hi"7.1 산술 연산자
- 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우 NaN을 반환한다.
- 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.
7.1.1 이항 산술 연산자
- 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
- 피연산자의 값을 변경하는 부수 효과(side effect)가 없다. 즉, 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다.
7.1.2 단항 산술 연산자
- 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
- 이항 산술 연산자와 달리 부수효과가 있다. (암묵적 할당이 이뤄짐)
7.1.3 문자열 연결 연산자
-
- 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
- 자바스크립트는 암묵적으로 타입이 자동 변환된다. (true ⇒ 1, false ⇒ 0 등)
- 암묵적 타입 변환(implicit coercion) 혹은 타입 강제 변환(type coercion) 이라고도 한다.
7.2 할당 연산자
- 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
- 할당 연산자는 변수에 값을 할당하므로 변수의 값이 변하는 부수 효과가 있다.
- 할당문은 값으로 평가되지 않을 것 처럼 보이지만, 값으로 평가되는 표현식인 문으로 할당된 값으로 평가된다.
Comment : 얼핏 보기엔 문처럼 보여서 표현식이 아닌 것으로 생각했지만 의외로 표현식인 문이었다. 헷갈리지 않도록 할 것.
7.3 비교 연산자
- 비교 연산자는 좌항, 우항 피연산자를 비교한 후 불리언 값으로 반환하는 역할을 한다.
7.3.1 동등/일치 비교 연산자
- 동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는 지 비교해 불리언 값을 반환한다.
- 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.
- **동등 비교 연산자(==)**는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
- 즉 타입이 다르더라도 암묵적 타입 변환 후 같은 값일 수 있다면 true를 반환한다.
- 편리한 경우도 있지만 결과를 예측하기 어렵고 실수하기 쉽다.
- 동등 비교 연산자 대신 일치 비교 연산자(===) 사용이 권장된다.
Comment: 값과 타입 모두를 비교하는 것이 일치 비교 연산자이다.
- 일치 비교 연산자(===)는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한해 true를 반환한다.
- 일치 비교 연산자에서 NaN을 검사할 때는 주의해야 한다. NaN은 자신과 일치하지 않는 유일한 값이므로 (NaN === NaN을 검사하면 false가 나온다.) 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.
- 자바스크립트에서는 양의 0과 음의 0이 있는데 이들을 비교하면 true가 반환된다. Comments : 양의 0과 음의 0이라는 개념이 있다는 사실은 처음 알았다. NaN도 많이 본 경우는 아니지만 정작 필요할 때 까먹을 수 있으므로 기억해두자.
Object.is 메서드
- ES6에서 도입된 Object.is 메서드는 위에서 언급한 일치 비교자의 연산자의 맹점을 극복해 나온 메서드이다.
console.log(-0 === +0) // true
console.log(Object.is(-0, +0)) // false
console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true;7.3.2 대소 관계 비교 연산자
7.4 삼항 조건 연산자
- 삼항 조건 연산자는 조건식의 평가 결과에 따라 반환된 값을 결정한다.
- 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.
var result = score >= 60 ? "pass" : "fail"- 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, false이면 세 번째 피연산자를 반환한다.
- 물음표 앞의 첫 번째 피연산자는 조건식 (불리언 값으로 평가)은 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다.
- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만, if…else 문은 값처럼 사용할 수 없다.
Comment : 이 때문에 값을 바로 할당하는 식으로 삼항연산자를 사용하는 경우가 많다.
- 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.
7.5 논리 연산자
- 논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.
드 모르간의 법칙
- 논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 한눈에 이해하기 어려울 때가 있다. 이러한 경우 드 모르간의 법칙을 활용하면 복잡한 표현식을 더 가독성 좋은 표현식으로 변환할 수 있다.
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)7.6 쉼표 연산자
- 쉼표 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
7.7 그룹 연산자
- 소괄호(’()‘)로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. (연산 우선순위 조절 가능하며 그룹 연산자 우선순위가 가장 높다).
7.8 typeof 연산자
- 피연산자의 데이터 타입을 문자열로 반환한다. typeof 연산자는 7가지 문자열 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환한다.
- 단, “null”은 없기 때문에 typeof null은 “object”를 반환한다.
- 선언하지 않은 식별자를 typeof 연산자로 연산해보면 ReferenceError가 아닌 “undefined”를 반환한다.
7.9 지수 연산자
- ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.
- Math.pow를 통해서도 표현이 가능하며 지수 연산자 이전에는 이 방식을 사용했다.
2 ** 2 // 2의 2제곱
2 ** 2.5 // 2의 2.5제곱
2 ** 0 // 2의 0제곱
2 ** -2 // 2의 -2 제곱
Math.pow(2, 2)
Math.pow(2, 2.5)
Math.pow(2, 0)
Math.pow(2, -2)- 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.
;(-5) **
(2(
// SyntaxError
-5,
) **
2)- 지수 연산자는 할당 연산자와 함께 사용할 수 있으며, 이항 연산자 중에서 우선 순위가 가장 높다.
7.10 그 외의 연산자
- ?.(Optional chaining, 옵셔널 체이닝 연산자) : 하단 내용 참조
- ?? (Nullish coalescing operator, 널 병합 연산자) : 하단 내용 참조
- delete : 객체의 속성을 제거한다.
- new : 사용자 정의 객체 타입 또는 재아 객체 타입의 인스턴스를 생성한다.
- instanceof : 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별한다.
- in : 명시된 속성이 명시된 객체에 존재하면 true를 반환한다.
옵셔널 체이닝 연산자 (?.)
- 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.
- ?. 연산자는 .와 유사하게 작동하지만, 참조가 nullish(null 또는 undefined)하다면, 에러가 발생하는 대신 표현식의 리턴 값을 undefined로 한다.
- 참조에 대한 직접 접근에 대한 에러를 방지함으로써 에러 안정성을 높여준다.
널 병합 연산자 (??)
-
왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
-
논리 연산자 OR (||)이 falsy 값에 해당할 경우 오른쪽 피연산자를 반환하는 것에 반해, ” 또는 0 같은 falsy 값을 포함하고자 한다면 OR 연산자 대신 널 병합 연사자를 사용할 수 있다.
7.11 연산자의 부수 효과
- 다른 코드에 영향을 주는 부수 효과를 가진 연산자에는 할당 연산자(=), 증가/감소 연산자(++/—), delete 연산자가 있다.
7.12 연산자 우선순위
- 책 표 참조 (p.91)
- 전부 외우기는 어려우므로 우선순위가 가장 높은 그룹 연산자를 사용해 우선 순위를 명시적으로 조절하는 것이 권장된다.
Comment : 모든 것을 외우려고 할 필요없다. 순서가 원하는 대로 계산되지 않으면 우선 그룹 연산자를 사용하자.
7.13 연산자 결합 순서
- 연산자의 어느 쪽부터 평가를 수행할 것인지를 나타내는 순서를 말한다.
- 책 표 참조 (p.92)