[Javascript] forEach, some, for in, for of (자바스크립트, 반복, 배열 반복, 프로토타입, prototype, 객체 반복)

📚 forEach, some, for in, for of

• 자바스크립트의 반복을 해주는 함수 또는 문법
• 배열을 반복하며 원하는 로직을 수행

---

📗 forEach

배열의 모든 요소를 반복하며 콜백 함수를 실행

• 기본 for 문에서의 break와 continue 키워드 사용이 불가능
• continue 를 콜백함수 return 으로 구현 가능함
• 일반적인 for 문 실행
  다른 언어의 for 문과 같다

    1
    3
    5
    7
    9

• const arr = [1,3,5,7,9]; for (let i=0; i<arr.length; i++){ console.log(arr[i]); }
• 배열에서 forEach 실행
  자바스크립트 배열의 프로토타입이므로 배열에서 바로 사용 가능

    1
    3
    5
    7
    9

• const arr = [1,3,5,7,9]; arr.forEach(function(e) { console.log(e); })
• 배열에서 forEach 실행 2
  콜백함수의 매개변수로 element, index, array 추가

    인덱스 0: 1, 배열의 전체는: 1,3,5,7,9
    인덱스 1: 3, 배열의 전체는: 1,3,5,7,9
    인덱스 2: 5, 배열의 전체는: 1,3,5,7,9
    인덱스 3: 7, 배열의 전체는: 1,3,5,7,9
    인덱스 4: 9, 배열의 전체는: 1,3,5,7,9

• const arr = [1,3,5,7,9]; // e는 element의 e 이고 i는 index의 i, a는 array의 a 입니다. // 콜백함수의 매개변수 이름은 수정해도 되지만 순서는 변하지 않습니다. arr.forEach(function(e, i, a) { console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a); })
• 배열에서 forEach 실행 3
  콜백 함수의 return 으로 continue 해보기

    인덱스 0: 1, 배열의 전체는: 1,3,5,7,9
    인덱스 1: 3, 배열의 전체는: 1,3,5,7,9
    인덱스 3: 7, 배열의 전체는: 1,3,5,7,9
    인덱스 4: 9, 배열의 전체는: 1,3,5,7,9

• const arr = [1,3,5,7,9]; arr.forEach((e, i, a)=>{ if (e === 5) return; // return true, false 든 그냥 continue console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a); })

---

📒 some

forEach의 단점인 break의 부재를 해결

• 배열에서 some 실행
  forEach 와 사용법이 같고 break 까지 적용 가능하다

    인덱스 0: 1, 배열의 전체는: 1,3,5,7,9
    인덱스 2: 5, 배열의 전체는: 1,3,5,7,9

• const arr = [1,3,5,7,9]; arr.some((e, i, a)=>{ if (e === 3) return false; // continue if (e === 7) return true; // break; console.log('인덱스 '+i+ ': ' +e+', 배열의 전체는: '+a); })

---

📘 for in

Object 와 Array 등의 항목들을 반복

• es6 에서 추가된 문법
• forEach, some 은 배열만 가능했지만 for in은 객체와 문자열도 가능함
• 매 반복마다 속성이 변수로 지정되는데 이 변수의 타입은 String
• 배열과 객체를 for in 으로 반복
  배열에서는 인덱스, 객체에서는 요소

    0: 1
    1: 3   
    2: 5   
    3: 7   
    4: 9   
    a: 에이
    b: 비  
    c: 씨

• const obj = {a: '에이', b: '비', c: '씨'}; const arr = [1,3,5,7,9]; for (let i in arr){ console.log(i+': '+arr[i]); } for (let i in obj){ console.log(i+': '+obj[i]); }
• 문자열을 for in 으로 반복
  문자열의 문자 하나하나 배열의 요소가 된다

    0: 인  
    1: 천  
    2: 대  
    3: 학  
    4: 교

• const str = '인천대학교'; for (let i in str){ console.log(i+': '+str[i]); }
• for in 에서 break 와 continue
  기존 for 문에서 break 와 continue 사용법과 같다

    0: 1
    1: 3
    b: 비
    c: 씨
    0: 인
    1: 천
    2: 대
    3: 학
    4: 교

• const obj = {a: '에이', b: '비', c: '씨'}; const arr = [1,3,5,7,9]; const str = '인천대학교'; for (let i in arr){ if (i == 2) break; // i === 2 는 false (string과 number는 같을 수 없음) console.log(i+': '+arr[i]); } for (let i in obj){ if (i === 'a') continue; console.log(i+': '+obj[i]); } for (let i in str){ console.log(i+': '+str[i]); }

---

📘 for of

Map, Set, Array, String 등을 반복(Object X)

• es6 에서 추가된 문법
• object is not iterable !
• 배열과 문자열 등, for of 으로 반복

    1
    3
    5
    7
    9
    인
    천
    대
    학
    교
    [ 'a', 1 ]
    [ 'b', 2 ]
    [ 'c', 3 ]
    1
    2
    3
    4

• const arr = [1,3,5,7,9]; const str = '인천대학교'; const mapObj = new Map([["a", 1], ["b", 2], ["c", 3]]); const setObj = new Set([1, 1, 2, 2, 3, 3, 4, 4, 4, 4, 4]); for (let i of arr){ console.log(i); } for (let i of str){ console.log(i); } for (let i of mapObj){ console.log(i); } for (let i of setObj){ console.log(i); }
• for of 에서 break 와 continue

    1
    3
    인
    대
    학
    교
    1
    2
    4

• const arr = [1, 3, 5, 7, 9]; const str = "인천대학교"; const mapObj = new Map([ ["a", 1], ["b", 2], ["c", 3] ]); const setObj = new Set([1, 1, 2, 2, 3, 3, 4, 4, 4, 4, 4]); for (let i of arr) { if (i == 5) break; console.log(i); } for (let i of str) { if (i == "천") continue; console.log(i); } for (let i of mapObj) { if (i[0] == "a") break; console.log(i); } for (let i of setObj) { if (i == 3) continue; console.log(i); }

※ 더 나아가 iterable, iterator, generator 에 대해 공부하는 걸 추천드립니다😱