박시은

(❁´◡`❁)

5 분 소요

▶ 연산자(Operator)

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이 때 연산의 대상을 피연산자(Operand)라고 한다.

  • 피연산자도 평가되어 하나의 값이 되므로 표현식이고 피연산자를 연산자와 결합한 연산자 표현식도 물론 표현식이다.
  • 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.
// 산술 연산자
5 * 4; // 20

// 문자열 연결 연산자
"My name is " + "sieun"; // "My name is sieun"

// 할당 연산자
const color = "red"; // "red"

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

    // 논리 연산자
    5 > 3
  ) && 2 < 4; // true

// 타입 연산자
typeof "Hi"; // "string"

▶ 산술 연산자

산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자(2개의 피연산자)와 단항 산술 연산자(1개의 피연산자)로 구분하며, 산술 연산이 불가능한 경우 NaN을 반환한다.

▷ 이항 산술 연산자

이항 산술 연산자 의미
+ 덧셈
- 뺄셈
* 곱셈
/ 나눗셈
% 나머지 
const x = 3;
const y = 2;
console.log(x + y); // 5
console.log(x - y); // 1
console.log(x * y); // 6
console.log(x / y); // 1.5
console.log(x % y); // 1


  • 이항 덧셈 연산자는 문자열을 연결한다.
let apples = "2";
let oranges = "3";

console.log(apples + oranges); // 23


▷ 단항 산술 연산자

단항 산술 연산자 의미
++ 증가
– 감소
+ 어떠한 효과도 없다.
- 양수를 음수로, 음수를 양수로 반전한 값을 반환한다.
  • ++ / – 연산자는 위치에 의미가 있다.
  • 연산자가 피연산자 앞에 위치하면 먼저 피연산자 값을 증가/감소시킨 후 다른 연산을 수행한다.
  • 연산자가 피연산자 뒤에 위치하면 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
let x = 3;
let value;

// 선대입 후증가
value = x++;
console.log(value, x); // 3 4

// 선증가 후대입
value = ++x;
console.log(value, x); // 5 5

// 선대입 후감소
value = x--;
console.log(value, x); // 5 4

// 선감소 후대입
value = --x;
console.log(value, x); // 3 3

+10 - // 10
  -10; // 10
-"10"; // 숫자 -10 (문자열을 숫자로 타입 변환)
-true; // 숫자 -1 (불리언 값을 숫자로 타입 변환)
-"문자열"; // NaN (문자열을 숫자로 타입 변환 할 수 없기 때문)

const x = "10";
console.log(x); // 문자열 "10"
console.log(+x); // 숫자 10

const y = true;
console.log(y); // 불리언 true
console.log(+y); // 숫자 1

const z = "문자열";
console.log(z); // "문자열"
console.log(+z); // NaN (문자열을 숫자로 타입 변환 할 수 없기 때문)



▶ 문자열 연결 연산자

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

let a = 2;
console.log("1" + a); // 문자열 '12' 출력

개발자의 의도와 상관 없이 암묵적으로 타입이 자동 변환 되기도 하는데 이를 암묵적 타입 변환이라고 한다.



▶ 할당 연산자

  • 변수에 값을 대입할 때 사용하는 이항 연산자이며, 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
  • 할당문은 하나의 값으로 평가되는 표현식인 문이다.
할당 연산자 사례 동일표현
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y 
let x;
console.log((x = 5)); // 5
console.log((x += 5)); // 10
console.log((x -= 5)); // 5
console.log((x *= 5)); // 25
console.log((x /= 5)); // 5
console.log((x %= 5)); // 0

console.log(0 == false); // true
console.log(0 === false); // false
console.log("" == false); // true
console.log("" === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false



▶ 비교 연산자

좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다.

▷ 동등/일치 비교 연산자

비교 연산자 의미 사례 설명
== 동등 비교 x == y x와 y의 값이 같다
=== 일치 비교 x === y x와 y의 값과 타입이 같다
!= 부동등 비교 x != y x와 y의 값이 다르다
!== 뷸일치 비교 x != =y x와 y의 값과 타입이 다르다 
//동등 비교
console.log(3 == "3"); // true

//일치 비교
console.log(3 === "3"); // false

//부동등 비교
console.log(3 != "3"); // false

// 불일치 비교
console.log(3 !== "3"); // true

동등 비교 연산자는 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 따라서 좌항의 우항의 피연산자가 타입은 다르더라도 true를 반환할 수 있는 것이다.

console.log(10 == 10); // true
console.log(10 == "10"); // true

동등 비교 연산자는 결과를 예측하기 어려움으로 일치 비교 연산자를 사용하는 것이 좋다.


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

console.log(10 === 10); // true
console.log(10 === "10"); // false


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

console.log(NaN === NaN); // flase

따라서 숫자가 NaN인지 조사하려면 함수 Number.isNaN을 사용한다.

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN(10)); // flase
console.log(Number.isNaN(1 + undefined)); // true


▷ 대소 관계 비교 연산자

비교 연산자 사례 의미
> x>y x가 y보다 크다
< x<y x가 y보다 작다
>= x>=y x가 y보다 같거나 크다
<= x<=y x가 y보다 같거나 작다 
console.log(2 > 3); // false
console.log(2 < 3); // true
console.log(2 >= 3); // false
console.log(2 <= 3); // true



▶ 삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정한다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 flase일 때 반환할 값

const x = 2;
const resule = x === 3 ? "정답입니다" : "틀렸습니다";
console.log(resule); // "틀렸습니다"

const x = 3;
const result = x > 1 ? "크다" : "작다";
console.log(result); // "크다"



▶ 논리 연산자

주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환한다.

논리 연산자 의미 설명
&& 논리합(OR) 논리식이 모두 참이면 참을 반환(논리 AND 연산)
\\ 논리곱(AND) 논리식 중에서 하나라도 참이면 참을 반환(논리 OR 연산)
! 부정(NOT) 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환(논리 NOT 연산)


아래코드 && 연산자가 사용되었고, 논리식 중 하나가 false 이므로 돌아가 출력

const age = 22;
const value = false;

if (age >= 22 && value) {
  console.log("너는 술을 살 수 있어!");
} else {
  console.log("돌아가");
}


아래코드   연산자가 사용되었고, 논리식 중 하나라도 참이므로 너는 술을 살 수 있어! 출력 
const age = 22;
const value = false;

if (age >= 22 || value) {
  console.log("너는 술을 살 수 있어!");
} else {
  console.log("돌아가");
}


원래대로라면 너는 술을 살 수 있어! 가 출력되어야 하지만, 논리 부정 연산자의 사용으로 돌아가 출력

const age = 22;
const value = false;

if (!(age >= 22 || value)) {
  console.log("너는 술을 살 수 있어!");
} else {
  console.log("돌아가");
}



▶ 기타 연산자

문자열 결합 연산자, 삼항 연산자, 쉼표 연산자, delete 연산자, typeof 연산자, instanceof 연산자, voide 연산자가 존재한다.

문서에서 자세히 확인해보자: TCP 기타 연산자



📎참조

댓글남기기

참고