[JS] 06. 연산자

[JS] 06. 연산자

 

 

 

 

📚 Table of Contents

 

 

 

 

01. 산술, 할당, 증감 연산자

산술(Arithmetic) 연산자

산술 연산자는 숫자를 다루는데 사용되며, 주로 더하기( + ), 빼기( - ), 곱하기( * ), 나누기( / ) 등의 연산을 수행합니다.

이러한 연산자들은 숫자형 데이터를 대상으로 하며, 결과값도 숫자형 데이터입니다.

 

예를 들어, 5 + 3은 8을 반환합니다.

 

이외에도 나머지(%) 연산자를 사용하여 나머지 값을 구할 수 있고, 거듭제곱(**) 연산자를 사용하여 거듭제곱을 구할 수 있습니다.

console.log(1 + 2)

console.log(5 - 7)

console.log(3 * 4)

console.log(10 / 2)

console.log(7 & 5) // 비트 연산자 사용 예시로, 산술 연산자와는 다름

 

짝수 여부 확인 함수

 

이 함수는 주어진 숫자가 짝수인지 여부를 확인합니다. 숫자가 짝수면 true, 홀수면 false를 반환합니다.

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

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

할당(Assignment) 연산자

할당 연산자는 변수에 값을 할당하는데 사용됩니다. 주로 등호(=)를 사용하여 값을 할당합니다.

 

예를 들어, let x = 5는 변수 x에 5를 할당합니다.

 

할당 연산자는 다른 연산자와 함께 사용하여 변수의 값을 변경할 수도 있습니다.

 

예를 들어, x += 3은 변수 x에 3을 더한 값을 다시 변수 x에 할당합니다.

let a = 3

console.log(a) // 3

// a = a + 2
a += 2

console.log(a) // 5

증감(Increment & Decrement) 연산자

증감 연산자는 변수의 값을 증가시키거나 감소시키는 데 사용됩니다. 증감 연산자는 두 가지로 나뉩니다: 증가 연산자(++), 감소 연산자(--).

 

증가 연산자(++): 변수의 값을 1씩 증가시킵니다. 예를 들어, a++는 변수 a의 값을 1씩 증가시킵니다.

 

감소 연산자(--): 변수의 값을 1씩 감소시킵니다. 예를 들어, a--는 변수 a의 값을 1씩 감소시킵니다.

 

증감 연산자는 두 가지 방식으로 사용할 수 있습니다: 전위 증감 연산자, 후위 증감 연산자.

 

전위 증감 연산자: 변수의 값을 먼저 증가시키거나 감소시킨 후, 그 값을 반환합니다. 예를 들어, ++a는 변수 a의 값을 먼저 1씩 증가시킨 후, 그 값을 반환합니다.

 

후위 증감 연산자: 변수의 값을 반환한 후, 그 값을 증가시키거나 감소시킵니다. 예를 들어, a++는 변수 a의 값을 반환한 후, 그 값을 1씩 증가시킵니다.

 

증감 연산자는 변수의 값을 쉽게 조작할 수 있게 해주는 편리한 기능입니다.

let a = 3

console.log(a++) // 3 (증가 연산자)

console.log(a) // 4

console.log(++a) // 5

02. 부정, 비교 연산자

부정(Negation) 연산자

부정 연산자는 논리 부정을 수행합니다. 즉, 참인 값을 거짓으로, 거짓인 값을 참으로 바꿉니다. 부정 연산자는 ! 기호를 사용합니다.

 

예를 들어, !true는 false를 반환합니다. 반면, !false는 true를 반환합니다.

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

 

부정 연산자는 또한, Falsy 값(거짓으로 간주되는 값)을 확인하는 데 사용할 수 있습니다. 예를 들어, !undefined는 true를 반환합니다.

 

Falsy 값에는 0, "", null, undefined, NaN, false가 포함됩니다.

console.log(!undefined) // true
console.log(!0) // true
console.log(!"") // true

비교(Comparison) 연산자

비교 연산자는 두 값이 같은지, 다른지, 또는 크기 비교를 수행합니다. 다음과 같은 비교 연산자가 있습니다:

• >: 왼쪽 값이 오른쪽 값보다 큰지 확인합니다.
• <: 왼쪽 값이 오른쪽 값보다 작은지 확인합니다.
• >=: 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인합니다.
• <=: 왼쪽 값이 오른쪽 값보다 작은거나 같은지 확인합니다.
• ==: 왼쪽 값과 오른쪽 값이 같은지 확인합니다. (타입을 검사하지 않습니다.)
• ===: 왼쪽 값과 오른쪽 값이 같은지 확인합니다. (타입도 검사합니다.)
• !=: 왼쪽 값과 오른쪽 값이 다른지 확인합니다. (타입을 검사하지 않습니다.)
• !==: 왼쪽 값과 오른쪽 값이 다른지 확인합니다. (타입도 검사합니다.)

예를 들어, 5 > 3는 true를 반환합니다. 반면, 5 < 3는 false를 반환합니다.

const a = 1
const b = 2

// 동등
console.log(a == b) // false

// 부등
console.log(a != b) // true

// 일치
console.log(a === b) // false

// 불일치
console.log(a !== b) // true

// 큼
console.log(a > b) // false
// 크거나 같음
console.log(a >= b) // false

// 작음
console.log(a < b) // true
//작거나 같음
console.log(a <= b) // true

03. 논리 연산자

논리 연산자는 두 개 이상의 표현식을 결합하여 하나의 논리 값을 반환합니다. JavaScript에서 사용할 수 있는 논리 연산자는 다음과 같습니다:

AND 연산자

• &&: AND 연산자로, 모든 표현식이 참인 경우에만 참을 반환합니다.

if (a && b) {
  console.log('모두가 참!')
}

console.log(true && true) // '모두가 참!'
console.log(true && false) // false
console.log(1 && 0) // 0

OR 연산자

• ||: OR 연산자로, 하나 이상의 표현식이 참인 경우에 참을 반환합니다.

if (a || b) {
  console.log('하나 이상이 참')
}

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

04. Nullish 병합, 삼항 연산자

Nullish 병합 (Nullish Coalescing)

Nullish 병합 연산자 ??는 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환합니다.

const n = 0

const num1 = n || 7
console.log(num1) // 7

const num2 = n ?? 7
console.log(num2) // 0

console.log(null ?? 1) // 1
console.log(undefined ?? 2) // 2
console.log(null ?? undefined) // undefined

console.log(null ?? 1 ?? 2) // 1
console.log(false ?? 1 ?? 2) // false

삼항(Ternary) 연산자

• ? :: 삼항 연산자로, 조건식의 결과에 따라 다른 값을 반환합니다.

예를 들어, a ? b : c는 a가 참인 경우 b를 반환하고, 거짓인 경우 c를 반환합니다.

const a = 1

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

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

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

console.log(getAlert('안녕하세요~'))
console.log(getAlert(''))

05. 전개 연산자

전개 연산자 ...는 배열이나 객체의 요소를 펼쳐서 새로운 배열이나 객체를 생성합니다.

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

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

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

const d = [a, b]
console.log(d) // (2) [Array(3), Array(3)]

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

 

객체 데이터도 사용 가능합니다.

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) // {x: 1, y: 3, z: 4}