1. 반복문
1-1. for in
- 배열의 인덱스나 객체의 key값을 변수 i에 부여하는 반복문
- IE에서도 사용가능하다는 장점이 있다.
// 배열의 인덱스를 가져오는 경우 let arr1 = [10, 20, 30, 40, 50] for (const i in arr1) { // i가 arr의 인덱스를 가져온다 console.log(arr1[i]) } // 객체의 key값을 가져오는 경우 let obj1 = {'one' : 10, 'two':20} for (const i in obj1) { // i가 obj의 key를 가져온다 console.log(obj1[i]) }
1-2. for of
- 배열의 값이나 객체의 iterable(반복가능, ex 배열, 문자열...)한 값을 반환하는 반복문.
- IE에서 사용이 불가능하다.
let arr2 = [10, 20, 30, 40, 50] let obj2 = {'one' : 10, 'two':20} for (const item of arr2) { console.log(item) // i가 arr의 값을 가져온다. } for (const item of obj2) { console.log(item) // error //of 뒤에 iterable한 값이 나와야 한다. }
1-3. for문의 객체 활용법(보충)
- 배열이 객체로 이루어진 경우, 특정 key의 value를 얻고자 할 때:
for in문은arr[i]["key"]로 구한다.
for of문은i.key로 구한다.
- 일정하지 않는 객체에 반복문을 사용할때, nullish연산자나 조건문을 사용하여 undefined를 넘어갈 수 있다.
// 본 배열의 마지막 객체요소 안에는 age가 없어서 나이의 평균을 구하는데 어려움이 있다. let user = [ { "_id": "642e3071c61a23c70ae6076b", "index": 0, "age": 31, "name": "Hicks Garza", "gender": "male", }, { "_id": "642e3071ecd6f90a87d64731", "index": 1, "age": 32, "name": "Ayers Harrington", "gender": "male", }, { "_id": "642e3071cef9ddc131f047fb", "index": 2, "age": 39, "name": "Lamb Adams", "gender": "male", }, { "_id": "642e3071cef9ddc131f047fb", "index": 2, "name": "Lamb Adams", "gender": "male", } ] // solution 1 : nullish연산자 let s = 0 for (const i of user) { s += i.age ?? 0 // 마지막 객체요소는 undefinded이지만, nullish 연산자로 0이된다. } console.log((s / user.length).toFixed(2)) // solution 2 : 조건문 let s = 0; for (const i of user.map(v => v.age)) { if(!!i) { // 조건문에 의해 마지막 객체요소는 undefinded 즉, false로 출력되어 무시된다. s += i } } console.log((s/ user.length).toFixed(2)) // 모범 답안(실무용) user .map(v => v.age) .filter(v => !!v) // 값이 있는 경우, 즉 true인 경우만 걸러낸다. .reduce((a,b) => a + b, 0)
2. continue와 break문
2-1. break문
조건이 충족되면,자신을 감싼 반복만을 탈출함. 그 상위 반복문까지 탈출하지 않음 // 중단시킴
// break문 예시(구구단, 3까지만 곱해짐) for (let i = 2; i < 10; i++) { for(let j = 1; j <10; j++){ console.log(`${i} X ${j} = ${i*j}`) if (j === 3) { break // j가 3이면 for(let j = 1; j <10; j++)를 탈출함 } } }
2-2. continue문
조건이 충족되면, 아래 구문을 실행시키지 않고 다음 루프로 넘어가서 다시 구문을 실행시킴. // 중단시키진 않음
// continue문 예시(구구단, 3배고 다 곱함) for (let i = 2; i < 10; i++) { for(let j = 1; j <10; j++){ if (j === 3) { continue // j가 3이면, 아래 console.log(`${i} X ${j} = ${i*j}`)실행 시키지 않고 j가 4로 넘어감 } console.log(`${i} X ${j} = ${i*j}`) } }
3. 전개구문과 구조분해할당
3-1. 전개구문
배열이나 객체로 묶여있던 요소들을 다시 풀거나, 나뉘어진 요소들을 하나의 배열이나 객체로 모아주는 역할을 수행
- 배열의 전개구문 : 주로 서로 다른 배열을 하나로 합칠때 사용한다.
const 과일들 = ['사과', '파인애플', '수박']; const 생선들 = ['조기', '갈치', '다금바리']; const 합치면 = [...과일들, ...생선들]; const 합치면2 = [과일들, 생선들]; console.log(합치면); // ['사과', '파인애플', '수박', '조기', '갈치', '다금바리'] console.log(합치면2); // [Array(3), Array(3)]
- 객체의 전개구문 : 주로 요소에 변경사항을 줄 때 사용한다.
const A = {ein: '재직중', zwei: '재직중', drei: '재직중', vier : '재직중', funf : '재직중'}; const A2 = { ...A, drei: '휴가', // 객체 요소 변경 vier: '퇴사' } A2 // {ein: '재직중', zwei: '재직중', drei: '휴가', vier: '퇴사', funf: '재직중'}
3-2. 구조분해할당
for (const [i,j] of [[1,2], [3,4], [5,6]]) { console.log(i,j) } // 1 2 3 4 5 6
- Object.entries(): 객체의 프로퍼티들을 [key ,value] 쌍의 배열로 반환해주는 메소드
const A = {ein: '재직중', zwei: '재직중', drei: '재직중', vier : '재직중', funf : '재직중'}; Object.entries(A) // 0 : (2) ['ein', '재직중'] 1 : (2) ['zwei', '재직중'] 2 : (2) ['drei', '재직중'] 3 : (2) ['vier', '재직중'] 4 : (2) ['funf', '재직중'] for (const [i,j] of Object.entries(A)) { console.log(i,j) } // ein 재직중 zwei 재직중 drei 재직중 vier 재직중 funf 재직중
- 구조분해할당 예시
const test2 = [ [1, 2, [10, 20]], [3, 4, [30, 40]], [5, 6, [50, 60]] ] for (const [i, j] of test2) { console.log(i, j); } const test3 = [ [1, 2, [10, 20]], [3, 4, [30, 40]], [5, 6, [50, 60]] ] for (const [i, j, k] of test3) { console.log(i, j, k); } const test4 = [ [1, 2, [10, 20]], [3, 4, [30, 40]], [5, 6, [50, 60]] ] // 모든 요소로 나누어준다 for (const [i, j, [k, l]] of test4) { console.log(i, j, k, l); } // 중요!! const test5 = [ [1, 2, 10, 20], [3, 4, 30, 40], [5, 6, 50, 60] ] for (const [i, j, ...k] of test5) { // j이후의 요소들을 전부 구조분해한 배열로 묶음 console.log(i, j, k); }
4. 암기코드
4-1. 구구단
// for문 for (let i = 2; i < 10; i++) { for (let j = 1; j < 10; j++) { console.log(`${i} X ${j} = ${i*j}`) } } // while문 let i = 2 while (i < 10) { let j = 1; // 왜 여기서 선언하는 것인가?? -> 초기화를 안했기 때문 // 위에 쓰면 j는 영원히 10이 된다 -> 9까지 출력하고 탈출하기 때문 while (j < 10) { console.log(`${i} X ${j} = ${i*j}`) j++ } i++ } // 오답 // let i = 2 // let j = 1; // while (i < 10) { // while (j < 10) { // console.log(`${i} X ${j} = ${i*j}`) // j++ // } // i++ // }
4-2. 문자열 뒤집기
//for문 let s1 = 'hello world' let result = ''; for (let i = 0; i < s1.length; i++) { console.log(i) result = s1[i] + result } console.log(result) // s1[0] + result => 'h' + '' => 'h' // s1[1] + result => 'e' + 'h' => 'eh' // s1[2] + result => 'l' + 'eh' => 'leh' // while문 let s2 = 'hello world' let result2 = ''; let count = 0 while (count < s2.length) { result2 = s2[count] + result2 count++ } console.log(result2)
4-3 팩토리얼
//for문 let s3 = 1; for (let i = 1; i < 6; i++) { s3 *= i; } console.log(s3) // while문 let s = 1; count = 1; while (count < 6) { s *= count; count++ } console.log(s)
감동을 주고픈 개발자(준비생)