자바스크립트 연산자

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

1-1) 산술 연산자

더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)

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

1-2) 할당 연산자

=, +=, -=, *=, /=, %=

let num1 = 3;
let num2 = 3;
console.log(num1, num2);  // 3 3

num1 = num1 + 10;
num2 += 10;
console.log(num1, num2);  // 13 13

1-3) 증감 연산자

증가 연산자(++), 감소 연산자(--)

let num1 = 3;
let num2 = 3;

console.log(num1++, ++num2);  // 3 4
console.log(num1, num2);  // 4 4

---

02 부정, 비교 연산자

2-1) 부정 연산자

!

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

console.log(!0);  // true
console.log(!null);  // true
console.log(!undefined);  // true
console.log(!NaN);  // true
console.log(!"");  // true
console.log(!0n);  // true

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

2-2) 비교 연산자

일치연산자(==, !=)
동등연산자(===, !==)
비교연산자(>, >=, <, <=)

console.log(10 == "10");  // true
console.log(10 != "10");  // false
console.log(10 === "10");  // false
console.log(10 !== "10");  // true

const num1 = 1;
const num2 = 2;

console.log(num1 > num2);  // false
console.log(num1 >= num2);  // false
console.log(num1 < num2);  // true
console.log(num1 <= num2);  // true

일치연산자는 형변환후 값을 비교를 합니다.

---

03 논리 연산자

3-1) AND 연산자

A && B
A와 B값이 둘다 true 일때만 true 를 반환합니다.
A와 B의 타입이 boolean 이 아닐 경우, 제일 먼저 만나는 false 값을 가지는 데이터를 반환합니다.

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

console.log("A" && 0 && "B");  // 0
console.log("" && "A" && 0);  //
console.log("A" && 1 && "B");  // "B"

3-2) OR 연산자

A || B
A와 B값 둘 중 하나이상이 true 이면 true 를 반환합니다.
A와 B의 타입이 boolean 이 아닐 경우, 제일 먼저 만나는 true 값을 가지는 데이터를 반환합니다.

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

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

---

04 Nullish 병합, 삼항 연산자

1-1) Nullish 병합 연산자

A ?? B
null 혹은 undefined 를 제외한 제일 먼저 만나는 데이터를 반환합니다.

console.log(null ?? 1);  // 1
console.log(undefined ?? 2);  // 2
console.log(null ?? 1 ?? "A");  // 1
console.log(0 ?? false ?? "A");  // 0

1-2) 삼항 연산자

A ? B : C
A 가 true 면 B 를 반환하고, false 면 C 를 반환합니다.

const num = 10;
console.log(num > 0 ? "0보다 큽니다." : "0보다 작습니다.");  // 0보다 큽니다.

---

05 전개 연산자, 구조분해 할당

2-1) 전개 연산자(Spread Operator)

...
배열 혹은 객체의 요소를 나열합니다.

const arr = [1, 2, 3];

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

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

console.log([arr1, arr2]);  // [[1, 2, 3], [4, 5, 6]]

console.log(arr1.concat(arr2));  // [1, 2, 3, 4, 5, 6]
console.log([...arr1, ...arr2]);  // [1, 2, 3, 4, 5, 6]

const obj1 = { x: 1, y: 2 };
const obj2 = { y: 3, z: 4 };

console.log({ obj1, obj2 });  // { obj1: { x: 1, y: 2 }, obj2: { y: 3, z: 4 } }

console.log(Object.assign({}, obj1, obj2));  // { x: 1, y: 3, z: 4};
console.log({ ...obj1, ...obj2 });  // { x: 1, y: 3, z: 4};

2-2) 구조분해 할당 (Destructuring Assignment)

[], {}
배열 혹은 객체의 요소를 분해하여 할당합니다.

const arr = [1, 2, 3];

const [num1, num2, num3] = arr;
console.log(num1, num2, num3);  // 1 2 3

const [, num4, num5] = arr;
console.log(num4, num5);  // 2 3

const [, , num6] = arr;
console.log(num6);  // 3

const [num7, ...rest] = arr;
console.log(num7, rest);  // 1 [2, 3]

const obj = {
  one: 1,
  two: 2,
  three: 3,
};

const { one, two } = obj;
const { three, four } = obj;
console.log(one, two, three, four);  // 1 2 3 undefined

const obj = {
  one: 1,
  two: 2,
};

const { one, two: num2, three = 0, four: num4 = 0 } = obj;
console.log(one, num2, three, num4);  // 1 2 0 0

const obj = {
  one: 1,
  two: 2,
  three: 3,
};

const { three, ...rest } = obj;
console.log(three, rest);  // 3 { one: 1, two: 2 }

---

06 선택적 체이닝 (Optional Chaining)

A?.B

A 객체의 B 속성이 undefined 나 null 일 경우, undefined 를 반환합니다.

const user1 = {};
console.log(user1.name);  // undefined
console.log(user1?.name);  // undefined

const user2 = null;
console.log(user2.name);  // Uncaught TypeError
console.log(user2?.name);  // undefined

const user3 = undefined;
console.log(user3.name);  // Uncaught TypeError
console.log(user3?.name);  // undefined

const user = {
  name: "im-channel",
  age: 28,
};

console.log(user?.name);  // im-channel
console.log(user?.age);  // 28
console.log(user?.addres || "등록된 주소가 없습니다.");  // 등록된 주소가 없습니다.