배열의 내장함수 정리 - 2

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

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]


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]

 

forEach

Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행한다.

 

구문: forEach(callbackFn), forEach(callbackFn, thisArg)

 

매개변수

callbackFn

배열의 각 요소에 대해 실행할 함수, 반환값은 사용되지 않는다. 함수는 다음 인수를 사용하여 호출된다.

 

element

배열에서 처리 중인 현재 요소.

 

index

배열에서 처리 중인 현재 요소의 인덱스.

 

array

forEach()를 호출한 배열.

 

thisArg Optional

callbackFn을 실행할 때 this 값으로 사용할 값.

 

//1
let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

//2
let arr = [1, 2, 3, 4, 5];

arr.forEach((elm) => {
    console.log(elm);
});

//3
let arr = [1, 2, 3, 4, 5];

arr.forEach((elm, idx) => {
    console.log(`${idx} 번째 요소는 ${elm} 입니다.`);
});

//4
let arr = [1, 2, 3, 4, 5];

arr.forEach((elm, idx, array) => {
    console.log(`${idx} 번째 요소는 ${elm} 입니다.`);
    console.log(array)
});

 

filter

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링한다.

 

매개변수

callbackFn

배열의 각 요소에 대해 실행할 함수이다. 결과 배열에 요소를 유지하려면 참 값을 반환하고 그렇지 않으면 거짓 값을 반환해야 한다. 이 함수는 다음 인수를 사용하여 호출된다.

 

element

배열에서 처리 중인 현재 요소.

 

index

배열에서 처리 중인 현재 요소의 인덱스.

 

array

filter()가 호출한 배열.

 

thisArg Optional

callbackFn을 실행할 때 this 값으로 사용할 값.

let colors = [
    { id: 1, color: "green" },
    { id: 2, color: "blue" },
    { id: 3, color: "purple" }
];

let filterArray = colors.filter((elm, idx, array) => elm.id > 1);
console.log(filterArray); // [ { id: 2, color: "blue" } 와 { id: 3, color: "purple" } ]

 

reduce

배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

 

구문: arr.reduce(callback[, initialValue])

 

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

 

accumulator

누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.

 

currentValue

처리할 현재 요소.

 

currentIndex Optional

처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

 

array Optional

reduce()를 호출한 배열.

 

initialValue Optional

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

// 1. forEach 메서드 사용
let numbers = [1, 100, 25, 50];
let sum = 0;

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

console.log(sum); //176

// 2. reduce 메서드 사용
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

//3
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

 

isArray

인자가 Array인지 판별한다.

 

구문: Array.isArray(obj);

 

매개변수

obj

검사할 객체.

 

반환 값

객체가 Array라면 true, 아니라면 false.

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

 

sort

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 정렬은 stable sort가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

 

구문: arr.sort([compareFunction]);

 

매개변수

compareFunction Optional

정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.

 

반환 값

정렬한 배열. 원 배열이 정렬되는 것에 유의하자. 복사본이 만들어지는 것이 아니다.

 

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]


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]

 

concat

Array 인스턴스의 concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용된다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환한다.

 

구문: concat(), concat(value0), concat(value0, value1), concat(value0, value1, /* …, */ valueN)

 

매개변수

valueN Optional

새 배열로 연결할 배열 및/또는 값이다. 모든 valueN 매개변수가 생략된 경우, concat은 호출된 기존 배열의 얕은 복사본을 반환한다. 

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

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

 

join

배열의 모든 요소를 연결해 하나의 문자열로 만든다.

 

매개변수

separator Optional

배열의 각 요소를 구분할 문자열을 지정한다. 이 구분자는 필요한 경우 문자열로 변환된다. 생략하면 배열의 요소들이 쉼표로 구분된다. separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결된다.

 

반환 값

배열의 모든 요소들을 연결한 하나의 문자열을 반환한다. 만약 arr.length 가 0이라면, 빈 문자열을 반환한다.

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

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

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