JavaScript 배열 메소드 (forEach / map / filter / find )

 

1. 배열메소드

1-1.forEach

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

 

매개변수 자리에 함수를 넣는것을 콜백함수 라고 한다.

콜백함수의 input 에는 어떤 이름을 정해주고 보통은 i 또는 item이라 함.

이 item 에는 numbers에 있는 각 요소들이 하나씩 들어가며 순회를 돈다.

forEach 는 return 없이 내부에서 실행되게 하는 역할을 한다.

 

 

1-2. map

let numbers = [1, 4, 5, 3, 2];
let newNumbers = numbers.map(function(item){
    return item * 2;
});

console.log(newNumbers);

 

map 함수에 들어가는 function은 기존에 있었던 배열을 가공해서 새로운 배열로 생산해 내는 역할을 하기 떄문에 return 문을 가져야 하고 새로운 배열을 가져야 한다.

map 에서 중요한 부분은, 힝상 원본 배열의 길이만큼 리턴이 된다.

 

 

1-3. filter

let numbers = [1, 4, 5, 3, 5];
let filteredNumbers = numbers.filter(function(item){

    return (item === 5)
});

console.log(filteredNumbers);

 

filter는 배열에서 조건에 해당하는 것만 뽑아서 리턴한다.

 

 

1-4. find

let numbers = [1, 4, 5, 3, 5];
let result = numbers.find(function (item){
    return item > 4;
});

console.log(result);

 

find는 배열에서 조건에 해당하는 가장 첫번째 값을 반환한다.

 

 

2. for 반복문

2-1. for

 

for (let i = 0; i < 10; i++) {
    console.log("FOR문 돌아가고 있음", i);
}

 

for ( 초기값; 조건식; 증감식){}

기본적인 for문은 위와같이 사용한다.

풀어서 해설하자면

- i라는 변수는 0부터 시작!

- i라는 변수가 10에 도달하기 전까지 계속 한다!

- i라는 변수는 한 사이클이 돌고나면 1을 더한다!

실행 해보면 위와같이 0부터 시작하여 9까지 (10개임) 실행이 되고 멈춘 것이다.

 

 

const arr = ["one", "two", "three", "four", "five", "six"];
for (let i = 0; i < arr.length; i++) {
    console.log(i);
    console.log(arr[i]);
};

 

for문은 array와 함께사용할 수도 있다.

 

for (let i = 0; i<11; i++){
    if (i >= 2){
    if (i % 2 === 0){
        console.log(i);
    }
}
}

 

0부터 10의 숫자중에 2의 배수만 찾아서 console에 출력하는 코드

 

 

 

2-2. for in

let person = {
    name: "John",
    age: 30,
    gender: "male"
    };

    for (let key in person) {
        console.log(key + ":" + person[key]);
    }

 

for in 문은, 객체의 속성을 출력 해주는 문법이다.

 

 

 

3. while 반복문

3-1. while

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

 

while문은 조건에 해당할 때 까지 반복하는 for과 작동 매커니즘이 똑같다.

 

let i = 0;

while (i < 100) {
    if (i > 3) {
    if (i % 5 === 0) {
        console.log(i);
    }
}
    i++;
}

 

위에는 3초과 100미만의 숫자 중, 5의 배수인 숫자만 출력하는 코드이다.

초기값 i를 0으로 주었기 때문에 if 문을 두번 중첩해서 사용하여 3 초과 조건을 붙여주었다.

 

그러나 위 코드를 아래와 같이 조금더 다듬고 단순하게 만들 수 있다.

let i = 3;

while (i < 100) {
    if (i % 5 === 0 && i >= 5) {
        console.log(i);
    }
    i++;
}

 

 

 

3-2. do while

let i = 0;
do {
    console.log(i);
    i++ ;
} while (i < 10);

 

for 문과 비슷하나, 로직이 먼저 실행 된 후, while 반복이 실행된다.

 

 

4. brake / continue

4-1. brake

for (let i = 0; i<10; i++){
    if (i==5){
        break;
    }
    console.log(i);
}

 

대표사진 삭제

사진 설명을 입력하세요.

break문은 조건문과 함께 사용하며, 해당하는 조건에 부합하면 break를 걸어 조건문 밖으로 튕겨낸다.

 

 

4-2. continue

for (let i = 0; i<10; i++){
    if (i==5){
        continue;
    }
    console.log(i);
}

 

대표사진 삭제

 

사진 설명을 입력하세요.

continue문은 조건에 부합할 경우, 하위 로직을 실행하지 않고 다음 반복문으로 넘겨준다.

 

brake는 그자리에서 로직을 끝내고, continue는 그 로직을 끝내지 않고 다음 순서로 넘겨 로직실행을 완료한다.