[ JS ] 연산자

메이·2024년 4월 17일

목록 보기

2/12

🔎 연산자

01. 산술 연산자(Arithmetic Operator)

console.log(1 + 2)   // 3
console.log(5 - 7)   // -2
console.log(3 * 4)   // 12
console.log(10 / 2)   // 5
console.log(7 % 5)   // 2

02. 할당 연산자(Assignment Operators)

let a = 3
console.log(a)   //3

// a = a + 2
a += 2
console.log(a)   // 5

// a = a - 2
a -= 2
console.log(a)   // 3

// a = a * 2
a *= 2
console.log(a)   // 6

// a = a / 2
a /= 2
console.log(a)   // 3

// a = a % 2
a %= 2
console.log(a)   // 1

03. 증감 연산자(Increment & Decrement Operators)

: 변수 1씩 더하거나 빼는 연산자

let a = 3
console.log(a++)   // 3
console.log(a)     // 4

let b = 3
console.log(++b)   // 4
console.log(b)     // 4

let c = 3
console.log(c--)   // 3
console.log(c)     // 2

let d = 3
console.log(--d)   // 2
console.log(d)     // 2

증감 연산자보다 할당 연산자를 사용하는 것이 좋다!

let e = 3
e += 1
console.log(e)   // 4
e -= 1
console.log(e)   // 3

04. 부정 연산자(Negation Operator)

: 참과 거짓의 반댓값을 불린 데이터로 반환

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

console.log('중첩 사용 ==========')
console.log(!0)   // true
console.log(!!0)   // false
console.log(!!!0)   // true
console.log(!!!!0)   // false

console.log('거짓 ==========')
console.log(!null)   // true
console.log(!NaN)   // true
console.log(!undefined)   // true
console.log(!'')   // true

console.log('참 ==========')
console.log(!{})   // false
console.log(![])   // false
console.log('A')   // false

05. 비교 연산자(Comparison Operator)

: 두 데이터를 비교할 때 사용

const a = 1
const b = 3

// 동등(형 변환!)
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

동등 연산자와 부등 연산자는 자바스크립트를 사용할 때 되도록이면 사용하지 않는 것이 좋다!

06. 논리 연산자

자바스크립트는 위에서 아래로 해석되는데, 함수 선언문은 함수를 정의하기 전에 사용해도 에러나지 않는다.
함수 표현식은 작성된 그대로 동작하기 때문에 호이스팅 현상이 일어나지 않는다.

// 호이스팅 (끌어올려지다)
hello()   // Hello~
wolrd ()   // Error..

// 함수 선언문
function hello () {
  console.log('Hello~)
}
              
// 함수 표현식
const world = function () {
  console.log('World~')
}

👀 함수 표현식이 작동되게 하려면?

// 함수 표현식
const world = function () {
  console.log('World~')
}

// 호이스팅 (끌어올려지다)
hello()   // Hello~
wolrd ()   // World~

// 함수 선언문
function hello () {
  console.log('Hello~)
}

07. 삼항 연산자 (Ternary Operator)

: 조건 ? (조건이 참일 때 실행) : (조건이 거짓일 떄 실행)

const fruits = ['Apple', 'Banana', 'cherry']

// IF 조건문
if (fruits.length > 0) {
  console.log('과일이 있습니다.')
} else {
  consolee.log('과일이 없습니다.')
}
               
// 삼항 연산자
const message = fruits.length > 0 ? '과일이 있습니다.' : '과일이 없습니다.'
console.log(message)   // '과일이 있습니다.'

function includesText(el) {
  return el.textContent ? '글자 있음!' : '글자 없음!'
}

const h1E1 = document.querySelector('h1')
console.log(includesText(h1E1))  // h1에 글자가 있으면 참, 글자가 없으면 거짓

08. 전개 연산자 (Spread Operator)

: 주로 배열 데이터와 객체 데이터에서 사용함
: 자기 자신(...)을 포함해서 붙어있는 데이터의 괄호를 날려버리는 역할!

//// 배열 데이터
const number = [1, 2, 3]
console.log(number)   // [1, 2, 3]
console.log(...number)   // 1 2 3

const n1 = [1, 2, 3]
const n2 = [2, 3, 4]
const n3 = n1.concat(n2)
const n4 = [...n1, ...n2]
console.log(n3)   // [1, 2, 3, 2, 3, 4]
console.log(n4)   // [1, 2, 3, 2, 3, 4]

//// 객체 데이터
const o1 = { a: 1, b: 2, c: 3 }
const o2 = { b: 99, c: 100, d: 101 }
const o3 = Object.assign({}, o1, o2)
// 첫번째 객체 데이터인 {} 에 이후에 있는 모든 객체 데이터의 속성을 복사해서 집어넣어 반환한다
const o4 = Object.assign({}, o2, o1)
const o5 = { ...o1, ...o2 }
console.log(o3)   // { a: 1, b: 99, c: 100, c: 101 }
console.log(o4)   // { a: 1, b: 2, c: 3, c: 101 }
console.log(o5)   // { a: 1, b: 99, c: 100, c: 101 }