[javascript] 6. 배열 내장 함수 - forEach

너무 재미없게 기술 정리만 해놓다보면 글을 쓰는 나도 그렇고 혹여나 내 블로그를 봐주시는 감사한 분들에게도
잠시 쉬어가는 TMI ZONE을 만들어보려 한다. 항상 맨 윗줄에 쓸 예정

2월 4일자로 퇴사를 했다. 기분은 좋지만 놀 시기가 아니다. 코딩은 멈출 수 없다.

javascript 중에서 배열 내장 함수가 자꾸 헷갈린다.
javascript 2. 반복문 에서 살짝 다뤘지만 그래도 기본기는 잡으면 잡을수록 좋다는 개인적인 견해가 있어 다시 한번 새롭게 정리해보려고 한다.

아 물론 나중에 다시 보거나 새롭게 알게 된 내용을 추가할 때 좀 더 편하게 작성하기 위해 각 내장 함수마다 페이지를 나눌 것이다.

forEach

배열안에 있는 원소들을 갖고 일괄적으로 어느 작업을 하고 싶다면 forEach문을 사용하면 편리하다. 하단에 예제를 살펴봅시다.

• 예제 1
  • 만약 배열안에 있는 원소들을 모두 출력하고 싶다면 for문을 사용할 수 있다.

const front = ["html", "css", "scss", "js", "react"];

for (let i = 0; i < front.length; i++) {
  console.log(front[i]); 
  // html
  // css
  // scss
  // js
  // react
}

위에 for문을 돌리는 것도 좋은 방법이지만 forEach를 사용하면 좀 더 간결하게 나타낼 수 있다.

• 예제 2 (forEach)

const front = ["html", "css", "scss", "js", "react"];

function print(skill) { // 여기서 파라미터인 skill은 front에 원소들을 뜻함
  console.log(skill);
}
front.forEach(print);
// html
// css
// scss
// js
// react

forEach를 사용해서 좀 더 간결하게 코드를 짜보았다. 하지만 es6문법인 화살표 함수 arrow function ( () => )을 쓴다면 좀 더 간결하게 작성할 수 있다.

• 예제 3 (forEach 화살표 함수)

const front = ["html", "css", "scss", "js", "react"];

front.forEach(function (skill) {
  console.log(`${skill}, study hard`); // ${} 템플릿 리터럴 사용
});

// html, study hard 
// css, study hard 
// scss, study hard 
// js, study hard 
// react, study hard