16. Javascript 배열과 메서드

목차

1. 배열과 메서드

2. Array.prototype.forEach()   2.1. 단점

3. Array.prototype.filter()

 

---

1. 배열과 메서드

• JavaScript에서 기본적으로 배열을 많이 사용한다.
  • 배열안에 있는 객체
  • 객체안의 배열 등등
  • 배열은 for문과 함께 사용한다. 인덱스 값을 이용하여, for문과 함께 사용할 때 좀 더 많은 활용이 가능하다.
  • 이런 이유로 배열 메서드들은 반복을 돌려주는 함수들이 정말 많다.
    • forEach
    • filter
    • some
    • map
    • reduce

const arr = [2, 7, 5, 4, 5]
for(let i = 0; i < arr.length; i++){
    console.log(arr[i])
}
//2, 7, 5, 4, 5

---

2. Array.prototype.forEach()

• 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해준다.
• 인자에 함수를 넣는 콜백함수이다. (구현방식)
  • 콜백함수의 첫번째 매개변수는 요소값
  • 콜백함수의 두번째 매개변수는 인덱스값
• 단, 반복문을 멈출 수가 없다는 게 단점이다.

구현방식은 다음과 같다.

const arr = [2, 7, 5, 4, 5]

// 인자값: function
// 콜백함수
arr.forEach(function(value){
    console.log(value)
})

arr.forEach(function(value, index){
    console.log(value, index)
})

//====================================
let obj = {
    arr: [2, 7, 5, 4, 5],
    length: 5,
    forEach: function(callback){
        for(let i = 0; i < obj.length; i++) {
            callback(obj.arr[i], i)
        }
    },
}

function loop(value, index){
    console.log(obj.length, value, index)
}

obj.forEach(loop)
// 5 0
// 5 1
// 5 2
// 5 3
// 5 4

 

2.1 단점

 

단점으로는 반복을 멈추고 싶어도 멈출 수 없다는 점이다.

아래의 코드로 index값이 3인 경우에는 return을 하고싶지만, 그렇게 이루어지지 않는 것을 볼 수 있다.

const arr = [2, 7, 5, 4, 5]

arr.forEach(function(value, index) {
    if(index === 3) return
    console.log(value, index)
})

function loop(value, index){
    if(index === 3) return
    console.log(value, index)
}

arr.forEach(loop)
// 2 0
// 7 1
// 5 2
// 5 4
// 2 0
// 7 1
// 5 2
// 5 4

 

---

3. Array.prototype.filter()

 

• 기본적인 사용방법은 forEach()와 같다.
• 기존의 배열은 조작하지 않는다.
  • 새로운 배열의 조건에 맞는 값을 넣는다.

Q. 값이 5인 배열을 찾아 배열에 넣어라.

위의 문제를 for문과 filter를 사용해 풀어보자.

• for문

const arr = [2, 7, 5, 4, 5]
const arr2 = []

for(let i = 0; i < arr.length; i++){
    if(arr[i] === 5) {
        arr2.push(arr[i])
    }
}

• filter

const arr = [2, 7, 5, 4, 5]
const arr2 = arr.filter(v => v === 5)
console.log(arr2)

 

 

filter의 코드가 더 짧게 나타난다. filter는 어떤 방식으로 구현되는지 한 번 알아보자.

let obj = {
    arr: [2, 7, 5, 4, 5],
    length: 5,
    // forEach
    forEach: function(callback){
        for(let i = 0; i < obj.length; i++) {
            callback(obj.arr[i], i)
        }
    },
    // filter
    filter: function(callback){
        const newArr = []

        for(let i = 0; i < obj.length; i++) {
            const bool = callback(obj.arr[i], i)
            if(bool) {
                newArr.push(obj.arr[i])
            }
        }
        return newArr //forEach와의 차이점
    },
}

const newArr = obj.filter((v, i) => {
    return v === 5
})

 

---