JS 배열에서의 반복문

1. for 문

1) 기본 for 문

const fruits = ['사과', '배', '포도', '망고', '바나나'];

for (let f = 0; f < fruits.length; f++) {
    console.log(fruits[f]);
}

2) for…of 문

  • 배열의 요소를 직접 참조하므로 인덱스를 사용할 필요가 없습니다.
  • 순서가 있는 구조 반복에 적합합니다.
const alphabets = ['a', 'b', 'c', 'd'];

for (let alpha of alphabets) {
    console.log(`alpha > `, alpha); 
    // `alpha` 변수에는 배열의 각 요소가 할당됩니다.
}

// console.log(alpha); // Error: 블록스코프 안에서만 존재.

3) forEach() 메서드

배열을 순회하면서 작업을 반복합니다.

alphabets.forEach(function (alpha) {
    console.log(alpha); // 각 요소를 출력.
});

alphabets.forEach(function (alpha, idx) {
    console.log(alpha, idx); // 각 요소와 그 인덱스를 출력.
});

alphabets.forEach(function (alpha, idx, arr) {
    console.log(alpha, idx, arr); // 각 요소, 그 인덱스, 그리고 원래 배열을 출력.
});

2. 배열 메서드

1) map() 메서드

map 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(function(num) {
    return num * 2;
});
console.log(doubleNumbers); // [2, 4, 6, 8, 10]

이 코드는 numbers 배열의 각 요소를 두 배로 만든 새로운 배열을 생성합니다.

2) filter() 메서드

filter 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과가 true인 요소들로 이루어진 새로운 배열을 생성합니다.

const evenNumbers = numbers.filter(function(num){
    return num;
    return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4] 
// `numbers` 배열에서 짝수만을 포함하는 새로운 배열

3) find() 메서드

find 메서드는 조건을 만족하는 `첫 번째 요소`를 찾습니다. 조건에 만족하면 해당 요소를 반환하고, 만족하지 않으면 undefined를 반환합니다.

const firstEvenNumber = numbers.find(function(num) {
    return num % 2 === 0;
});
console.log(firstEvenNumber); // 2 
// `numbers` 배열에서 첫 번째 짝수.

3. 객체 반복

const dog = {
    name: '태풍',
    gender: 'M',
    info: 'cute'
};

for (let key in dog) {
    console.log(key, dog[key]);
}

/*
key : key
value : dog[key]
*/


HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 배열에서의 반복문</title>
    <script src="./index10.js"></script>
</head>
<body>
    <h1>JavaScript 배열에서의 반복문에 대해 알아보자!</h1>
</body>
</html>

JAVASCRIPT 코드

// 배열에서 반복문 사용하기!
// - 기본 for 문
// - for of 문
// - forEach() 메서드

// 배열) for문 사용 이유
const fruits = [`사과`, `배`, `포도`, `망고`, `바나나`];
// console.log(fruits[0]);
// console.log(fruits[1]);
// console.log(fruits[2]);
// console.log(fruits[3]);
// console.log(fruits[4]);

for (let f = 0; f < fruits.length; f++) {
    console.log(fruits[f]);
}

console.log(`----------------------------------`);
// Ex)
const arr = [1, 2, 5, 6, 7];
const alphabets = [`a`, `b`, `c`, `d`];

// #1. 기본 for 문
for (let a = 0; a < arr.length; a++) {
    console.log(arr[a]);
}

console.log(`----------------------------------`);

// #2. for..of 반복문
// 이 반복은 배열의 요소를 직접 참조하므로 인덱스를 사용할 필요가 없다.
// 순서가 있는 구조 반복에 적합.
// 배열 `alphabets`의 각 요소를 반복하면서 `alpha` 변수에 순서대로 할당하고, 각각 요소에 대해 반복문 블록 실행한다.

for (let alpha of alphabets) {
    console.log(`alpha > `, alpha);
}
//  console.log(alpha); // 블록스코프 안에서만 존재.

 console.log(`----------------------------------`);


 // #3. forEach() 메서드
 // 배열의 각 요소에 대해 지정된 함수를 실행
 // 일반적으로 배열을 순회하면서 각 요소에 대해 동일한 작업을 수행할 때 사용한다.
 // 각 요소에 대해 함수가 호출 될 떄마다, 해당 요소가 함수의 인자로 전달된다.

 alphabets.forEach(function (alpha) {
    // alpha : currentValue를 의미, 반복하고 있는 현재 요소.
    console.log(alpha);
 })

 alphabets.forEach(function (alpha, idx) {
    // alpha : currentValue를 의미, 반복하고 있는 현재 요소.
    // idx : currentValue의 인덱스 (위치)
    console.log(alpha, idx);
 })

 alphabets.forEach(function (alpha, idx, arr) {
    // alpha : currentValue를 의미, 반복하고 있는 현재 요소.
    // idx : currentValue의 인덱스. (위치)
    // arr : forEach를 호출한 배열.
    console.log(alpha, idx, arr);
 })

 console.log(`----------------------------------`);

 // map, filter, find 메서드
 // - 조건에 따라 요소를 변형하거나 선택.
 // #1. map()
 // - 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 생성
 
 const numbers = [1, 2, 3, 4, 5]
const doubleNumbers = numbers.map(function(num) {
    return num * 2;
});
console.log(doubleNumbers); // [2, 4, 6, 8, 10]

// #2. filter()
// - 배열의 각 요소에 대해 지정된 함수를 호출하고,
// 그 결과가 `true`인 요소들로 이루어진 새로운 배열 생성

const pracNumbers = numbers.filter(function(num){
    return num % 2 === 0;
})
console.log(pracNumbers); // [2, 4]

// #3. find()
// - 조건을 만족하는 첫 번째 요소 찾기.
// - 조건에 만족 -> 해당 요소 반환
// - 조건에 불만족 -> undefined 반환

const pracNumbers2 = numbers.find(function(num) {
    return num % 2 === 0;
})
console.log(pracNumbers2);  // 2

// + 옵션)
// for in 반복문
// 객체의 key를 반복 할 수 있는 구문

const dog = {
    name : `태풍`,
    gender : `M`,
    info : `cute`
} // (key, value)

for (let key in dog) {
    console.log(key, dog[key]); // 객체의 각 속성 (key, value)에 대해 실행할 코드
    // key : key
    // value : dog[key]
}

// - 참고)
// 변수 = key = 각 속성의 키를 저장하는 변수
// 객체 = dog = 속성을 반복할 객체