[JS 코딩의 기술] 제 5장 반복문을 단순하게 만들어라

오늘은 제가 처음으로 책 스터디를 진행하게 되어서 JS 코딩의 기술을 읽고

저는 제5장 반복문을 단순하게 만들어라에 대해서 써보려고 합니다

책에 대한 평가를 하고 제가 적기로 한 5장에 대해 설명하고 책 스터디 느낀 점, 마무리 순서로 이야기해 보겠습니다

---

책에 대한 평가

먼저 저의 개인적인 평가는 너무 이론만 담겨있는 게 아니라 많이 유용하게 쓰이는 꿀팁들이 여러 가지 들어있는 거 같아서

다른 이론을 중시하는 책보다는 좋다고 느꼈습니다

그리고 그냥 팁들만 있는 것이 아니라 좋은 예시 코드들이 내용을 탄탄하게 받쳐주고 있는 느낌을 많이 받았습니다

목차들의 제목들도 안에 있는 내용들이 잘 와닿게 작성되어 있어서 원하는 부분만 골라먹어 볼 수 있을 거 같았습니다

그리고 새로운 장을 시작하기 전에 분위기를 풀어주는 문장들도 인상 깊었던 거 같습니다

---

제5장 반복문을 단순하게 만들어라

총 8가지의 팁들이 있었는데 두꺼운 글씨로 표시한 것들만 이야기해보겠습니다

약간 제가 헷갈렸던 개념들과 실제로 쓰일 수 있는 것 위주로 골랐고 예전에 정리했던 내용들은 제외했습니다

• 화살표 함수로 반복문을 단순하게 만들어라
• 배열 메서드로 반복문을 짧게 작성하라
• map() 메서드로 비슷한 길이의 배열을 생성하라
• filter()와 find()로 데이터의 부분집합을 생성하라
• forEach()로 동일한 동작을 적용하라
• 체이닝으로 메서드를 연결하라
• reduce()로 배열 데이터를 전환하라
• for...in문과 for... of 문으로 반복문을 정리하라

화살표 함수로 반복문을 단순하게 만들어라

먼저 이건 제가 평소에 잘 알고 있지도 않았고 활용하고 있지도 않기도 하고 심지어 꽤 코드가 직관적이고 간단명료하게 보이는 것 같아서 선택했습니다

 

코드를 먼저 바로 보여드리겠습니다

const names = ["alice", "bob", "charlie"];
const capitalized = [];

for (let i = 0; i < names.length; i++) {
  function capitalize(name) {
    return name[0].toUpperCase() + name.slice(1);
  }
  capitalized.push(capitalize(names[i]));
}

이 코드에서는 필요하지 않는게 4가지나 있습니다

• function 키워드
• 인수를 감싸는 괄호
• return 키워드
• 중괄호

이렇게 복잡하고 장황하고 긴 코드는 화살표 함수와 map을 이용해 2줄로 줄일 수 있습니디

const names = ["alice", "bob", "charlie"];
const capitalized = names.map(name => name[0].toUpperCase() + name.slice(1));

이렇게 반복문을 줄여서 아름답고 보기 쉽게 만들 수 있습니다

하지만 이것도 팀원들끼리 조율하여 쓰는 것이 가장 좋은 방법이라고 생각합니다

forEach()로 동일한 동작을 적용하라

그리고 forEach() 제가 평소에 약간 헷갈렸었기도 하고 잘 사용하지 않아서 이렇게 써보게 되었습니다

먼저 forEach는 모든 항목에 대해 같은 동작을 수행하고 싶다면 사용하는 것인데 반복중 부수 효과만 있는 경우 사용하면 적합합니다

예시 코드입니다

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(fruit => {
  console.log(fruit.toUpperCase());
});

 

그리고 forEach를 사용하면서 주의해야 할 점은

forEach는 return을 사용할 수 없습니다 중간에 반복 멈출 수 없습니다

그리고 배열 항목을 변환하거나 새로운 배열을 만들고 싶다면 map을 사용하는 것이 적절합니다

체이닝으로 메서드를 연결하라

이건 좋은 방법같아서 이렇게 글로 작성하게 되었습니다

먼저 체이닝으로 메서드를 연결하라는 쉽게 말하자면 여러 배열 메서드를 연속적으로 연결하면 중간 변수를 줄일 수 있고 가독성도 좋아진다고 합니다

그리고 체이닝은 데이터 흐름을 자연스럽게 표현할 수 있어서 의도가 명확해지는 장점이 있습니다

 

예시) 개선 전

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(n => n % 2 === 0);
const squared = evens.map(n => n * n);
const sorted = squared.sort((a, b) => a - b);

console.log(sorted); // [4, 16, 36]

 

개선 후

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .sort((a, b) => a - b);

console.log(result); // [4, 16, 36]

 

체이닝에 적합한 배열 메서드는 이렇게 몇가지가 있다고 합니다

그 중 대표적인 몇가지를 적어보았습니다

• map(): 동작 수행 후 각 요소를 반환
• filter(): 조건에 맞는 요소만 통과
• sort(): 요소 정렬
• reduce(): 누적 값 계산

---

책 스터디를 해보고 느낀 점

책 스터디를 하고 느낀 점은 약간 그동안 써왔던 걸 복습하는 느낌도 많이 들었고

헷갈리던 개념을 정확하게 짚고 넘어가는 계기가 됐던 거 같습니다

그리고 매일 스터디원들과 자유 주제로 해왔었는데 이렇게 책 한 권을 가지고 각자 파트를 나누어서 스터디를 진행하는 걸 준비하는 과정도

재밌었던 거 같습니다

하지만 책 내용도 많고 스터디 전까지 다 읽어야 한다는 압박감이 있었고 오랜만에 책을 읽은 거 같아서 책을 읽기 좀 힘들었던 거 같습니다

그리고 책을 읽을 때 대충 읽는 습관이 있는데 제가 설명해야 하니 더 꼼꼼하게 열심히 읽었던 거 같습니다

---

글을 마치며

오늘 또 새로운 경험을 해보면서 더 성장한 거 같습니다 

앞으로 스터디를 쭉 하면서 더 새롭고 많은 아이디어를 제안해서 많은 경험을 해보고 싶습니다

글을 읽어주셔서 감사합니다