Hyunwoomemo

연산자

Javascript

    2023-05-10 01:35

    🗂️ 모던 자바스크립트 Deep Dive 공부
    목록 보기
    프로그래밍자바스크립트란?자바스크립트 개발 환경과 실행 방법변수표현식과 문데이터 타입연산자

    ✍🏻 Table Of Contents

    산술 연산자이항 산술 연산자단항 산술 연산자문자열 연결 연산자할당 연산자비교 연산자동등/일치 비교 연산자

    연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.

    // 산술 연산자
5 * 4 // -> 20
// 문자열 연결 연산자
'My name is ' + 'Lee' // -> 'My name is Lee'
// 할당 연산자
color = 'red' // -> 'red'
// 비교 연산자
3 > 5 // -> false
// 논리 연산자
true && false // -> false
// 타입 연산자
typeof 'Hi' // -> string
    javascript

    산술 연산자

    산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.

    산술 연산이 불가능한 경우, NaN을 반환

    이항 산술 연산자

    +, -, *, /, %
    javascript

    모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과(side effect)가 없다. 언제나 새로운 값을 만들 뿐

    5 + 2; // -> 7
5 - 2; // -> 3
5 * 2; // -> 10
5 / 2; // -> 2.5
5 % 2; // -> 1
    javascript

    단항 산술 연산자

    단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

    ++, —, +, -
    javascript

    이항 산술 연산자와는 달리 증가/감소(++/—) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다

    var x = 1;

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

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

    증가/감소(++,—) 연산자는 위치에 의미가 있다.

    • 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행
    • 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
    var x = 5, result;

// 선할당 후증가(postfix 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
    javascript

    +단항 연산자는 피연산자에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.

    숫자 타입이 아닌 피연산자에 +단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환

    이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환

    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"
    javascript

    -단항 연산자는 피연산자의 부호를 반전한 값을 반환. 나머지는 위와 마찬가지

    문자열 연결 연산자

    +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

    // 문자열 연결 연산자
'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
    javascript

    주목할 것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것.

    위 예제에서 1+ true를 연산하면 true를 숫자 타입인 1로 타입을 강제로 변환한 후 연산을 수행

    이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다.

    할당 연산자

    할당 연산자 예 동일 표현 부수 효과
    = 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'
    javascript

    표현식은 값으로 평가될 수 있는 문이고, 문에는 표현식인 문과 표현식이 아닌 문이 있다. 그렇다면 할당문은 표현식인 문일까, 표현식이 아닌 문일까

    var x;

// 할당문은 표현식인 문이다.
console.log(x = 10); // 10
    javascript

    할당문은 변수에 값을 할당하는 부수 효과만 있을 뿐 값으로 평가되지 않을 것처럼 보인다.

    하지만 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

    var a, b, c;

// 연쇄 할당. 오른쪽에서 왼쪽으로 진행.
// ① c = 0 : 0으로 평가된다
// ② b = 0 : 0으로 평가된다
// ③ a = 0 : 0으로 평가된다
a = b = c = 0;

console.log(a, b, c); // 0 0 0
    javascript

    비교 연산자

    동등/일치 비교 연산자

    비교 연산자 의미 사례 설명 부수 효과
    == 동등 비교 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
    javascript

    동등 비교 연산자는 편리한 경우도 있지만 결과를 예측하기 어렵고 실수하기 쉽다.

    // 동등 비교. 결과를 예측하기 어렵다.
'0' == ''; // -> false
0 == '';   // -> true
0 == '0';  // -> true
false == 'false';   // -> false
false == '0';       // -> true
false == null;      // -> false
false == undefined; // -> false
    javascript

    일치 비교(===) 연산자를 사용하는 것이 좋다.

    일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값고 같은 경우에 한하여 true를 반환

    // 일치 비교
5 === 5; // -> true

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; // -> false
    javascript

    주의할 점

    // NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // -> false
    javascript

    숫자가 NaN인지 조사하려면 빌트인 함수 Number.inNaN을 사용한다.

    // Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // -> true
Number.isNaN(10);  // -> false
Number.isNaN(1 + undefined); // -> true
    javascript