# 연산자(Operator)란?
연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 '피연산자'라 한다.
피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
1. 산술 연산자
산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다 .산술 연산이 불가능한 경우 NaN을 반환한다.
1.1 이항 산술 연산자(Arithmetic operators)
- + (더하기)
- - (빼기)
- * (곱하기)
- / (나누기)
- % (나머지)
- ** (거듭제곱)
- + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열로 반환된다. (암묵적 타입 변환)
1.2 단항 산술 연산(Unary Operators)
- ++ (증가)
- -- (감소)
- 피연산자 앞에 증가/감소 연산자가 위치하면 먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산을 수행한다.
- 피연산자 뒤에 증가/감소 연산자가 위치하면 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소 시킨다.
2. 할당 연산자(Assignment operators)
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
- =
- +=
- -=
- *=
- /=
- %=
예를들어
x += 5 // x = x + 5
3. 비교 연산자(Comparison operators)
좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
3.1 동등/일치 비교 연산자(Equality operators)
- == (동등비교)
- === ✨(일치비교)
- != (부동등비교)
- !== ✨(불일치비교)
- 동등 비교 연산자는 비교적 느슨한 비교를 일치 비교 연산자는 엄격한 비교를 한다.
- 피연산자가 같은 값으로 평가되는지 빅해 불리언값을 반환한다.
- 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치 시킨 후 같은 값인지 비교한다. 따라서 타입이 다르더라도 true를 반환하는 경우가 생긴다.
- 일치 비교 연산자는 좌항과 우항의 피연산자의 타입과 값이 같은 경우에 true를 반환한다. 즉, 암묵적 타입 변환이 일어나지 않고 비교한다.
- 이때, NaN은 자신과 일치하지 않는 유일한 값이기 때문에 비교할 때 빌트인 함수 isNaN을 사용해야 한다.
3.2 대소 관계 비교 연산자 (Relational operators)
- >
- <
- >=
- <=
- 피연산자의 크기를 비교하여 불리언 값을 반환한다.
4. 삼항 조건 연산자(Ternary operators)
- 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 ✨
- 조건식의 평가 결과에 따라 반환할 값을 결정한다.
- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있다. 즉, 값으로 평가할 수 있는 표현식 문이다.
5. 논리 연산자(Logical operators)
- || 논리합(OR)
- && 논리곱(AND)
- ! 부정(NOT)
- 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 피연산자가 불리언 값이 아니여도 암묵적 타입 변환에 의해 불리언값으로 변환된다.
6. typeof 연산자
- 피연산자의 데이터 타입을 문자열로 반환한다.
- null 타입은 object로 반환해 typeof 연산자가 아닌 일치 연산자(===)를 사용한다.
typeof ' ' // 'string'
typeof 1 // 'number'
typeof NaN // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof new Date() // 'object'
typeof /test/gi // 'object'
typeof function() {} // 'function'
7. 타입 변환이란?
자바스크립트의 모든 값은 타입을 가진다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 도 있고 개발자의 의도와 상관없이 자동으로 변환되기도 한다. 따라서 자신이 작성한 코드에서 암묵적으로 타입 변환이 발생하는지, 발생한다면 어떤 타입의 어떤 값으로 변환되는지, 그리고 타입 변환된 값으로 표현식이 어떻게 평가될 것인지 예측 할 수 있어야한다.
8. 암묵적 타입 변환
개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
암묵적 타입의 변환은 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동변환한다.
8.1 문자열
- 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열이 아닌 것을 문자열 타입으로 자동 변환한다.
- 모든 타입을 문자열 타입으로 변환하지만 symbol 타입은 타입에러가 발생한다.
8.2 숫자
- 자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 것을 숫자타입으로 자동 변환한다.
- 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식 평가 결과는 NaN이 된다.
- 비교 연산자는 불리언 값을 만든다. 이 때 비교 연산자는 피연산자의 크기를 비교하므로 모든 피연산자는 숫자 타입이어야한다. 이 또한 암묵적으로 타입 변환이 이루어 진다.
// 산술연산자
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
// 비교연산자
'1' > 0 // true
- + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.
- symbol 타입은 타입에러가 발생한다.
- 변환되지 않아 NaN가 반환되는 값들은 주의하자.
// 문자열
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN
// 불리언
+true // 1
+false // 0
// null, undefined
+null // 0
+undefined // NaN
// 객체타입
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN
8.3 불리언
- 조건식은 불리언 값, 즉 참과 거짓으로 평가되어야 하는 표현식이다.
- 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분한다.
- 조건식과 같이 불리언 값으로 평가되어야 하는 표현식에서는 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.
- Falsy 값
- 0
- -0
- ' '(빈 문자열)
- false
- undefined
- null
- NaN
- Falsy 값 이외의 모든 값은 모두 Truthy 값이다.
- Truthy 값, Falsy 값을 판별하는 함수 → isFalsy
9. 명시적 타입 변환
개발자의 의도에 따라 다른 타입으로 변환할 수 있다.
타입을 변경하는 방법은 다양한데 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출, 빌트인 메서드 사용, 암묵적 타입 변환을 이용하는 방법이 있다.
9.1 문자열
- String 생성자 함수를 new 연산자 없이 호출
- toString()메서드 사용
- 문자열 연결 연산자 이용
// String 생성자 함수를 new 연산자 없이 호출
String(1) // '1'
String(true) // 'true'
// toString() 메서드 사용
(1).toString() // '1'
(true).toString() // 'true'
// 문자열 연결 연산자 이용
1 + '' // '1'
true + '' // 'true'
9.2 숫자
- Number 생성자 함수를 new 연산자 없이 호출
- parseInt, parseFloat 함수 사용 (문자열만 숫자 타입으로 변환가능)
- + 단항 산술 연산자 이용
- * 산술 연산자 이용
// Number 생성자 함수를 new 연산자 없이 호출
Number('0') // 0
Number(true) // 1
// parseInt, parseFloat 함수 사용 (문자열만 숫자 타입으로 변환가능)
parseInt('0') // 0
parseFloat('10.53') // 10.53
// + 단항 산술 연산자 이용
+'0' // 0
+true // 1
// * 산술 연산자 이용
'0' * 1 // 0
true * 1 // 1
9.3 불리언
- boolean 생성자 함수를 new 없이 호출
- ! 부정 논리 연산자를 두 번 사용
// Boolean 생성자 함수를 new 없이 호출
Boolean('') // false
Boolean(0) // false
Boolean(null) // false
// ! 부정 논리 연산자를 두 번 사용
!!'x' // true
!!'' // false
!!0 // false
!!null // false
!!{} // true
📌 출처
모던 자바스크립트 Deep Dive(이웅모 저)
