Array 내장 함수

sort()

sort() 함수는 배열에 문자형 데이터가 있는 경우 오름차순으로 정렬합니다.

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

console.log(fruits);

배열 안에 숫자형 데이터가 있더라도 기본적으로 문자로 인식해서 오름차순으로 정렬합니다. 그래서 숫자 값으로 정렬하려면 정렬(sort)함수를 정의해서 사용해야 합니다.

// 오름차순
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a,b) {return a - b})

console.log(points);

// 내림차순
let points = [40, 100, 1, 5, 25, 10];
points.sort(function(a,b) {return b - a})

console.log(points);

역순

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();

console.log(fruits);

실무에서는 Object의 특정 키를 기준으로 sort()함수를 사용하는 경우가 많습니다.

let person = [{
    name : "유재석",
    point : 78,
    city : "서울"
},
{
    name : "김종국",
    point : 92,
    city : "서울"
},
{
    name : "양세찬",
    point : 76,
    city : "제주"
},
{
    name : "히히",
    point : 81,
    city : "서울"
}
];

person.sort(function(a, b){
    return a.point > b.point ? -1 : a.point < b.point ? 1 : 0
})

console.log(person);

filter()

filter() 함수는 특정 조건을 만족하는 배열의 요소만을 찾아서 새로운 배열로 반환합니다. filter() 함수는 배열을 다룰 때 가장 많이 사용하는 내장 함수입니다. 특정 조건을 만족하는 데이터만 추출해 내는 프로그램을 구현해야 하는 경우가 많은데, 이때 filter() 함수 기능을 잘 사용하면 코드를 매우 효율적으로 작성할 수 있습니다.

arr.filter(callback(element[, index[, array]])[, thisArg)])

filter()함수에는 특정 조건을 체크할 callback() 함수를 매개변수로 전달합니다. callback() 함수는 배열의 각 요소를 시험할 함수입니다. 시험을 통과(true)하면 요소를 그대로 유지하고, 통과하지 못하면(false)버리게 됩니다. 즉, true인 요소만을 찾아냅니다.

callback() 함수의 매개변수는 다음과 같습니다.

• element : 처리할 현재 요소
• index(optional) : 처리할 현재 요소의 인덱스
• array(optional) : 배열 전체

const words = ['spray', 'fldlfslfsl', 'fkd', 'fkldjflkdsj', 'dkfljlskf']

const result = words.filter(function(word){
    return word.length > 6; // 단어의 길이가 6자리보다 큰 단어만 추출해서 새로운 배열 변환
})

console.log(result);

let persons = [{
    name : "유재석",
    point : 78,
    city : "서울"
},
{
    name : "김종국",
    point : 92,
    city : "서울"
},
{
    name : "양세찬",
    point : 76,
    city : "제주"
},
{
    name : "히히",
    point : 81,
    city : "서울"
}
];

let pass = persons.filter(function(person){
    return person.point >= 80;
});

console.log(pass);

map()

map() 함수는 배열의 데이터가 Object형일 때, 배열에 담기 Object를 새로운 형태의 Object로 변환해서 배열로 반환합니다.

let userList = [{
    firstName : "재석",
    lastName : "유",
    email : "dkdk@gmail.com"
},
{
    firstName : "종국",
    lastName : "김",
    email : "dfadfafadfafasdf@gmail.com"
},
{
    firstName : "하",
    lastName : "하",
    email : "fdafadsf@gmail.com"
}
];

let userList2 = userList.map(function(user){
    return {
        fullName: user.lastName + user.firstName,
        firstName : user.firstName,
        lastName : user.lastName,
        email : user.email
    }
})

console.log(userList2);

실무에서 map()을 사용하는 첫 번째 용도는 다음과 같습니다. 데이터베이스로부터 가져온 데이터에는 존재하지 않지만, fullName처럼 여러 화면에 사용해야 하는 데이터가 가져온 데이터를 조랍해서 만들 수 있는 경우입니다. 데이터베이스에는 firstName과 lastName이 분리되어 잇지만 실제 화면에서는 firstName과 lastName을 같이 보여주고 있다면, 사용하는 곳에서 이를 처리하기 위한 코드를 매번 작성해야 합니다. map()을 통해 배열의 각 오브젝트 요소에 새로운 키(key)를 추가하여 필요한 곳에서 바로 사용할 수 있도록 합니다.

두번째는 데이터베이스로부터 가져온 데이터, 즉 배열에 담긴 각 오브젝트 요소가 실제 클라이언트에서 필요로 하는 것보다 훨씬 많은 필드를 담고 있을 때, 서버에서 클라이언트로 데이터를 전송하기 전에 클라이언트에서 필요한 피드만을 담도록 변경하기 위해서 사용합니다. 서버에서 클라이언트로 데이터를 전송하기 전에 map()함수를 통해 클라이언트에서 사용할 데이터만 새로 정의하면 네트워크 트래픽을 줄일 수 있기 때문에 성능향상에 도움이 됩니다.

reduce()

reduce()함수는 배열에 담긴 데이터를 하나씩 순회하며 callback() 함수의 실행 값을 누적하여 결과 값을 반환하는 함수입니다. 누적 결과 값은 숫자, 문자, 객체 모두 가능합니다. reduce()함수는 배열에 담긴 데이터의 합계를 구할 때 가장 만힝 사용합니다. 배열에 담긴 데이터가 오브젝트인 경우는 오브젝트 키를 사용해서 누적 값을 구합니다.

callback()함수는 다음과 같이 4개의 매개변수를 가질 수 있습니다.(주로 2개의 매개변수를 사요합니다.)

• 첫 번쨰 매개변수 : accumulator(누적값)
• 두 번쨰 매개변수 : currentValue(현재 배열의 요소)
• 세 번쨰 매개변수 : currentIndex(인덱스번호)
• 네 번쨰 매개변수 : arr(배열)

let points = [100, 1, 30,20, 30]
let sum = points.reduce(function(total, currentValue){
    return total + currentValue
}, 0);

console.log(sum);