JS 배열, forEach, map, filter, find

 

 

배열은 나열한다 라고 생각하면 된다. 

그래서 언제나 index 를 가지고 있다. 

배열에서는 0번째 부터 시작인 점을 유의하장 

 

또 기억할 점은 length 라는 기능이 배열과 함께 많이 쓰인다**

(for 문과 배열은 짝궁 짝짝궁~~!!)

 

1. 기본 배열 생성하기

let fruits = ["사과", "배", "귤"];

 

2. 크기를 지정해서 배열 생성하기 

let number = new Array(5);

console.log(number);

 

결과값은 

[ <5 empty items> ]

 

3. 배열에서 요소에 접근하기

 

console.log(fruits[0]);

console.log(fruits[1]);

console.log(fruits[2]);

 

결과값은

사과

배  

귤

 

 

배열의 메소드

1.  push  : 어떤 배열에 또다른 요소를 넣고 싶을 때 사용

 

let fruits = ["사과", "바나나"];

console.log("1 =>", fruits);

 

fruits.push("오랜지");

console.log("2 =>", fruts);

 

결과값을 비교해 보면,

1 => [ '사과', '바나나' ]
2 => [ '사과', '바나나', '오랜지' ]

 

2.  pop : 마지막 요소를 삭제하는 메소드.

 

let fruits = ["사과", "바나나"];

console.log("1 =>", fruits);

 

fruits.pop( );

console.log("2 => ", fruits);

 

결과값을 비교해 보면,

1 => [ '사과', '바나나' ]
2 =>  [ '사과' ]

 

이처럼 마지막 요소가 삭제된 것을 볼 수 있다. 

 

 

3. shift 메소드 : 첫번째 요소를 삭제하는 메소드

let fruits = ["사과", "바나나", "키위"];

console.log("1 =>", fruits);

 

fruits.shift( );

console.log("2 => ", fruits);

 

결과값은

1 => [ '사과', '바나나', '키위' ]
2 =>  [ '바나나', '키위' ]

 

 

4. unshift 메소드 : 맨 앞에 어떤 요소를 추가하는 메소드.

let fruits = ["사과", "바나나", "키위"];

fruits.unshift("포도");

console.log(fruits);

 

결과값은 

[ '포도', '사과', '바나나', '키위' ]

5. splice : 특정 요소를 지우고 내가 원하는 요소로 갈아끼운다. 

fruits.splice( 해당 요소들에서 지우고 싶은 시작 번호, 지우고 싶은 개수만큼의 번호 )

 

let fruits = ["사과", "바나나", "키위"]; 

fruits.splice(1, 2, "포도", "감");

console.log(fruits);

 

이렇게 했을 때 결과값은

[ '사과', '포도', '감' ]

 

6. slice : 내가 원하는 요소들만 그 순서를 유지한채 가지고 온다. 

fruits.slice(가져오고 싶은 요소 번호, 그만 가지고 오고 싶은 요소 번호);

 

let fruits = ["사과", "바나나", "키위"]; 

let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);

 

이렇게 했을 때 결과값은

[ '바나나' ]

 

 

7. forEach : 반복 실행 하게 하는것

배열인 담긴 변수가 있을때에,

변수이름.forEach( 함수 (함수이름){

     실행할 로직

}

 

let numbers = [1,2,3,4,5];

 

numbers.forEach( function ( item ) {

     console.log(item);

} );

 

이런식으로 사용한다. 

 

 

단순히 콘솔로그에 찍는것 말고 다른예도 봐보자

 

이건 numbers 라는 파라미터에는 어떠한 수들이 1개의 배열로 되어있는데, 이 배열의 각각의 원소에 2를 곱한 수들로 이루어진 새로운 배열을 내놔야 한다. 

function solution(numbers) {
    var answer = [];
    numbers.forEach(number => answer.push(2*number))
    return answer;
}

나는 map 을 통해 풀었는데, 

이사람은 forEach를 적극 활용했다. 

그런데 forEach 문은 결과값을 배열로 출력하지 않고, 하나하나 출력한다.

그러니까 우리가 기대하는건 [1, 2, 3, 4, 5] 이렇게 나오길 바랬다면,

forEach를 쓰면 

1

2

3

4

5

 

이렇게 나와버린다. !!! 

그래서 이사람은 push를 이용해 answer라는 빈 배열이 담긴 변수에 차례로 넣어준것!! 

 

8. map : 기존에 있던 배열을 가공해서 새로운 배열을 생산하는 역할을 한다. 

map 함수에 들어오는 function은 반듯이 return문을 가져야만 한다.

항상 원본 배열의 길이 만큼이 return된다. 

 

변수를 선언하고 = 기존 배열이 담긴 변수 이름.map(function(함수이름){

     return 함수이름 실행할 로직

});

 

let newNumbers = numbers.map(function( item ) {

     return item*2;

});

 

console.log(newNumbers);

 

결과값은 이렇다. 

[ 2, 4, 6, 8, 10 ]

 

그리고 이렇게 매개변수 자리에 함수를 넣는 것을 콜백 함수 라고 함

 

 

 

9. filter : 어떤 조건에 해당하는 것만 보여준다

map과 비슷하게 return문이 꼭 있어야만 하지만,

다른점은 원본 배열의 길이만큼 return하는 map과 달리 ,

filter문은 조건에 해당하는 것만 원본배열의 길이랑 상관없이 보여준다.

 

변수를 선언하고 = 기존 배열이 담긴 변수 이름.filter(function(함수이름){

     return 함수이름 실행할 로직

});

 

let numbers = [4, 1, 5, 4, 5];

 

let filteredNumbers = numbers.filter(function (item) {

    return item === 5

});

 

console.log(filteredNumbers);

 

결과값은 이렇다.

[ 5, 5 ]

 

그리고 이렇게 매개변수 자리에 함수를 넣는 것을 콜백 함수 라고 함

 

10.  find : 조건에 해당하면서, 첫번째로 해당하는 것만 반환한다. 

 

let numbers = [4, 1, 5, 4, 5];

 

let result = numbers.find(function (item) {

     return item > 3;

});

 

console.log(result);

 

결과값은

4

 

이처럼 조건에 해당하면서, 첫번째로 해당하는 것만 반환 하는 것이 find 문이다. 

그리고 이렇게 매개변수 자리에 함수를 넣는 것을 콜백 함수 라고 함