8일차 주요 내용 정리
💡 7장 연산자
할당 연산자
- 할당 연산자(assignment operator)는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 할당 연산자는 좌항의 변수에 값을 할당하므로 값이 변하는 부수 효과가 있다.
할당 연산자 예 동일 표현 부수 효과 = x = 5 x = 5 O += x += 5 x = x + 5 O -= x -= 5 x = x - 5 O *= x *= 5 x = x * 5 O /= x /= 5 x = x / 5 O %= x %= 5 x = x % 5 O var x; x = 10; console.log(x); // 10 x += 5; // x = x + 5; console.log(x); // 15 x -= 5; // x = x - 5; console.log(x); // 10 x *= 5; // x = x * 5; console.log(x); // 50 x /= 5; // x = x / 5; console.log(x); // 10 x %= 5; // x = x % 5; console.log(x); // 0 var str = 'My name is '; // 문자열 연결 연산자 str += 'Lee'; // str = str + 'Lee'; console.log(str); // 'My name is Lee' - 문에는 표현식인 문과 표현식이 아닌 문이 있다. 할당문은 표현식인 문이다.
var x; // 할당문은 표현식인 문이다. console.log(x = 10); // 10 - 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다. 따라서 다음과 같이 할당문을 다른 변수에 할당할 수도 있다. 이러한 특징을 활용해 여러 변수에 동일한 값을 연쇄 할당할 수 있다.
var a, b, c; // 연쇄 할당. 오른쪽에서 왼쪽으로 진행 // 1. c = 0 : 0 으로 평가된다. // 2. b = 0 : 0 으로 평가된다. // 3. a = 0 : 0 으로 평가된다. a = b = c = 0; console.log(a, b, c); // 0 0 0
비교 연산자
- 비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 결과를 boolean 값으로 반환한다. if 문이나 for 문과 같은 제어문의 조건식에 주로 사용한다.
동등/일치 비교 연산자
- 동등 비교 연산자는 느슨한 비교를 한다. / 일치 비교 연산자는 엄격한 비교를 한다. 둘은 엄격성의 정도가 다르다.
비교 연산자 의미 사례 설명 부수 효과 == 동등 비교 x == y x와 y의 값이 같음 X === 일치 비교 x === y x와 y의 값과 타입이 같음 X ≠ 부동등 비교 x ≠ y x와 y의 값이 다름 X ≠= 불일치 비교 x ≠= y x와 y의 값과 타입이 다름 X - 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
// 동등 비교 5 == 5; // -> true // 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다. 5 == '5'; // -> true// 동등 비교. 결과를 예측하기 어렵다. '0' == ''; // -> false 0 == ''; // -> true 0 == '0'; // -> true false == 'false'; // -> false false == '0'; // -> true false == null; // -> false false == undefined; // -> false // 이처럼 동등 비교(==) 연산자는 예측하기 어려운 결과를 만들어낸다. // 따라서 동등 비교 연산자는 사용하지 않는 편이 좋다 // 대신 일치 비교(===) 연산자를 사용한다. - 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.
// 일치 비교 5 === 5; // -> true // 암묵적 타입 변환을 하지 않고 값을 비교한다. // 즉, 값과 타입이 모두 같은 경우만 true를 반환한다. 5 === '5'; // -> false// NaN은 자신과 일치하지 않는 유일한 값이다. NaN === NaN; // -> false
NaN은 자신과 일치하지 않는 유일한 값이다.
- 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN 을 사용한다.
// isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다. isNaN(NaN); // -> true isNaN(10); // -> false isNaN(1 + undefined); // -> true - 숫자 0도 주의하자. 자바스크립트에는 양의 0과 음의 0이 있는데 이들을 비교하면 true를 반환한다.
// 양의 0과 음의 0의 비교. 일치 비교 / 동등 비교 모두 결과는 true다. 0 === -0; // -> true 0 == -0; // -> true - 동등 비교 연산자와 일치 비교 연산자는 +0과 -0을 동일하다고 평가한다. 또 동일한 값인 NaN과 NaN을 비교하면 다른 값이라고 평가한다. ES6에서 도입된 Object.is 메서드는 다음과 같이 예측 가능한 정확한 비교 결과를 반환한다. 그 외에는 일치 비교 연산자(===)와 동일하게 동작한다.
-0 === +0; // -> true Object.is(-0, +0) // -> false NaN === NaN; // -> false Object.is(NaN,NaN); // -> true - 부동등 비교 연산자(≠)와 불일치 비교 연산자(≠=)는 각각 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.
// 부동등 비교 5 != 8; // -> true 5 != 5; // -> false 5 != '5'; // -> false // 불일치 비교 5 !== 8; // -> true 5 !== 5; // -> false 5 !== '5'; // -> true
대소 관계 비교 연산자
- 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 boolean 값을 반환한다.
대소 관계 비교 연산자 예제 설명 부수 효과 > x > y x 가 y 보다 크다 X < x < y x 가 y 보다 작다 X ≥ x ≥ y x 가 y 보다 크거나 같다 X ≤ x ≤ y x 가 y 보다 작거나 같다 X // 대소 관계 비교 5 > 0; // -> true 5 > 5; // -> false 5 >= 5; // -> true 5 <= 5; // -> true
프론트엔드 개발자