구조 분해 할당과 구문

구조 분해 할당 (Destructuring assignment)

• 배열

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

console.log(a, b, c); // 1 2 3

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a, b, c); // 1 2 3

const arr = [1, 2, 3];
const [a, ...rest] = arr;

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

---

• 객체

const obj = {
  a: 1,
  b: 2,
  c: 3,
}

const a = obj.a;
const b = obj.b;
const c = obj.c;

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

const obj = {
  a: 1,
  b: 2,
  c: 3,
}

const {a, b, c} = obj;
console.log(a, b, c); // 1 2 3

const obj = {
//  a: 1,
  b: 2,
  c: 3,
}

const { a = 4, b: rename, y: ten = 10 } = obj; // a는 기본값으로 4를 설정, b는 변수명을 rename으로 변경
console.log(a, rename); // 4 2

const obj = {
  a: 1,
  b: 2,
  c: 3,
  x: 7,
  y: 100,
}

const { c, rest } = obj;
console.log(c, rest); // 3 undefined

const obj = {
  a: 1,
  b: 2,
  c: 3,
  x: 7,
  y: 100,
}

const { c, ...rest } = obj;
console.log(c, rest); // 3 { a: 1, b: 2, x: 7, y: 100 }

---

선택적 체이닝 (Optional Chaining)

const user = {};

console.log(user.name); // undefined

const user = null; // undefined도 같은 결과

console.log(user.name); // error

const user = null; // undefined도 같은 결과

console.log(user?.name); // undefined

예제

const userA = {
  name: 'HS',
  age: 20,
  address: {
    country: 'Korea',
    city: 'Seoul',
  }
}

const userB = {
  name: 'SH',
  age: 30,
}

function getCity(user) {
  return user.address.city
}

function optionalGetCity(user) {
  return user.address?.city || '주소 없음.'
}

console.log(getCity(userA)); // Seoul
console.log(getCity(userB)); // error
console.log(optionalGetCity(userB)); // 주소 없음. (윗줄 코드를 주석처리 해야합니다.)

---

If 조건문

if (조건) {
  
}

if (조건) {
  
} else {
  
}

if (조건) {
  
} else if (조건2) {
  
} else if (조건2) {
  
} else {
  
}

function isPositive(number) {
  if (number > 0) {
   	return '양수' 
  } else if (number < 0) {
   	return '음수' 
  } else {
   	return '0'
  }
}

console.log(isPositive(1)); // 양수
console.log(isPositive(10)); // 양수
console.log(isPositive(-1)); // 음수
console.log(isPositive(0)); // 0

---

Switch 조건문

switch (조건) {
  case 값1:
    // 조건이 '값1'일 때 실행
    break
  case 값2:
    // 조건이 '값2'일 때 실행
    break
  default:
    // 조건이 '값1'도 '값2'도 아닐 때 실행
}

예제

function price(fruit) {
  let p;
  switch (fruit) {
    case "Apple":
      p = 1000;
      break;
    case "Banana":
      p = 1500;
      break;
    case "Cherry":
      p = 2000;
      break;
    default:
      p = 0;
  }
  return p;
}

console.log(price("Apple")); // 1000
console.log(price("Banana")); // 1500
console.log(price("Cherry")); // 2000
console.log(price("Hello")); // 0

return을 사용하는 경우 break를 사용하지 않아도 됩니다.
결과는 같습니다.

function price(fruit) {
  switch (fruit) {
    case "Apple":
      return 1000;
    case "Banana":
      return 1500;
    case "Cherry":
      return 2000;
    default:
      return 0;
  }
}

console.log(price("Apple")); // 1000
console.log(price("Banana")); // 1500
console.log(price("Cherry")); // 2000
console.log(price("Hello")); // 0

다음과 같은 if문으로 동일한 결과를 얻을 수 있습니다.

function price(fruit) {
  if (fruit === 'Apple') {
    return 1000
  } else if (fruit === 'Banana') {
    return 1500
  } else if (fruit === 'Cherry') {
    return 2000
  } else {
    return 0
  }
}

console.log(price("Apple")); // 1000
console.log(price("Banana")); // 1500
console.log(price("Cherry")); // 2000
console.log(price("Hello")); // 0

---

For 반복문

for (초기화; 조건; 증감) {
  // 반복 실행할 코드
}

예제

for (let i = 0; i < 10; i +=1) {
  console.log(i)
}

// 0 1 2 3 4 5 6 7 8 9

for (let i = 9; i > -1; i -=1) {
  console.log(i)
}

// 9 8 7 6 5 4 3 2 1 0

for (let i = 9; i > -1; i -=1) {
  if (i < 4) {
    break
  }
  console.log(i)
}

// 9 8 7 6 5 4

for (let i = 9; i > -1; i -=1) {
  if (i % 2 === 0) {
    continue // 현재 반복 종료 후 다음 반복으로 넘어가세요
  }
  console.log(i)
}

// 9 7 5 3 1

---

For of 반복문

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

for (let i = 0; i < fruits.length; i += 1) {
  console.log(fruits[i])
}

// Apple Banana Cherry

// 같은 결과의 for of 반복문입니다.
for (const fruit of fruits) {
  console.log(fruit)
}

// Apple Banana Cherry

예제

const users = [
  {
    name: "AA",
    age: 20,
  },
  {
    name: "BB",
    age: 30,
  },
  {
    name: "CC",
    age: 40,
  },
];

for (let i = 0; i < users.length; i += 1) {
  console.log(users[i].name)
}

// 같은 결과의 for of 반복문 입니다.
for (const user of users) {
  console.log(user.name)
}

---

For in 반복문

const user = {
  name: "AA",
  age: 20,
  isVaild: true,
  email: "AAA@gamil.com",
};

for (const key in user) {
  console.log(key)
}
// name age isVaild email

for (const key in user) {
  console.log(user[key])
}
// AA 20 true AAA@gmail.com

---

While 반복문

while (조건) {
  // 실행할 코드 
}

예제

let n = 0;
while (n < 4) {
  console.log(n);
  n += 1;
}

---

Do While 반복문

let n = 0
while (n) {
  console.log(n)
}

// 0은 falsy값이므로 해당 코드는 작동하지 않습니다.

do {
  console.log(n)
} while (n)

// 0
  
  do {
  console.log(n)
  n += 1
} while (n < 4)

// 0 1 2 3