[JS] 연산자

김다빈·2023년 8월 3일

JavaScript 자바스크립트

자바스크립트

목록 보기

2/36

📌 산술 연산자

더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%) 등의 연산을 하는 연산자
나머지(/) 연산자는 몫만 구하는 것 아님!!

예제

function isEven(num) {
  return num % 2 === 0
}

console.log(isEven(3)) //false
console.log(isEven(12)) //true

📌 할당 연산자

변수에 값을 할당할 때 사용하는 연산자
=, +=, -=, *=, /=, %=

📌 증감 연산자 (++, --)

증가연산자 ++ 와 감소연산자 -- 로 나뉜다.
또한 증감연산자는 전위(++n)와 후위(n++)로 나뉜다.

📌 부정 연산자 (!)

해당하는 데이터의 반대 데이터를 출력하는 연산자
무조건 true/false 값만 사용할 수 있는 것이 아니라 참과 거짓에 해당하는 모든 데이터에 붙여서 사용할 수 있다.

예제

console.log(true) //true
console.log(!true) //false

console.log(!0) //true
console.log(!null) //true

console.log(![]) //false
console.log(!{}) //false

📌 비교 연산자

비교 연산자	설명
==	동등 연산자 (형 변환 O)
!=	부등 연산자 (형 변환 O)
===	일치 연산자 (형 변환 X)
!==	불일치 연산자 (형 변환 X)
>	큼
>=	크거나 같음
<	작은
<=	작거나 같음

📌 논리 연산자 (&&, ||)

왼쪽부터 데이터 값의 참과 거짓을 읽고 연산자에 따라 값을 반환한다.

&& (AND)

왼쪽부터 데이터를 읽어서 하나라도 거짓인 값이 있으면 그 데이터를 반환한다. 뒤에 어떤 값이 있든지 가장 먼저 만난 거짓 데이터가 반환됨
모두가 참이면 가장 마지막에 있는 참 데이터가 반환됨

예제

console.log(true && false) //false
console.log(1 && 0) //0
console.log(1 && 2 && 0) //0
console.log(1 && 0 && 2) //0
//2를 만나기 전에 0이 참을 만족시키지 못하므로 바로 0을 반환

console.log('A' && 'B' && '') //빈칸이 출력됨 (내용은 없음)
//왜냐하면 조건에 빈 문자열이 포함되어 있기 때문에 그것이 반환됨

console.log('A' && 'B' && 'C') //C
//모두가 참이면 제일 마지막에 있는 데이터가 반환됨

|| (OR)

왼쪽부터 데이터를 읽어서 하나라도 참인 값이 있으면 그 데이터를 반환한다. 뒤에 어떤 값이 있든지 가장 먼저 만난 참 데이터가 반환됨
모두가 거짓이면 가장 마지막에 있는 거짓 데이터가 반환됨

예제

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

console.log(false || 0 || {}) //{}
console.log(false || [] || null) //[]
console.log(function () {} || undefined || '') //f () {}
//함수는 부정의 값이 아니므로 참인 함수가 반환됨

console.log(false || 0 || NaN) //NaN, 모두가 거짓이면 가장 마지막에 있는 데이터가 반환됨

📌 Nullish 병합 연산자 (??)

정의된(defined) 값을 반환한다.
null, undefined 를 제외한 모든 값을 반환

예제

const n = 0

//OR 연산자를 사용한 경우
const num1 = n || 7
console.log(num1) //7

//Nullish 병합 연산자를 사용한 경우
const num2 = n ?? 7
console.log(num2) //0

//비교 값이 모두 nullish 일 때는 가장 마지막에 있는 값이 반환된다.
console.log(null ?? undefined) //undefined

📌 삼항 연산자 (조건? 참 : 거짓)

참/거짓을 판별할 조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값

사용 방법

const a = 1

//if 구문
if (a < 2) {
  console.log('참!')
} else {
  console.log('거짓...')
}

//삼항 연산자
console.log(a < 2 ? '참!' : '거짓...')

예제

function getAlert(message) {
  return message? message : '메시지가 존재하지 않습니다!'
}

console.log(getAlert('안녕하세요~')) //안녕하세요~
console.log(getAlert('')) //메시지가 존재하지 않습니다!

📌 전개 연산자 spread operator (…)

객체, 배열 데이터의 중괄호 { } 및 대괄호 [ ] 를 날려주는 역할

사용 방법

const a = [1, 2, 3]
const b = {4, 5, 6}

console.log(a) //[1, 2, 3]
console.log(...a) //1, 2, 3

console.log(b) //{4, 5, 6}
console.log(...b) //4, 5, 6

예제
function fn(x, y, z) {
  console.log(z, y, z)
}

const a = [1, 2, 3]

fn(1, 2, 3) //1, 2, 3
fn(a[0], a[1], a[2]) //1, 2, 3
fn(...a) //1, 2, 3
전개 연산자를 사용하면 객체, 배열의 내용을 간단하게 사용할 수 있다.

Array.concat( ) 메소드

concat () 메소드를 사용해서 여러 개의 배열을 하나로 합칠 수 있다.
- Array.concat(value1, value2, ..., valueN)
- 인수를 여러 개 (value1~valueN) 작성 가능
- 기존 배열 Array 와 파라미터로 받은 값 value1~valueN 을 합쳐서 새로 만든 배열을 반환하는 메소드

예제 1

const a = [1, 2, 3]
const b = [4, 5, 6]

const c = a.concat(b)
console.log(c) //[1, 2, 3, 4, 5, 6]

const d = [a, b]
console.log(d) //[[1, 2, 3], [4, 5, 6]]

const e = [...a, ...b]
console.log(e) //[1, 2, 3, 4, 5, 6]

예제 2

const arr = [1, 2, 3]
const newArr = arr.concat('a', ['b', 'c'], 'abc');

console.log(newArr) //[1, 2, 3, 'a', 'b', 'c', 'abc']

Object.assign( ) 메소드

(참조) MDN 공식문서 - Object.assign( )

Object.assign(target, ...sources)

target
: 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체입니다.
sources
: 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들입니다.

예제

const a = { x: 1, y: 2 }
const b = { y: 3, z: 4 }

const c = Object.assign({}, a, b)
console.log(c) //{x: 1, y: 3, z: 4}

const d = {a, b}
console.log(d) //{ a: { x: 1, y: 2 }, b: { y: 3, z: 4 }}

const e = {...a, ...b}
console.log(e) //{x: 1, y: 3, z: 4}