Front-end/모던자바스크립트

[JS] 연산자

개발중인제이 2023. 12. 6. 21:51

 

# 연산자(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(이웅모 저)

저작자표시 (새창열림)