JavaScript forEach() 쉽게 배우기 - 소개, 구문, 특징, 예제 코드

JavaScript에서 forEach() 쉽게 배우기 - 소개, 구문, 특징, 예제 코드

 

 

JavaScript에서 배열을 다루는 중요한 메서드 중 하나인 forEach() 메서드에 대해 이해하는 것은 개발자에게 매우 중요합니다. 이 글에서는 forEach() 메서드의 개념, 사용법, 그리고 예시 코드를 통해 이해해보겠습니다.

 

forEach() 메서드란?

 

JavaScript에서 forEach 함수를 사용해 배열 순회하기

 

forEach() 메서드의 개념

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행합니다. 이 메서드를 사용하여 배열을 순회하며 각 요소에 동일한 동작을 수행할 수 있습니다.

 

forEach() 메서드의 구문

array.forEach(function(currentValue, index, array) {
  // 실행할 코드
}, thisArg);

 

• currentValue: 현재 순회 중인 요소의 값
• index: 현재 순회 중인 요소의 인덱스
• array: 원본 배열
• thisArg (선택사항): 함수 내에서 this로 참조할 객체

 

 

forEach() 메서드 사용법

 

Array.prototype.forEach() - JavaScript | MDN

 

배열 순회하기

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

 

요소 값 변경하기

const numbers = [1, 2, 3];
numbers.forEach(function(number, index, array) {
  array[index] = number * 2;
});
console.log(numbers); // [2, 4, 6]

 

thisArg 활용

const person = {
  name: 'Alice',
  hobbies: ['Reading', 'Gardening'],
  logHobbies: function(hobby) {
    console.log(this.name + ' enjoys ' + hobby);
  }
};

const hobbies = ['Cooking', 'Swimming'];
hobbies.forEach(person.logHobbies, person);

 

 

forEach() 메서드와 화살표 함수

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강

 

화살표 함수를 사용할 때 this가 상위 스코프의 this와 같기 때문에 thisArg를 사용할 필요가 없습니다.

 

const person = {
  name: 'Alice',
  hobbies: ['Reading', 'Gardening'],
  logHobbies: function() {
    this.hobbies.forEach(hobby => {
      console.log(this.name + ' enjoys ' + hobby);
    });
  }
};

person.logHobbies();

 

foreEach() 메서드의 반환값

 

forEach() 메서드는 undefined를 반환하며, 반환값을 다시 사용할 수 없습니다. 이 메서드는 주로 배열의 요소에 대한 반복 작업을 수행하기 위해 사용됩니다.

 

끝으로

 

forEach() 메서드는 배열의 요소를 순회하고 각 요소에 작업을 수행하는 데 유용한 메서드입니다. 이를 통해 배열을 간단하게 반복하고 가독성 높은 코드를 작성할 수 있습니다. forEach() 메서드를 잘 활용하면 반복 작업을 보다 간편하게 처리할 수 있을 것입니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 화살표 함수 소개, 특징, 활용, 예시 코드, 일반 함수와 차이점

 

javascript 배열 안 숫자 중 최대값 찾는 다양한 방법 - 알고리즘 풀이

 

내일배움캠프 공부법 특강 - 개발자가 되기 위한 공부 방식, 태도 소개