[JS] 7. 연산자

윤결심·2022년 3월 27일
0

JS

목록 보기
6/14
post-thumbnail

7.1 산술 연산자

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

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

  1. 이항 산술 연산자

    이항 산술 연산자는 2개의 피 연산자를 산술 연산하여 숫자 값을 만듦

    피연산자의 값을 변경하는 부수효과가 없고, 언제나 새로운 값을 만듦

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

  1. 단항 산술 연산자

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

    이항 산술 연산자와는 달리 증가/감소 (++/- -)연산자는 피연산자의 값을 변경하는 부수 효과가 있음.(암묵적 할당이 이루어짐)

    var x = 1;

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

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

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

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

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

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

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

//선감소 후할당
result = --x;
console.log(result, x); // 5 5

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

    피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환. 부수 효과 x

    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
var x = '1';

// 문자열을 숫자로 타입 변환
-'10'; // -10

// 불리언 값을 숫자로 타입 변환
-true; // -1

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환
- 'Hello'; // NaN

    문자열 연결 연산자

    // 문자열 연결 연산자
'1' + 2 ; // '12'
1 + '2' ; // '12'

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

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

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

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

// undefinde는 숫자로 타입 변환 x
+ undefinde; // NaN
1 + undefined; // Nan

    7.2 할당 연산자

    할당 연산자예동일 표현부수효과
    =x = 5x = 5O
    +=x += 5x = x + 5O
    -=x -= 5x = x - 5O
    *=x *= 5x = x * 5O
    /=x /= 5x = x / 5O
    %=x %= 5x = x % 5O

    동일한 값 동시 할당 가능

    var a, b, c;
// 연쇄 할당
// c = 0
// b = 0
// a = 0

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

    7. 3 비교 연산자

    동등 비교 연산자는 느슨한 비교

    일치 비교 연산자는 엄격한 비교

    비교연산자의미사례설명부수 효과
    ==동등 비교x == yx 와 y의 값이 같음x
    ===일치 비교x === yx 와 y의 값과 타입이 같음x
    ! =부동등 비교x != yx 와 y의 값이 다름x
    ! ==불일치 비교x !== yx 와 y의 값과 타입이 다름x

    동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 대 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교

    // 동등 비교

5 == 5; // -> true

// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등

5 == '5'; // -> true

    동등 비교 연산자는 예측하기 어려운 결과를 만들어내므로 동등 비교 연산자는 사용하지 않는 편이 좋음

    대산 일치 비교 연산자 사용

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

    일치 비교 연산자에서 주의할 것은 NaN

    NaN은 자신과 일치하지 않는 유일한 값.

    숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN 사용

    // Number.isNaN 함수는 지장한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환

Number.isNaN(NaN) // true
Number.isNaN(10) // False
Number.isNaN( 1 + undefined ) // true

    0도 주의

    // 양의 0과 음의 0의 비교
0 === -0 ; // true
0 == -0 ; // true

    7.4 삼항 조건 연산자

    삼항 조건 연산자 표현식: 조건식 ? 조건식이 true 일 때 반환할 값: 조건식이 false일 대 반환할 값

    조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환

    var x = 2;

var result = x % 2 ? '홀수' : '짝수';

console.log(result) // 짝수

//

var x = 2;

	// 2 % 2는 0이고 0은 false로 암묵적 타입 변환됨

if ( x % 2 ) result = '홀수';
else result = '짝수';

console.log(result) // 짝수

    위 코드는 유사한 것 처럼 보이지만, 삼항 조건 연산자 표현식은 if ... else 문과 중요한 차이가 있음.

    삼항 조건 연사낮 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없음

    → if ... else 문은 표현식이 아닌 문이라 값처럼 사용할 수 없는 것

    var x = 10;

// if... esle 문은 표현식이 아닌 문임. 따라서 값처럼 사용할 수 없음
var result = if ( x % 2 ) { result = '홀수'; } else { result = '짝수'; }
// SyntaxError: Unexpected token if

//

var x = 10;

// 삼항 조건 연산자 표현식은값으로 평가할 수 있는 표현식인 문임. 
// 따라서 갑처럼 다른 표현식의 일부가 될 수 있어 매우 유용
var result = x % 2 ? '홀수' : '짝수' ;

console.log(result); // 짝수

    그럼 언제 삼항 조건 연산자 표현식 , if else 문을 사용하나?

    ⇒ 삼항 조건 연산자 표현식 사용이 유리한 경우: 조건에 따라 어떤 값을 결정할 때

    ⇒ if else 문이 유리할 경우: 조건에 따라 수행해야 할 문이 하나가 아니라 여러개일 때

    7.5 논리 연산자

    논리 연산자의미부수 효과
    &&논리곱 (AND)x
    !부정 (NOT)x
    // 논리합 연산자
// a || b => a 아니면 b(a가 true면 b 안봐도 true, a가 false면 b에 따라 결과 달라짐)

true || true; //-> true
true || false; //-> true
false || true; //-> true
false || false; //-> false

// 논리곱(&&) 연산자

true && true // -> true
true && false // -> false
false && true // -> false
false && false // -> false

// 논리 부정(!) 연산자
!true; // -> false
!false; // -> tru

    논리 부정 연산자는 언제나 불리언 값을 반환. 그러나 피연산자가 반드시 불리언 값일 필요는 없음. 왜냐면 불리언 타입으로 암묵적 타입 변환되기 때문

    // 암묵적 타입 변환
!0 ; // -> true
!'Hello' // -> false

    논리합 또는 논리곱 연산자 표현식의 평가 결과는 불리언값이 아닐 수도 있음. 논리합, 논리곱 연산자 표현식은 언제나 2개의 피 연산자 중 어느 한쪽으로 평가됨.

    ⇒ 단축 평가

    7.6 쉼표 연산자

    쉼표 연산자는왼쪽 피연산자로부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환

    var x, y, z;
x = 1, y = 2, z = 3; // 3

    7.7 그룹 연산자

    소괄호로 피연산자를 감사는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가함

    그룹 연산자를 사용하면 연산자의 우선 순위 조절 가능

    연산자 중 그룹 연산자가 가장 우선 순위가 높음

    7.8 typeof 연산자

    typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환

    null을 반환하는 경우는 없고, 함수일 경우 function을 반환

    typeof 연산자로 null 값을 연산해보면 object를 반환

    → 값이 null 타입인지 확인할 때는 typeof 연산자 대신 일치 연산자를 사용

    선언하지 않은 식별자를 typeof 연산자로 연산해보면 ReferenceError가 발생하지 않고 undefined를 반환

    7.9 지수 연산자

    ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환

    지수 연산자가 도입 되기 이전에넌 Math.pow 메서드를 사용

    2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

Math.pow(2, 2) // 4
Math.pow(2, 2.5) // 5.65685424949238
Math.pow(2, 0) // 1
Math.pow(2, -2) // 0.25

// 지수 연산자는 다음과 같은 경우 Math.pow 메서드보다 가독성이 좋음
// 지수 연산자의 결합 순서는 우항에서 좌항. 우결합성을 가짐

2 ** ( 3 ** 2 ) //512
Math.pow(2, Math.pow(3, 2))

//음수 거듭제곱의 밑으로 활용하기
(-5) ** 2

    지수 연산자는 이항 연산자 중에서 우선순위가 가장 높음

profile
윤결심
이전 포스트

[JS] 6. 데이터 타입

다음 포스트

[JS] 8. 제어문

0개의 댓글

관련 채용 정보