TIL 20221105 - 130번(for문의 종류)

오늘은 드디어 주말이 찾아왔고 회복의 시간이었던 것 같다.
진짜 많이 잤고 일주일동안 쌓인 걸 회복해서 그런지 정답률이 낮았던 알고리즘 문제를 꽤 빠르게 통과한 것 같다!
차근차근 하다보니 어느새 다음 단계로 넘어가는데 아직 여러 일을 같이 하느라 느리지만 성장하는 것 같아 뿌듯하다.
그리고 요즘 너무 개념적인 공부만 하다보니 구현 능력이 떨어지는 느낌도 드는데 슬라이드 만들기부터 다시 시작해보려 한다!
react강의가 끝나고 12월 즈음부터 프로젝트를 한달 계획으로 진행할 건데 미리미리 좀 준비를 해놓자!

오늘 공부

알고리즘 문제 풀기(프로그래머스)
https://github.com/hoinlee-moi/Algorithm

JS기본문법 다시 공부
https://github.com/hoinlee-moi/ModernJS

React 강의 듣기
https://github.com/hoinlee-moi/React_prac

for반복문! - 무엇으로 리스트를 돌아야 하나

도움 출처 : https://yceffort.kr/2021/06/best-solution-for-looping-over-array

JS를 사용하다 보면 배열을 순회하는 방법이 몇가지 있는데 계속 for만을 이용하다보니 불편함도 많고 map이나 reduce등을 사용해도 반복문이 필요한 경우가 확실히 있는 것 같아 찾아보았다
4가지의 for문이 있었는데

• for
• for-in
• forEach
• for-of

for

근본부터 있던 방법으로

const arr = ['a', 'b', 'c']
arr.prop = 'prop'

for (let i = 0; i < arr.length; i++) {
  const e = arr[i]
  console.log(i, e)
}
// 0 "a"
// 1 "b"
// 2 "c"

• 배열의 첫번째 뿐만 아니라 n번째에서 돌수도 있다.
• 단순히 배열을 순회하려는 목적에 비해 많은 작업이 필요하다(추가적인 변수 선언,증가,길이 계산 등)

for-in

새로운 방식인 줄 알았는데 for와 같이 근본부터 있던 방식이었다.

const arr = ['a', 'b', 'c']
arr.prop = 'prop'

for (const key in arr) {
  console.log(key, typeof key, arr[key])
}

// 0 "string" a
// 1 "string" b
// 2 "string" c
// 3 "string" prop prop

하지만 위의 코드 실행결과처럼 for-in을 배열을 순회하는데 쓰는 건 별로 좋지 않다.

• key값만 가져올 수 있다
• key값의 타입에서 볼 수 있다시피, 숫자가 아닌 문자열로 나온다.

const arr = [1, 2, 3]
arr[0] === arr['0'] // true

• 배열은 "[]"에서 숫자로도 접근할 수 있기 때문에 객체와 다르다고 생각할 수 있다. 그러나 배열 또한 객체이므로, "[]"안에 심볼 외의 값이 들어가면 강제로 string으로 변환한다.

• 모든 enumerable한 키들을 죄다 순회한다.

따라서 for-in은 객체가 enumberable한 모든 속성을 순회할 때 사용하는 것이 좋다. 그러나 이 경우에도, 프로토 타입 체인을 순회하는 것이 더 낫다.

forEach

ES5에서 추가된 새로운 방법,Array.prototype.forEach()이다.

const arr = ['a', 'b', 'c']
arr.prop = 'prop'

arr.forEach((e, index) => {
  console.log(e, index)
})

// a 0
// b 1
// c 2

배열의 요소와 인덱스 모두에 접근할 수 있다.
하지만 단점의 요소가 있는데

• await를 루프 내부에 쓸 수 없다.
• forEach()중간에 루프를 탈출하는 것이 곤란하다. 다른 문법의 경우 break로 가능

const arr = ['a', 'b', 'c']
arr.forEach((e, index) => {
  console.log(e)
  if (e === 'b') {
    // break Illegal break statement
    return
  }
})
// a
// b
// c

for-of

ES6에 나온 가장 최신 기능

const arr = ['a', 'b', 'c']
arr.prop = 'prop'

for (const e of arr) {
  console.log(e)
}

// a
// b
// c

• 모든 루프를 원하는 대로 순회할 수 있다!
• await를 사용한 for-await-of가 가능하다
• break``continue를 사용할 수 있다

for-of를 활용하면 키만 접근하거나 혹은 키와 값 모두 접근하거나 등이 모두 가능하다

const arr = ['a', 'b', 'c']
for (const key of arr.keys()) {
  console.log(key, typeof key)
}

// 0 "number"
// 1 "number"
// 2 "number"

const arr = ['a', 'b', 'c']
for (const [key, value] of arr.entries()) {
  console.log(key, value)
}
// 0 "a"
// 1 "b"
// 2 "c"

const m = new Map().set(1, 1).set(2, 2).set(3, 3)
for (const [key, value] of m) {
  console.log(key, value)
}

// 1 1
// 2 2
// 3 3

결론

• for-of로 다른 순회문에서 할 수 있는 모든 것을 할 수 있어 가장 좋다.
• 성능에 대한 비교는 사실 의미가 없다.(forEach가 가장 느리긴 하다) 그러나 JS에서 성능이 유의미할 정도로 순회문을 돌아야 한다면, 웹 어셈블리 등 다른 방법을 알아보는 것이 좋다.
• 대부분이 map과 reduce를 사용해 해결할 수 있고 함수형에 읽기도 간결하긴 하다!