JS 배열 반복 참조하는 메서드

발표 프로젝트에서 내가 맡은 부분은 이것이다.

기존에 주어진 배열은 변경하지 않고 배열을 반복적으로
참조하는 메서드라고 생각하자.

메서드의 종류는 아래와 같다.

1. forEach()
2. map()
3. filter()
4. every()
5. some()

위 메서드의 공통점은 전부 배열에 대한 반복을 실행하고
각 메서드 조건에 따라 알맞는 결과값을 뽑아온다 생각하자.

1. forEach( ) 메서드

간단하게 Arrays 배열에서 사용하는 for문이라고 생각을 하자
기존에 사용하던 for문에 비해 좀 더 깔끔하고 직관적이다.

// 문자(과일) 배열 샘플
var arr = ['🍎','🍊','🍉','🍇','🍍','🍌','🍒','🍆'];
var fruits = [];

위 변수 arr에 담겨진 과일 배열들을 forEach()문을 사용해
fruits이라는 변수에 옮겨담아 보겠다.

기존 for문

for (let i=0; i<arr.length; i++) {
  copy.push(arr[i]);
}
console.log('copy 배열에 옮겨담은 인덱스 요소:'+copy); 

forEach() 문 사용

// for each문
arr.forEach(function(ele){
    fruits.push(ele);
})
console.log('copy 배열에 옮겨담은 인덱스 요소:'+fruits);

둘다 출력값은 아래와 같으나 함수를 써서 더욱 깔끔한 코드를 볼 수있다.

2. map ( ) 메서드

map ( ) 메서드는 콜백함수를 실행한 결과를 가지고 새로운 배열을
만들때 사용한다.

즉, map 함수는 기존 배열을 콜백함수에 의해 새 배열을 만드는 함수다.

//예제 1번

let num = [0,1,2,3,4,5,6,7,8];

let result = num.map(function(ele){
    return ele*ele;
})

console.log(result);

위의 예제 변수 num의 배열을 콜백함수로 인덱스 값이 하나씩 들어가고

return ele*ele;

값을 주어 들어온 요소(인덱스)마다 제곱근을 하여 result라는
변수에 저장을 시킨다.

결과 값은 아래와 같다.

---

//예제 2번

var students = [
    {id:1, name:"james"},
    {id:2, name:"tim"},
    {id:3, name:"john"},
    {id:4, name:"brian"}
  ];

  var names = students.map(function(ele){
      return ele.name;
  })

  console.log(names);

students에 있는 배열들을 map( ) 함수를 이용해 names배열에
학생들의 이름만 저장시켜 볼것이다.

map( )함수가 실행되면서 매개변수가 배열의 인덱스(인수)들을
각각 불러오고 블록문 내에 ele.name이라는 key값을 붙혀

students에 있는 학생 이름만 변수 names에 저장을 시켰다

결과값은 아래와 같다.

각 인덱스에 이름값이 잘 저장된 것을 확인할 수 있다.

3. filter ( ) 메서드

filter() 메서드는 해당 배열의 모든 요소에 대하여 반복적으로
명시된 콜백함수를 실행하고,
그 결과값이 true인 요소들 '만' 새로운 배열에 담아 반환한다

var arr1 = [1 , -3 , 10 , 100 , -20 , 30];

var result = arr1.filter(function(ele){
    return ele>10;
})

console.log(result);

arr1 배열의 요소들 중에서
ele(요소)가 10보다 큰 요소들만 변수 result에 넣어준다.

결과 값은 다음과 같다.
10보다 큰 요소들 만 변수 result에 들어가 있는것을 확인할 수 있다.

4. every ( ) 메서드

evert( ) 메서드도 해당 배열의 모든 요소에 대해 반복적으로 명시된 콜백함수를 실행하고 결과값이 모두 TRUE여야만 TRUE를 반환 한다.

var arr1 = [1 , -3 , 10 , 100 , -20 , 30];

var result = arr1.every(function(ele){
    return ele>10;
})

console.log(result);

arr1 배열의 요소들이 모두 every( )콜백 함수의 return값이
모두 TRUE여야 TRUE값을 뱉어낸다.

그렇다면 결과는 당연히 10보다 작은 음수 숫자도 존재하기 때문에
false 값을 뱉어낼 것이다.

퉤

5. some ( ) 메서드

some ( ) 메서드는 every( ) 메서드와 반대된 개념으로 생각하면 된다

바로 예제를 보자 (위와 같은 예제임)

var arr1 = [1 , -3 , 10 , 100 , -20 , 30];

var result = arr1.some(function(ele){
    return ele>10;
})

console.log(result);

단지 메서드만 every( ) 에서 some( )으로 바꿔주었고
arr1 배열 요소중 하나만 return 값이 true면 ture값을 뱉어낸다