[200406] switch 문 | 반복문 | 전개구문 | 구조분해할당

윤지수·2023년 4월 6일

JavaScript 멋쟁이사자처럼

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기

27/51

🪄 조건문

switch문

switch문은 사용하지 않는 추세(파이썬은 switch문이 없음)
다른 언어에서 switch문을 어떻게 사용할까?
-> 객체 사용, default 처리는 nullish 연산자나 단락회로평가 사용

const 요일 = 10;
const 요일객체 = {
  0: "일요일",
  1: "월요일",
  2: "화요일",
  3: "수요일",
  4: "목요일",
  5: "금요일",
  6: "토요일",
};

console.log(요일객체[요일] ?? "없는 요일"); // 없는 요일
console.log(요일객체[요일] ?? "없는 요일"); // 없는 요일

🪄 반복문

for 문

for의 구성요소들은 모두 선택적으로 사용할 수 있다
- 초기화식, 조건식, 증감식 생략 가능
조건식을 생략할 경우 무조건 true로 평가되기 때문에 코드를 무한히 반복하게 된다. 이럴때는 꼭 실행문 안에 별도의 조건문을 넣어 무한루프에 빠지지 않도록 해야 한다.

for ... in 문
IE에서도 사용 가능

const arr = [10, 20, 30, 40, 50];
for (const i in arr) {	// index를 가져온다
  console.log(arr2[i]);
}

const obj = { one: 10, two: 20 };
for (const i in obj) {	// key를 가져온다
  console.log(obj[i]);
}

for ... of 문
IE에서 사용 불가능

const arr = [10, 20, 30, 40, 50];
for (const item of arr) {
  console.log(item);
}

const obj = { one: 10, two: 20 };
for (const item of obj2) {
  console.log(item);
}
// Uncaught TypeError: obj2 is not iterable
// of 뒤에 iterable한(순회가능한, 순서가 있는) 값이 나와야 한다

for (const item of "hello world") {
  console.log(item);
}

💡 ECMAScript 명세서에 for ... in 문과 for ... of 문에서는 const로 선언할 수 있다고 써있어서 가능하다!

while 문

반복문의 break, continue

break
자신을 감싼 반복문을 탈출한다. 그 상위 반복문까지 탈출하지 않는다.

continue
아래 구문을 실행시키지 않고 다음 루프로 넘어가서 다시 구문을 실행한다.

label

특정 코드 블록에 이름을 지정하는 방법
이름을 지정하면 코드블록 내부에서 break나 continue 문의 대상으로 지정할 수 있다
특정한 곳으로 점프하게 만들어서 가독성을 해친다

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i + j === 3) {
      break outer;
    }
    console.log(i, j);
  }
}

🪄 전개구문과 구조분해할당

전개구문

배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법
배열이나 객체를 쉽게 복사하여 새로운 배열이나 객체를 생성할 수 있다
생성된 배열이나 객체는 기존의 객체 자료형처럼 참조를 공유하지 않고 완전히 별개인 새로운 값이 할당된다

const 과일들 = ['사과', '파인애플', '수박'];
const 과일들2 = [...과일들]; 

과일들2.push('키위');

console.log(과일들2);	// [사과,파인애플,수박,키위]
console.log(과일들);	// [사과,파인애플,수박]

const 숫자 = {'one': 1, 'two': 2};
const 숫자2 = {...숫자}; 

숫자2.three = 3;

console.log(숫자2);	// {one: 1, two: 2, three: 3}
console.log(숫자);	// {one: 1, two: 2}

전개되는 객체들 중에 같은 이름의 key가 있다면 key의 값은 나중에 온 객체의 key의 값으로 업데이트 할 수 있다

const me = { name: "말랑", address: "대전" };
const newAddress = {address : "서울"};
const newMe = {...me, ...newAddress}

console.log(newMe);	// {name: '말랑', address: '서울'}

구조분해할당(destructuring)

배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식

const 위니브임직원 = {
  개리: "재직중",
  빙키: "재직중",
  라이켓: "재직중",
  뮤라: "재직중",
  해골왕: "재직중",
};

for (const [i, j] of Object.entries(위니브임직원)) {
  console.log(i, j);
}
/*
  개리 재직중
  빙키 재직중
  라이켓 재직중
  뮤라 재직중
  해골왕 재직중
*/

let [one, two, three] = "010-5044-2903".split("-");
console.log(one, two, three);	// 010 5044 2903

const test1 = [
  [1, 2, 10, 20],
  [3, 4, 30, 40],
  [5, 6, 50, 60],
];

for (const [i, j, ...k] of test1) {
  console.log(i, j, k);
}
/*
	1 2 [10, 20]
	3 4 [30, 40]
	5 6 [50, 60]
*/

function hello(a, b, ...c) {
  console.log(a, b, c);
}

hello(1, 2, 3, 4, 5, 6, 7); // 1 2 [3, 4, 5, 6, 7]