[자바스크립트] 연산자 예제 및 총정리

자바 스크립트의 연산자를 알아보자.

 

자바스크립트 연산자 종류

1. 대입 연산자

2. 산술 연산자

3. 복합 연산자

4. 증감 연산자 (전위, 후위)
5. 논리 연산자

6. 비교 연산자

7. typeof 연산자

8. null 병합 연산자

 

1. 대입 연산자

소스 코드

// 대입 연산자

let a = 1;

설명이 필요 없다. 변수를 선언하고 값을 대입하는 것이 대입 연산자이다. 

 

2. 산술 연산자

소스 코드

// 산술 연산자

let b = 1;

let c = 2;

 

console.log(b + c);

console.log(b * c);

console.log(b - c);

console.log(b / c);

console.log(b % c);

결과

3

2

-1

0.5

1

기본적인 산술 연산자는 위의 예제와 같다. 자바스크립트에서 좀 차이점이 있다면, 아래와 같이 동적 타입 언어의 특성을 가지는 것을 확인할 수 있다. 

소스 코드

// 산술 연산자 (문자값 연산자)

let b1 = "1";

let c1 = "2";

 

console.log(b1 + c1);

console.log(b1 * c1);

console.log(b1 - c1);

console.log(b1 / c1);

console.log(b1 % c1);

결과

12

2

-1

0.5

1

문자열 덧셈은 문자열로 반환되지만, *,-,/,% 연산 같은 경우에는 자동으로 숫자로 반환된다. (number 타입은 보라색으로 표시되는 것을 확인할 수 있다.)

 

 

3. 복합 연산자

소스 코드

// 복합 연산자

let aa1 = 1;

aa1 += 10;

console.log(aa1);

결과

11

원래는 let aa1 = aa1 + 10; 이라고 표현해야 하는 것을 aa1 += 10; 으로 쉽게 연산할 수 있다. 

물론, -= ,*= 등 다양한 연산들도 복함 연산이 가능하다.

 

4. 증감 연산자 (전위, 후위)

소스 코드

// 증감 연산자

// 전위 연산자

let aa = 1;

console.log(++aa); //2가 출력됨

결과

2

++ 를 사용하면 변수에 +1을 하는 결과를 가져온다. (--를 사용하면 -1 됩니다.)

위 예제를 보면 aa라는 변수 앞에 ++를 하게 되면서 +1이 된 2 값이 출력되는 것을 확인할 수 있다. 

하지만, 변수 뒤에 ++를 붙이게 되면 결과값이 달라진다. 아래 예제를 통해 확인해 보자.

소스 코드

// 후위 연산자

let bb = 1;

console.log(bb++); //1이 출력됨 (라인이 끝나고 나서 연산됨)

console.log(bb);

결과

1

2

후위 연산자는 해당 라인이 다 끝난 후 연산을 한다. 그러므로 첫 번째로 나온 console.log의 라인이 끝난 후에 +1이 되기 때문에, 로그를 확인했을 때 1이 먼저 나오는 것을 확인할 수 있다. 

(현업에서도 사용 하지만 알고리즘이나 문제에서 자주 출제되는 경우가 많다. 잘 알도록 하자)

 

5. 논리 연산자

소스 코드

console.log(!true);

 

console.log(true && true); //true AND true

console.log(true && false); //true AND false

console.log(true || false); //true OR false

결과

false

true

false

true

논리 연산자는 true, false 값을 나타내는 boolean 타입들을 말한다. 

AND는 &&

OR은 ||

을 사용하면 된다. 

 

6. 비교 연산자

소스 코드

// 비교 연산자

let compare = 1 == "1";

console.log(compare);

let compare3 = 1 != "1";

console.log(compare3);

결과

true

false

첫번째 로그를 찍는 compare 값이 true이다. 자바스크립트에서는 문자열과 숫자의 비교가 자유롭다.

==를 통해 같음을 비교할 수 있고, !=를 통해서 다름을 비교할 수 있다. 

다른 언어에서는 자료형이 다르면 비교가 되지 않는데, 자바스크립트에서는 자료형이 달라도 비교가 가능하다.

자료형이 다른데도 같다고 표시되는 경우, 분명히 오류를 범할 수 있다.

그런 것을 방지하기 위해, 자료형 까지 비교하는 연산자가 있다. (아래 예제를 보자)

소스 코드

// 자료형도 같은지 비교하는 방법

let compare2 = 1 === "1";

console.log(compare2);

let compare4 = 1 !== "1";

console.log(compare4);

결과

false

true

===, !== 비교 연산자를 통해서 자료형까지 비교 가능하다.

 

대소 비교 연산은 다른 언어와 큰 차이가 없다. 

소스 코드

// 대소 비교

let compare5 = 2 < 2;

console.log(compare5);

let compare6 = 2 <= 2;

console.log(compare6);

결과

false

true

대소 비교에서 '=' 기호는 오른쪽에 붙여 주도록 하자.

 

7. typeof 연산자

소스 코드

// typeof 연산자 : 자료형 확인

// 동적 타입 언어는 에러를 발생할 수 있는 여지가 있기 때문에 typeof 잘 사용해야함

let compare7 = 1;

console.log(typeof compare7);

compare7 = "1";

console.log(typeof compare7);

결과

number

string

자바스크립트에서 숫자와 문자가 동적으로 계산되는 것들을 볼 수 있었다. 이런 동적 타입 언어에서는 변수의 타입이 뭔지 확인하는 것이 중요하다. typeof 연산자를 통해서 자료형을 확인할 수 있다. 

 

8. null 병합 연산자

소스 코드

// null 병합 연산자

let aaa;

console.log(aaa);

aaa = aaa ?? 10; //aaa가 undefined 이면 ?? 뒤에 값을 반환한다.

console.log(aaa);

 

let bbb = null;

console.log(bbb);

bbb = bbb ?? 10; //bbb가 null이어도 ?? 뒤에 값을 반환한다.

console.log(bbb);

결과

undefined

10

null

10

null 병합 연산자는?? 를 사용해서 undefined과 null 값인 경우에 반환하고자 하는 값을 ?? 뒤에 표기하면서 사용 가능하다.