JS 연산자

nubim·2025년 1월 17일
// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
'My name is ' + 'Lee' // 'My name is Lee'

// 할당 연산자
color = 'red' // 'red'

// 비교 연산자
3 > 5 // false

// 논리 연산자
true && false // false

// 타입 연산자
typeof 'Hi' // string
  • 산술 연산이 불가한 경우 NaN 반환

단항 산술 연산자

var x = 1;

// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // X = X + 1;
console.log(x); // 2

// 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
X--; // X = x - 1;
console.log(x); // 1

var x = 5, result;

// 선할당 후증가 (post fix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선증가 후할당(prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선할당 후감소(postfix decrement operator)
result = x-- ;
console.log(result, x); // 7 6

// 선감소 후할당 (prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
var x = '1';

// 문자열을 숫자로 타입 변환한다.
console.log(+x); // 1

// 부수 효과는 없다.
console.log(x); // "1"

// 불리언 값을 숫자로 타입 변환한다.
x = true;
console.log(+x); // 1

// 부수 효과는 없다.
console.log(x); // true

// 불리언 값을 숫자로 타입 변환한다.
x = false;
console.log(+x); // 0

// 부수 효과는 없다.
console.log(x); // false

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN 을 반환한다.
x = 'Hello';
console.log(+x); // NaN

// 부수 효과는 없다.
console.log(x); // "Hello"

// 부호 반전
-(-10); // 10

// string -> number
-'10'; // -10

// boolean -> number
-true // -1

// 문자열은 숫자로 변경 불가라 NaN
'Hello'; // NaN

문자열 연결 연산자

  • ‘+’ 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 작동
  • 개발자 의도와 상관없이 JS 엔진에 의해 암묵적인 타입 자동 변환이 일어나기에 명시적 타입변환 권장
    • 이를 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type, coercion)
// 문자열 연결 연산자
'1' + 2; // '12'
1 + 2'; // 12'

// 산술 연산자
1 + 2; // 3

// true 는 1 로 타입 변환된다.
1 + true; // 2

// false 는 0 으로 타입 변환된다.
1 + false; // 1

// null은 0 으로 타입 변환된다.
1 + null; // 1

// undefined 는 숫자로 타입 변환되지 읺는다.
+undefined; // NaN
1 + undefined; // NaN

할당 연산자(assignment operator)

var 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

х /= 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'

비교 연산자(comparison operation)

  • 동등/일치 비교가 있고 동등 비교는 느슨한 비교, 일치 비교는 엄격한 비교를 한다
  • 왠만하면 타입 체크까지 하는 ‘===’ 권장
  • ‘==’ 의 경우 타입 변환이 일어남, 타입 일치하지 않아도 true
  • ‘===’ 의 경우 타입 변환이 일어나지 않으며 값과 타입이 일치해야 true
비교 연산자의미사례설명부수 효과
==동등 비교x == yx와 y의 값이 같음×
===일치 비교x === yx와 y의 값과 타입이 같음×
!=부동등 비교x != yx와 y의 값이 다름×
!==불일치 비교x !== yx와 y의 값과 타입이 다름×
// 타입 변화이 이뤄짐

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

// 객체/배열은 참조 타입이기에 모두 결과가 같음
var a = {}
var b = {}

a == b // false
a === b // false

var c = [];
var d = [];

c == d // false
c === d // false

// 문자열은 원시타입이지만 객체로도 만들 수 있어서 '===' 비교 시 false
var a = "string"
var b = new String("string")

a == b // true
a === b // false -> 원시와 객체라 false인 듯
  • 0, NaN은 주의하기
    • NaN은 자신과 일치 하지 않은 유일한 값
      // isNaN 함수는 지정한 값이 NaN 인지 확인하고 그 결과를 불리언 값으로 반환한다.
      isNaN(NaN); // true
      isNaN(10); // false
      isNaN(1 + undefined); // true
    • 0은 2종류, 양의 0과 음의 0이 있지만 모든 비교는 true
      // 양의 0 과 음의 0 의 비교. 일치 비교/동등 비교 모두 결과는 true다.
      0 == -0; // true
      0 === -0; // true
      
      // Object.is를 활용하자
      -0 === +0; // true
      Object.is(-0, +0); // false
      NaN === NaN; // false
      Object.is(NaN, NaN); // true

삼항 조건 연산자(ternary operator)

let age = 18;
let result = age >= 18 ? 'Adult' : 'Minor';
console.log(result);  // 'Adult'

전개연산자

const fruits = ['apple', 'banana', 'orange']
const res = ...fruits

0개의 댓글