연산자(Operator) - javascript 기본

1. 산술(Arithmetic) 연산자

+, -, *, /, %

// 덧셈 연산자
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

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

console.log(isEvent(3)) // false
console.log(isEvent(4)) // true

2. 할당(Assignment) 연산자

a = b

const a = 1

console.log(a) // 1

let aa = 1

aa += 3 // aa = aa + 3

console.log(aa) // 4

// -, *, /, % 실습

3. 증감(Increment & Decrement) 연산자

증가 연산사

a++, ++a

let b = 1

// b = b + 1;
console.log(b++) // 1 선출력 후연산
console.log(++b) // 2 선연산 후출력
console.log(b) // 2

감소 연산자

b--, --b

let c = 1

// c = c - 1;
console.log(c--) // 1 : 선출력 후연산
console.log(--c) // 0 : 선연산 후출력
console.log(c) // 0

4. 부정(Negation) 연산자

!a

해당 데이터의 반대인 boolean 데이터를 출력한다.

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

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

5. 비교(Comarison) 연산자

a === b, a!==b, a > b, a <= b

const d = 1
const e = 3

// 동등 (형 변환 O)
console.log(d == e) // false

// 부동 (형 변환 O)
console.log(d != e) // true

// 일치 (형 변환 X)
console.log(d === e) // false

// 불일치 (형 변환 X)
console.log(d !== e) // true

// 크다
console.log(d > e) // false

// 크거나 같다
console.log(d >= e) // false

// 작다
console.log(d < e) // true

// 작거나 같다
console.log(d <= e) // true

6. 논리(Logical) 연산자

논리 연산자는 참과 거짓을 반환한다.

AND(그리고) 연산자

a && b

• 데이터가 둘 다 참이면 true 반환
• 연산자를 기준으로 가장 먼저 만나는 거짓 데이터 반환

const f = true
const g = true

if(f && g){
  console.log('둘다 참이면 실행됩니다.')
}

** 주의 **
// 연산자를 기준으로 가장 먼저 만나는 거짓 데이터가 반환된다.
console.log(true && false) // false : 거짓데이터 반환
console.log(1 && 0) // 0 : 거짓데이터 반환
console.log(1 && 2 && 0) // 0
console.log(1 && 0 && 2) // 0 : 거짓데이터 반환 후 종료
console.log('A' && 'B' && '') // <empty string>
console.log('A' && 'B' && 'C') // C : 모두가 참이라면 마지막 데이터가 반환

OR(또는) 연산자

a || b

• 데이터가 둘중 하나만 참이면 true 반환
• 연산자를 기준으로 가장 먼저 만나는 참 데이터 반환

const h = false
const i = true

if(h || i) {
    console.log('둘중 하나만 참이면 실행됩니다.') 
}

** 주의 **
// 연산자를 기준으로 가장 먼저 만나는 참 데이터가 반환된다.
console.log(false || true) // true
console.log(0 || 1) // 1
console.log(false || 0 || {}) // 빈 객체데이터는 참이기 때문에 {} 반환
console.log(false || [] || null) // 빈 배열은 참이기 때문에 [] 반환 후 종료
console.log(function () || undefined || '') // 함수 데이터는 참이기 때문에 f () {} 반환 후 종료
console.log(false || 0 || NaN) // 모두가 거짓이라면 마지막 데이터가 반환

7. 병합(Nullish Coalescing) 연산자

a ?? b

or 연산자를 사용

• or 연산자를 사용한 경우 처음으로 만나는 truthy 값을 반환한다.

const m = 0

const num1 = m || 5
console.log(num1) // 5
// or 연산자를 사용한 경우 처음으로 만나는 truthy 값을 반환한다.
// 0은 false로 평가되므로 5가 반환된다.
// 하지만 숫자 0의 데이터를 사용하고 싶을 땐??

Nullish 병합 연산자를 사용

• ?? 연산자를 사용한 경우 null 또는 undefined는 무시하고 그 외의 값만 사용된다.

const m = 0

const num2 = m ?? 5 
console.log(num2) // 0
// ?? 연산자를 사용한 경우 null 또는 undefined는 무시하고 그 외의 값만 사용된다.
// 0은 falsy 값이지만 null 또는 undefined가 아니므로 0이 반환된다.

ex

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

8. 삼항(Ternary) 연산자

조건 ? 참 : 거짓

console.log(true ? 1 : 2) // 1
console.log(false ? 1 : 2) // 2

if문 표현

const p = 1

if (p < 3) {
    console.log('참!!') // 참!!
} else {
    console.log('거짓') // 거짓
}

삼항 연산자 표현

• 위의 코드를 삼항 연산자로 표현하면 다음과 같다.

console.log(p < 3 ? '참!!' : '거짓') // 참!!

ex

function isAnimal(text) {
    return (
        text === '고양이' ? '고양이' : '고양이 아님'
    )
}

console.log(isAnimal('고양이')) // 고양이
console.log(isAnimal('개')) // 고양이 아님

9. 전개(Spread) 연산자

...a, ...b

배열의 전개

const q = [1, 2, 3]
const r = [4, 5, 6]

const s = q.concat(r) // concat 메서드 사용
console.log(s) // [ 1, 2, 3, 4, 5, 6 ]

const t = [...q, ...r] // 전개 연산자
console.log(t) // [ 1, 2, 3, 4, 5, 6 ]

객체의 전개

const dog = {
    name: '멍멍이',
}
const dogInfo = {
    ...dog,
    age: 2,
}
console.log(dogInfo) // { name: '멍멍이', age: 2 }

함수의 인자에서의 전개

function sum(a, b, c) {
    console.log(a + b + c)
}

sum(1, 2, 3) // 6

// 배열 데이터를 인자로 전달하려면?
const num = [1, 2, 3]
sum(num[0], num[1], num[2]) // 6 (기존 방식)

// 전개 연산자를 사용하면?
sum(...num) // 6