- 연산자
언어마다 꼭 포함하고 있는 개념인지라, 당연히 잘 알거라 생각하고 공부했는데 미처 몰랐던 부분이 적지 않았다. 자바스크립트만 가지고 있는 특징이 특히 개발을 해나갈 때 유용하면서도 핵심적일 것 같았다. 아래 그 내용을 정리한다.
1) 연산자의 정의
하나 이상의 표현식(값으로 평가할 수 있는 문)을 대상으로 연산을 수행하여 값을 만드는 것이다. 연산의 대상은 피연산자라 칭한다. 피연산자라는 용어 속에 이미 연산자와의 관계성이 내포되어있다. 따라서 피연산자는 연산자와의 관계성에서 갖는 그 필요성에 의해 값으로 평가되어야 한다는 속성을 갖는다.
2) 연산자의 종류
1. 산술연산자
- 이항 산술 연산자 : 2개의 피연산자를 연산하여 값을 만듦 ex. +, -, *, /(나눗셈), %(나머지)
- 단항 산술 연산자 : 1개의 피연산자를 연산하여 값을 만드는데, 이항 산술 연산자와 달리 피연산자의 값을 변경하는 부수 효과가 있음 ex. ++(증가), --(감소), +, -(양수->음수, 음수->양수로 반전)
* ++(증가), --(감소)는 연산자 위치에 따라 의미가 달라진다.
ex. 피연산자 앞에 위치 -> 피연산자의 값부터 처리 / 피연산자 뒤에 위치 -> 다른 연산 수행 후 피연산자 값 처리
* 숫자 타입이 아닌데 피연산자에 +, - 기호를 사용하면 숫자 타입으로 변환하여 반환된다.
- 문자열 연결 연산자 : 암묵적 타입 변환(타입 강제 변환) - 산술 연산자인 + 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작하는 특징을 갖는다. 산술 연산자일 때는 true나 false, 그리고 null은 각각 1, 0, 1으로 자동 타입 변환된다. undefined는 숫자로 타입 변환되지 않는다.
2. 할당 연산자
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수로 할당하는데, 이 역시도 변수 값이 변한다는 부수 효과를 가진다. ex. =, +=, -=, *=, /=, %= (+=의 예로, " 'x += 5' = 'x = x+5' "이다.)
* 할당문은 값으로 평가될 수 있는 표현식인 문이다.
3. 비교 연산자
결과 값을 불리언 값으로 반환하는 연산자이다.
- 동등/일치 비교 연산자 : 동등 비교와 일치 비교 연산자의 차이점은 그 엄격성에 있다. 동등 비교(==) 연산자는 먼저 암묵적 타입 변환을 통해 좌, 우항의 타입을 일치시켜서 같은 값인지 비교한다. 따라서 결과를 예측하기 어렵다는 단점을 가지므로 사용을 권하지 않는다. 이에 반해 일치 비교 연산자(===)는 값, 타입이 모두 같은 경우에 한해서만 true를 반환하기 때문에 값 예측이 쉬우며 안전하다. 따라서 일치 비교 연산자를 사용하는 것이 좋다.
ex. 5 == '5'; // 동등 비교, 결과는 true
5 === '5'; // 일치 비교, 결과는 false
* NaN은 자기 자신과 비교할 수 없다. 따라서 다음과 같이 쓴다.
ex. NaN === NaN; // false 출력됨
isNaN(NaN); // true 출력됨 -> isNaN 함수가 매개변수의 값이 NaN인지 확인하여 출력한다.
* 숫자 0은 양과 음의 0을 비교했을 때 true를 출력한다.
※ 다만, ES6에서 도입된 Object.is 메서드는 NaN의 비교 및 숫자 0의 양과 음 비교 결과가 예측 가능한 형태로 출력된다.
ex. Object.is(-0, +0); // false 출력됨
Object.is(NaN, NaN); // true 출력됨
- 대소 관계 비교 연산자 : 피연산자의 크기를 비교하여 불리언 값을 반환한다.
4. 삼항 조건 연산자
자바스크립트의 유일한 삼항 조건 연산자다. 조건식을 평가하여, 결과에 따라 해당하는 값을 반환한다.
형식은 '조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값'이다.
ex. var result = score >= 60 ? 'pass' : 'fail'; // score의 값이 60이 이상이면 pass, 60 이상이 아니라면 fail 값을 변수 result에 넣는다.
5. 논리 연산자
||(or), &&(and), !(not)의 연산자다. ||와 && 연산자는 언제나 두 개의 피연산자 중 하나를 반환하지만, !이라는 논리 부정 연산자는 언제나 불리언 값을 반환한다.
* 논리 연산자는 가독성이 좋지 않을 수 있어 드 모르간의 법칙을 사용하면 좀 더 좋은 표현식으로 변환이 가능하다.
6. 쉼표 연산자
쉼표(,) 연산자는 가장 왼쪽의 피연산자부터 차례로 평가하여 결과를 반환한다.
7. 그룹 연산자
소괄호( '()' )로 피연산자를 감싸는 연산자다. 우선순위를 조절하는 기능을 갖는다. 우선순위에서 만큼은 연산자 중 순위가 가장 높다.
8. type of 연산자
피연산자의 데이터 타입을 문자열로 반환하는 연산자이다. 다만 반환하는 문자열이 데이터 타입과 늘 일치하지는 않으며, 선언하지 않은 식별자를 typeof 연산자로 연산했을 때에는 undefined를 반환한다. 또한, null 값의 경우는 타입으로 object를 반환한다는 버그가 있다. 따라서 null 타입을 확인할 때에는 typeof 연산자 대신 일치 연산자 사용을 권한다.
9. 지수 연산자
좌항의 피연산자가 밑(base)가 되며, 우항의 피연산자가 지수(exponent)가 된다. Math.pow 메서드와 그 기능이 같지만 가독성이 보다 좋다는 장점을 갖는다. 또한 이항 연산자 중에서는 우선순위가 가장 높다.
* 연산자의 우선순위 같은 경우는 우선순위를 모두 외우려고 하기 보다는, 그룹 연산자로 우선순위를 조절하는 방법을 사용하기를 권한다.
참고 : 도서 <모던 자바스크립트 Deep Dive>
'TIL' 카테고리의 다른 글
<CSS> <a>태그 밑줄없애기, 색상 변경하기 (0) | 2021.12.17 |
---|---|
<CSS> 미디어 쿼리 (0) | 2021.12.16 |
<자바스크립트 Javascript> 데이터 타입 (2) | 2021.12.14 |
<자바스크립트 Javascript> 자주 사용되는 용어 알기 (0) | 2021.12.13 |
<CSS> 페이지 전환 효과 (0) | 2021.12.12 |