[JS] 배열의 메소드 - find , filter ,map

🚀 배열생성 

 

[방법1]

객체와 마찬가지로 가장 일반적이고 간편한 방식은 배열 리터럴을 사용하여 생성하는 것이다.

//방법1
const arr1 = [1,2,3];
console.log (arr1.length); //3 

//방법2
const arr2 = []; 
console.log(arr2.length) //0

//방법3 
const arr3 = [1, , 3]; //희소배열 
console.log(arr3.length) //3

 

- 배열 리터럴은 0개이상 요소를 쉼표로 구별하며 , [] 로 묶는다.

- 방법3에서의 arr3을 희소배열 (length가 실제요소개수보다 큰 배열)이라 한다.

 

(하지만 희소배열은 사용하지 않는것이 좋다. 배열과 개념에 맞지 않으며 성능에도 안좋은 영향이 있기 때문)

 

 

[방법2]

Array 생성자 함수를 사용하여 배열을 생성할 수 있다.

const arr1 = new Array(10); // 10개의 빈배열 생성

const arr2 = new Array(1,2,3); // [1,2,3] 생성

 

 

---

 

🚀 배열메소드 - find 

 

- 특정 조건에 부합하는 값의 첫번째 요소를 반환한다.

- filter와 유사하나 , 단 하나의 요소만을 찾는다는 점이 다르다.

- 어떤 요소도 특정 조건에 부합하지 못하면 undefined 를 반환한다.

- 원본수정 X

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arr.find(i => i > 5);   // 5보다 큰 숫자중 가장 첫번째 요소인 6반환

 

 

🚀 배열메소드 - filter

 

- 특정 조건에 부합하는 값을 찾고 그 값들로 이루어진 새로운 배열을 출력한다 .

- 즉, 콜백함수의 반환값이 true인 모든 요소를 모아 새로운 배열로 만들어 출력한다.

- 원본수정 X

 

  class Student {
        constructor(name, age, enrolled, score) {
          this.name = name;
          this.age = age;
          this.enrolled = enrolled;
          this.score = score;
        }
      }
      const students = [
        new Student("A", 29, true, 45),
        new Student("B", 28, false, 80),
        new Student("C", 30, true, 90),
        new Student("D", 40, false, 66),
        new Student("E", 18, true, 88),
      ];
      
     const result = students.filter((student) => student.enrolled);
     console.log(result);

student.enrolled 가 true인 요소를 배열로 만들어 출력한다.

 

 

[결과]

 

 

🚀 배열메소드 - map

 

- 이름과 같이 배열의 요소를 돌며 요소들을 1대1 mapping을 해준다.

- 기존의 값을 재정의할 수도 있고, 새로운 형태의 값을 정의하는 것도 가능하다.

- 원본수정 X

 

      class Student {
        constructor(name, age, enrolled, score) {
          this.name = name;
          this.age = age;
          this.enrolled = enrolled;
          this.score = score;
        }
      }
      const students = [
        new Student("A", 29, true, 45),
        new Student("B", 28, false, 80),
        new Student("C", 30, true, 90),
        new Student("D", 40, false, 66),
        new Student("E", 18, true, 88),
      ];
      
   //  make an array containing only the students' scores
   // result should be: [45, 80, 90, 66, 88]
   
     const result = students.map((students) => students.score);
     console.log(result);

students.score로 매핑하여 result값에 저장한다.

 

[결과]

 

---

 

 

또한  Array.prototype.filter() 메소드를 이용함으로써 Method Chaining 을 통해 구현할 수 있다.

 

* 메소드 체이닝 ?  여러 메서드를 이어서 호출하는 문법

 

const arr = [{
    'name' : 'title1',
    'contents' : 'contents1',
    'dataNum' : 1,
    'data' : [1, 2, 3]
}, {
    'name' : 'title2',
    'contents' : 'contents2',
    'dataNum' : 2,
    'data' : [1, 2, 3]
}, {
    'name' : 'title3',
    'contents' : 'contents3',
    'dataNum' : 3,
    'data' : [1, 2, 100]
}, {
    'name' : 'title4',
    'contents' : 'contents4',
    'dataNum' : 4,
    'data' : [1, 2, 3]
}, {
    'name' : 'title5',
    'contents' : 'contents5',
    'dataNum' : 5,
    'data' : [1, 2, 100]
}];

arr.map((i) => {
    if (i.data.includes(100)) {
        return i.name
    }
    return 
}).filter(i => i);
//expected output: ['title3', 'title5']

 

map을통해 data에 100닶이 들어있는 name을 배열에 매핑하고 , 그값들중 undefined 된 값을 제외한 값들만을 filter로 출력했다.

 

[결과] - map을 사용했을때 값   - map을 사용한 후 filter을 사용하였을때 값

 

* 참고로 원본배열 자체를 수정하는 메서드는 아래와 같다.  

 

push()  pop() shift() unshift()