자바스크립트 - 배열 내장함수 - 2

concat

• concat은 두개의 배열을 이어 붙일 수 있습니다.

let array1 = ["green", "blue"];
let array2 = ["purple", "yellow"];

console.log(array1.concat(array2));

 

 

join

• join도 concat과 마찬가지로 배열을 하나로 합쳐주는데 concat과 다른점은 join 메서드는 하나의 배열에서 배열 요소들의 값들을 문자열로 이어주는 메서드라는 것입니다. 

let colors = ["green", "blue", "purple"];

console.log(colors.join());
console.log(colors.join(" "));

이 join 메서드 내부에 들어가는 매개변수는 구분자로, 요소들을 합칠 때 사이에 어떤 문자를 넣을 것인지 결정할 수 있습니다. 아무런 매개변수를 넣어주지 않으면 쉼표가 기본적으로 출력됩니다.

 

sort

• sort는 배열을 정렬할 때 사용하는 함수입니다.

let colors = ["green", "blue", "purple"];
colors.sort();

console.log(colors);

 

sort메서드를 사용하면 기본적으로 오름차순 방식으로 정렬이 됩니다.

 

그렇다면 내림차순으로 정렬하려면 어떻게 해야할까요?

매개변수로 함수를 전달하는데 이 함수를 직접 제작한 다음 전달하면 됩니다.

const compare = (a, b) => {
    if (a > b) return -1;
    else if (a < b) return 1;
    else return 0;
};

let colors = ["green", "blue", "purple"];
colors.sort(compare);

console.log(colors);

여기서 a는 배열의 다음 요소를, b는 배열의 이전 요소를 의미하고, a가 b보다 클 때, b가 a보다 클때, 그리고 그외 이렇게 3가지 조건으로 나눠 작성했습니다.

 

• 반환값이 -1 : 다음 요소의 값인 a가 이전요소의 값인 b보다 앞에 있어야 합니다
• 반환값이 1  :b가 a보다 앞에 있어야합니다
• 반환값이 0 : a와 b의 순서를 바꾸지 않는다 라는 의미입니다. 

우리는 내림차순으로 정렬해야 하므로 이전 값이 다음 값보다 커야하기 때문에 다음 요소인 a의 값이, 이전 요소b의 값보다 크다면 -1을 반환해 a가 b보다 앞에 있어야 한다고 알려주도록 하겠습니다. 

 

이번에는 숫자가 담긴 배열을 정렬해보겠습니다.

let numbers = [1, 100, 25, 50, 120, 3];
numbers.sort();

console.log(numbers); // [1, 100, 120, 25, 3, 50]

사전순으로 정렬이 되는 것을 볼 수 있습니다.

 

const compare = (a, b) => {
    //오름차순
    return a - b;
};

let numbers = [1, 100, 25, 50, 120, 3];

numbers.sort(compare);
console.log(numbers); // [1, 3, 25, 50, 100, 120]

앞에서 처럼 compare 함수는 0보다 작은 값이 반환되면, 이전 요소와 다음 요소의 위치를 바꾸기 때문에,

다음 요소에서 이전 요소를 뺀 값이 0보다 커야하므로 다음 요소인 a에서 이전 요소인 b를 뺀값이 음수라면, 순서를 바꾸도록 a-b의 값을 반환해주겠습니다.

 

내림차순도 작성해보면

const compare = (a, b) => {
    //내림차순
    return b - a;
};

let numbers = [1, 100, 25, 50, 120, 3];

numbers.sort(compare);
console.log(numbers); // [120, 100, 50, 25, 3, 1]

 

sort메서드를 한번 사용하면 이후에 해당 배열 요소의 순서는 정렬된 그대로 변경되어있다는 것을 주의해서 사용해야합니다.

 

 

reduce

• reduce는 아래의 코드(배열의 각요소에 대한 누적된 값)에서 유용하게 사용되는 내장 함수입니다. 

let numbers = [1, 100, 25, 50];
let sum = 0;

numbers.forEach((elm) => {
    sum += elm;
});

console.log(sum); //176

 

reduce메서드는 콜백함수와 initialValue라는 초기값을 전달하고, 이 콜백함수의 매개변수로는 accumulator, currentValue, currentIndex가 있습니다. 

 

reduce에서는 아래처럼 콜백함수와 초기값이 들어가고,

콜백함수의 매개변수로는 acc, cur, idx 이렇게 3가지를 전달받을 수 있습니다. 

즉 acc는 콜백함수의 반환값을 누적하는 매개변수이고, cur이라는 매개변수는 우리가 계속 사용했었던 currentValue 즉,처리할 현재 요소의 값을 나타냅니다.  마지막으로 currentIndex(idx)는 처리할 현재 배열 요소의 인덱스를 나타냅니다. 

let numbers = [1, 100, 25, 50];

let sum = numbers.reduce((acc, cur, idx) => {
    console.log(acc, cur, idx);
    return acc + cur;
}, 0);

console.log(sum);//176

 

이번에는 초기값을 10으로 해보겠습니다.

 

let numbers = [1, 100, 25, 50];

let sum = numbers.reduce((acc, cur, idx) => {
    console.log(acc, cur, idx);
    return acc + cur;
}, 10);

console.log(sum);//186

 

reduce메서드는 이처럼 배열의 모든 요소들에 대해 확인하고 누적된 값을 출력하고 싶을 때 유용하게 사용할 수 있고,

코드를 훨씬 깔끔하게 만들어주는 유용한 내장 함수입니다. 

 

 

isArray

• isArray메서드는 전달된 매개변수가 배열인지 아닌지를 판별하는 내장함수입니다.

console.log(Array.isArray([1, 100, 50, 3])); // true
console.logArray.isArray({ id: 3, color: "purple" })); // false
console.logArray.isArray("string")); // false
console.logArray.isArray(undefined)); // false

isArray메서드를 사용해 특정변수가 담고있는 값이 배열인지 아닌지 쉽게 확인할 수 있습니다. 

 

내장함수들을 추가로 더 알고싶으신 분들은 아래의 링크를 통해 하나씩 살펴보는 것을 추천드립니다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at

Array.prototype.at() - JavaScript | MDN

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C