[카카오테크캠퍼스 5주차] JavaScript 마스터: 연산자

⏳ 2023. 5. 8. - 2023. 5. 14.

 

1. 연산자

1.1. 산술

      

      

      

    
    

      <javascript />
    
// 산술(Arithmetic)

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

1.2. 할당

      

      

      

    
    

      <javascript />
    
// 할당(Assignment)

const a = 1;
let b = 3;

b = b + 1;

b += 1;
b -= 1;
b *= 4;
b /= 2;
b %= 3;

1.3. 증감

      

      

      

    
    

      <javascript />
    
// 증감(Increment & Decrement)

let a = 5;

console.log(a++); // 5
console.log(a); // 6

console.log(++a); // 7
console.log(a); // 7

console.log(a--); // 7
console.log(a); // 6

console.log(--a); // 5
console.log(a); // 5

1.4. 부정

      

      

      

    
    

      <javascript />
    
// 부정(Negation)

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

// !truthy => false
// !falsy => true
console.log(!null); // true
console.log(!{}); // false

truthy 값은 부정하면 false가 되고, falsy 값은 부정하면 true가 된다!

1.5. 비교

      

      

      

    
    

      <javascript />
    
// 비교(Comparison)

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

1.6. 논리

      

      

      

    
    

      <javascript />
    
// 논리(Logical)

// AND
console.log(true && true); // true
console.log(true && false); // false
console.log(1 && 0); // 0
console.log(1 && 2 && 0); // 0
console.log(1 && 0 && 2); // 0
console.log(0 && 1 && 2); // 0
console.log("A" && "B" && ""); // ""
console.log("A" && "B" && "C"); // C

// OR
console.log(false || true); // true
console.log(false || false); // false
console.log(0 || 1); // 1
console.log(false || 0 || {}); // {}
console.log(false || [] || null); // []
console.log(function () {} || undefined || ""); // f () {}
console.log(false || 0 || NaN); // NaN

&& 연산자는 처음 만나는 거짓 값을 반환한다.

모두 참이면 가장 마지막 값을 반환한다.

 

|| 연산자는 처음 만나는 참 값을 반환한다.

모두 거짓이면 가장 마지막 값을 반환한다.

1.7. Nullish 병합

      

      

      

    
    

      <javascript />
    
// Nullish 병합(Nullish Coalescing)

const n = 0;

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

// Nullish 병합 연산자를 사용한 경우
console.log(n ?? 7); // 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
console.log(0 ?? 1 ?? 2); // 0

?? 연산자는 null과 undefined를 제외한 처음 만나는 값을 반환한다.

모두 null이나 undefined면 가장 마지막 값을 반환한다.

1.8. 삼항

      

      

      

    
    

      <javascript />
    
// 삼항(Ternary)

const a = 1;
console.log(a > 2 ? "2보다 크다." : "2보다 작다."); // "2보다 작다."

1.9. 전개

      

      

      

    
    

      <javascript />
    
// 전개 연산자(Spread Operator)

// 배열
const a = [1, 2, 3];
console.log(a); // [1, 2, 3]
console.log(...a); // 1 2 3

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

// 객체
const obj1 = { x: 1, y: 4 };
const obj2 = { y: 2, z: 5 };

const newObj1 = Object.assign({}, obj1, obj2);
console.log(newObj1); // { x: 1, y: 2, z: 5 }

const newObj2 = { ...obj1, ...obj2 };
console.log(newObj2); // { x: 1, y: 2, z: 5 }

// 매개 변수
function fn(x, y, z) {
  console.log(x, y, z);
}
fn(a); // [1, 2, 3] undefined undefined
fn(...a); // 1 2 3

전개 연산자는 짱짱 편한 것 같다. 쿸쿸쿸