개발 도구 (Development Tools)/JavaScript

#5. 자바스크립트의 배열과 반복문

BiCute 2023. 5. 12. 08:00
반응형

 

# 배열(Array)

 

JavaScript에서 배열(Array)은 같은 유형의 여러 개의 값을 가지는 객체입니다.

배열의 각 요소는 인덱스를 기준으로 접근할 수 있습니다.

 

JavaScript에서 배열은 다음과 같이 생성할 수 있습니다.

var arr = [1, 2, 3, 4, 5];

 

 

 

# 배열의 반복

 

JavaScript에서 배열의 각 요소를 처리하는 가장 일반적인 방법은 반복문(loop)을 사용하는 것입니다.

다음은 for 반복문을 사용하여 배열의 각 요소를 출력하는 예제입니다.

var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

 

 

# forEach 메소드

 

forEach 메소드는 JavaScript에서 배열의 각 요소에 대해 제공된 함수를 실행하는 메소드입니다.

forEach 메소드는 배열의 각 요소에 대해 제공된 함수를 순차적으로 실행하며, 값을 반환하지 않습니다.

다음은 forEach 메소드를 사용하여 배열의 각 요소를 출력하는 예제입니다.

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(element) {
  console.log(element);
});

forEach 메소드는 배열의 각 요소에 대해 함수를 실행하는 것이 목적이므로, 배열의 길이에 따라 빠르게 수행될 수 있습니다.

일반적인 for 반복문에 비해 더 간결한 구문을 제공하며, 코드의 가독성을 높여줍니다.

 

 

 

# map 메소드

 

map 메소드는 배열의 각 요소에 대해 제공된 함수를 실행하고, 새로운 배열을 반환합니다.

이 새로운 배열은 제공된 함수의 결과로 구성됩니다.

다음은 map 메소드를 사용하여 배열의 각 요소에 2를 곱하여 새로운 배열을 생성하는 예제입니다.

var arr = [1, 2, 3, 4, 5];
var doubled = arr.map(function(element) {
  return element * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

 

 

 

# filter 메소드

 

필터 메소드는 배열의 각 요소에 대해 제공된 함수를 실행하고, 결과가 true인 요소만을 포함하는 새로운 배열을 반환합니다.

다음은 필터 메소드를 사용하여 짝수만 포함하는 새로운 배열을 생성하는 예제입니다.

var arr = [1, 2, 3, 4, 5];
var even = arr.filter(function(element) {
  return element % 2 === 0;
});
console.log(even); // [2, 4]

 

 

 

# reduce 메소드

 

reduce 메소드는 배열의 각 요소에 대해 제공된 함수를 실행하여, 배열을 하나의 값으로 줄이는 데 사용됩니다.

다음은 reduce 메소드를 사용하여 배열의 합을 구하는 예제입니다.

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

 

reduce 메소드는 초기값(initial value)을 제공할 수도 있습니다.

이 초기값은 accumulator 매개변수에 전달되며, 배열의 첫 번째 요소부터 처리되기 전에 초기값으로 사용됩니다.

 

※ 함께 참고할만한 글들:

JavaScript의 배열 메서드

[JavaScript] Map의 사용방법과 동작 방식

[JavaScript] 배열의 값들을 더하는 방법

 

 

반응형