Array method - 배열 메소드, 배열 고차 함수

배열 메소드

// 배열의 생성자 함수는 Array
console.log(arr.constructor === Array);   // true

// 배열의 프로토타입 객체는 Array.prototype -> 이 안에 constructor가 있고 arr는 Array.prototype을 상속한다.
console.log(Object.getPrototypeOf(arr) === Array.prototype);  // true
// => Array.prototype은 배열을 위한 빌트인 메서드를 제공한다.

 

Array.prototype.indexOf

•  indexOf : 배열에서 요소가 위치한 인덱스를 리턴
•  lastIndexOf : 배열의 요소가 위치한 마지막 인덱스를 리턴
•  includes : 배열에 해당 요소 포함 여부 리턴

const foodList = ['물회', '삼계탕', '냉면', '수박', '물회'];

console.log(`foodList.indexOf('물회') : ${foodList.indexOf('물회')}`);            // 0
console.log(`foodList.indexOf('물회', 1) : ${foodList.indexOf('물회', 1)}`);      // 1번 인덱스부터 시작 4
console.log(`foodList.indexOf('삼겹살') :  ${foodList.indexOf('삼겹살')}`);             
// -1  인덱스로서 존재할 수 없는 숫자로 '찾지 못했다'는 걸 의미

console.log(`foodList.lastIndexOf('물회') : ${foodList.lastIndexOf('물회')}`);       // 4
console.log(`foodList.lastIndexOf('물회', 1) : ${foodList.lastIndexOf('물회', 1)}`);   
// 0  1번인덱스부터 0번쪽으로 읽는다
console.log(`foodList.lastIndexOf('삼겹살') : ${foodList.lastIndexOf('삼겹살')}`);   // -1

console.log(`foodList.includes('물회') : ${foodList.includes('물회')}`);             // true
console.log(`foodList.includes('삼겹살') : ${foodList.includes('삼겹살')}`);         // false

 

 

Array.prototype.push : 배열의 맨 뒤에 요소 추가

Array.prototype.pop : 배열의 맨 뒤에 요소 제거

const chineseFood= ['짜장면', '짬뽕', '우동'];

console.log(`push 전 chineseFood : ${chineseFood}`);            // 짜장면,짬뽕,우동

chineseFood.push('탕수육');
chineseFood.push('양장피');
// chineseFood.push('탕수육', '양장피');

console.log(`push 후 arr :  ${chineseFood}`);                   // 짜장면,짬뽕,우동,탕수육,양장피

console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 양장피
console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 탕수육
console.log(`chineseFood.pop() : ${chineseFood.pop()}`);        // 우동

console.log(`pop 후 chineseFood :  ${chineseFood}`);            // 짜장면,짬뽕

 

 

Array.prototype.unshift : 배열의 맨 앞에 요소 추가

Array.prototype.shift : 배열의 맨 앞 요소 제거 후 그 요소를 반환

const chickenList = ['양념치킨', '후라이드', '파닭'];

console.log(`unshift 전 chickenList : ${chickenList}`);         // 양념치킨,후라이드,파닭

chickenList.unshift('간장치킨');
chickenList.unshift('마늘치킨');
// chickenList.unshift('간장치킨', '마늘치킨'); -> 이 경우 이 덩어리 그대로 앞에 추가됨

console.log(`unshift 후 chickenList : ${chickenList}`);         // 마늘치킨,간장치킨,양념치킨,후라이드,파닭

console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 마늘치킨
console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 간장치킨
console.log(`chickenList.shift() : ${chickenList.shift()}`);    // 양념치킨

console.log(`shift 후 chickenList : ${chickenList}`);           // 후라이드,파닭

 

Array.prototype.concat : 두 개 이상의 배열을 결합

const idol1 = ['아이브', '오마이걸'];
const idol2 = ['트와이스', '에스파'];
const idol3 = ['블랙핑크', '레드벨벳'];

// 배열명.concat(배열명1, 배열명2, ...)
const mix = idol1.concat(idol2);   // 나열된 순서대로 결합한다. 1+2
const mix2 = idol3.concat(idol1, idol2);  // 3+1+2

console.log(`idol1 기준으로 idol2 배열을 concat : ${mix}`);            // 아이브,오마이걸,트와이스,에스파
console.log(`idol3 기준으로 idol1, idol2 배열을 concat : ${mix2}`);    
// 블랙핑크,레드벨벳,아이브,오마이걸,트와이스,에스파

 

Array.prototype.slice : 배열의 요소 선택 잘라내기, 원본 배열은 변경하지 않는다.

Array.prototype.splice : 배열의 index 위치의 요소 제거 및 추가, 원본 배열을 변경한다.

const front = ['HTML', 'CSS', 'JavaScript', 'jQuery'];

// slice(시작인덱스, 종료인덱스->그 인덱스 앞에서 자른다)
console.log(`front.slice(1, 3) : ${front.slice(1, 3)}`);                     // CSS,JavaScript
console.log(`front : ${front}`);                                             // HTML,CSS,JavaScript,jQuery

// splice(index, 제거수, 추가값1, 추가값2, ...)
console.log(`front.splice(3, 1, "React") : ${front.splice(3, 1, "React")}`);    
//jQuery  3번인덱스부터 요소 1개를 제거하고 React를 추가한다.
console.log(`front : ${front}`);                                             // HTML,CSS,JavaScript,React

 

Array.prototype.join : 배열을 구분자로 결합하여 문자열로 반환

const snackList = ['사탕', '초콜렛', '껌', '과자'];
console.log(`snackList.join() : ${snackList.join()}`);         // 구분자를 안 쓰면 컴마->사탕,초콜렛,껌,과자
console.log(`snackList.join('/') : ${snackList.join('/')}`);   // 사탕/초콜렛/껌/과자

 

Array.prototype.reverse : : 배열의 순서를 뒤집는다. 원본도 바뀜.

console.log(`[1, 2, 3, 4, 5].reverse() : ${[1, 2, 3, 4, 5].reverse()}`);  
// 5,4,3,2,1

 

배열 고차 함수

고차 함수 : 함수를 인수로 전달받거나 함수를 반환하는 함수

Array.prototype.sort : 배열을 정렬 기준으로 정렬

et numbers = [];

for(let i = 0; i < 10; i++) {
    numbers[i] = Math.floor(Math.random() * 100 ) + 1;
}

//floor 로 내림처리

console.log(`정렬 전 numbers : ${numbers}`);
//정렬 전 numbers : 11,29,22,76,97,68,13,7,14,61

// 오름차순 정렬이 기본이며 정렬 후 정렬 순서를 유지한다. 
numbers.sort();
console.log(`정렬 후 numbers. : ${numbers}`);
//정렬 후 numbers. : 11,13,14,22,29,61,68,7,76,97

배열은 기본적으로 문자열 정렬이 되므로 한자리수, 세자리수가 올바르지 않게 정렬되는 모습을 보임
 => 다른 정렬 기준을 사용하려면 compare 함수를 인수로 전달해야 함

// 숫자 오름차순 정렬
function compare(a, b) {  
    if(a > b) return 1; // 양수면 위치를 바꾼다
    if(a == b) return 0;
    if(a < b) return -1;
}
//compare는 콜백함수 sort는 고차함수이다.
numbers.sort(compare);
console.log(numbers);
//출력
[
   7, 11, 13, 14, 22,
  29, 61, 68, 76, 97
]



// 숫자 내림차순 정렬
numbers.sort(function(a, b) { return b - a;});  
// b - a가 양수, 뒤에 자리가 더 크면 자리를 바꾼다 -> 내림차순
numbers.sort((a, b) => b - a);
console.log(numbers);

//출력
[
  97, 76, 68, 61, 29,
  22, 14, 13, 11,  7
]

 

Array.prototype.forEach : for를 대체할 수 있는 고차함수

배열.forEach(function(item, index, array){
        
    });

함수 몸체에 배열 요소 각각에 실행할 기능을 작성하며, 요소만 반복해도 된다.

numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(item, index, array){
    console.log(`item : ${item}`);
    console.log(`item : ${index}`);
    console.log(`item : ${array}`);
}); //item : 요소 , array는 배열 전체

//출력

item : 1
item : 0
item : 1,2,3,4,5
item : 2
item : 1
item : 1,2,3,4,5
item : 3
item : 2
item : 1,2,3,4,5
item : 4
item : 3
item : 1,2,3,4,5
item : 5
item : 4
item : 1,2,3,4,5




// 각 요소 별로 * 10 한 값을 콘솔에 출력
numbers.forEach(item => console.log(item * 10));
//출력
10
20
30
40
50

 

Array.property.map : 배열 요소 전체를 대상으로 콜백 함수 호출 후 반환 값들로 구성된 새로운 배열 반환

배열.map(function(item, index, array){
        
    })

함수 몸체에 배열 요소 각각에 반환할 새로운 값을 작성한다.

const types = [true, 1, 'text'].map(item => typeof item); //item의 테이터 타입을 반환해라
console.log(types);
//[ 'boolean', 'number', 'string' ]

const lengths = ['apple', 'banana', 'cat', 'dog', 'egg'].map(item => item.length);
console.log(lengths);
//[ 5, 6, 3, 3, 3 ]

 

Array.prototype.filter : 배열 요소 전체를 대상으로 콜백 함수 호출 후 반환 값이 true인 요소로만 구성된 새로운 배열 반환

const odds = numbers.filter(item => item % 2); //2로 나누었을때 몫이 있는 요소 반환
console.log(odds);
//[ 1, 3, 5 ]

 

Array.prototype.reduce : 배열을 순회하며 각 요소에 대하여 이전의 콜백 함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환

=>reduce 함수는 배열의 요소를 순차적으로 순회하면서 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환

arr.reduce((accumulator, currentValue, index, array) => {

}, initialValue);

- accumulator : 누산기 순회하면서 계속 더해져서 합쳐지는 값
- initialValue Optional : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 
초기값을 제공하지 않으면 배열의 첫 번째 요소가 previousValue로 선언되고 두 번째 요소가 currentValue로 선언된다.
- 리턴 값 : 누적 계산의 결과값

•     previousValue : 이전 콜백의 반환 값
•     currentValue : 배열 요소의 값
•     currentIndex : 인덱스
•     array : 메소드를 호출한 배열

numbers.reduce(function(previousValue, currentValue, currentIndex, array){
        console.log(`previousValue : ${previousValue}`);
        console.log(`currentValue : ${currentValue}`);
        console.log(`currentIndex : ${currentIndex}`);
        console.log(`array : ${array}`);
    })
    
    
    //출력
previousValue : 1
currentValue : 2
currentIndex : 1
array : 1,2,3,4,5
previousValue : undefined  //콜백을 한번만 해서?
currentValue : 3
currentIndex : 2
array : 1,2,3,4,5
previousValue : undefined
currentValue : 4
currentIndex : 3
array : 1,2,3,4,5
previousValue : undefined
currentValue : 5
currentIndex : 4
array : 1,2,3,4,5

// 합산
    const sum = numbers.reduce(function(previousValue, currentValue){
        return previousValue + currentValue;  //연산결과를 누산기, previousValue에 넣어 최종값을 얻는다.
    });
    console.log(`sum : ${sum}`)   // 1+2 = 3, 3+3 = 6 6+4 =10 10+5 =15


//최대값 취득
    const max = numbers.reduce(function(pre, cur) {
        return pre > cur ? pre : cur;   // 1 < 2 , 2 < 3, 3 < 4, 4 < 5
    });
    console.log(`max : ${max}`); //5

 

Array. prototype.some : 배열 내 일부 요소가 콜백 함수의 테스트를 통화하는지 확인하여 그 결과를 boolean으로 반환

// 배열 내 요소 중 10보다 큰 값이 1개 이상 존재하는지 확인
let result = [1, 5, 3, 2, 4].some(item => item > 10);
console.log(`result : ${result}`);  // false

// 배열 내 요소 중 3다 큰 값이 1개 이상 존재하는지 확인
 result = [1, 5, 3, 2, 4].some(item => item > 3);
console.log(`result : ${result}`);  //true

 

Array.prototype.every : 배열 내 모든 요소가 콜백 함수의 테스트를 통화하는지 확인하여 그 결과를 boolean으로 반환

// 배열 내 모든 값이 3보다 큰지 확인
result = [1, 5, 3, 2, 4].every(item => item > 3);
console.log(`result : ${result}`);  //false

// 배열 내 모든 값이 0보다 큰지 확인
result = [1, 5, 3, 2, 4].every(item => item > 0);
console.log(`result : ${result}`);  //ture

 

Arrays.prototype.find : 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수를 실행하여 그 결과가 참인 첫번째 요소를 반환. 참인 요소가 존재하지 않다면 undefinded 반환

Arrays.prototype.findIndex : 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환. 참인 요소가 존재하지 않다면 -1 반환

 

const student = [
    { name : '유관순', score : 90},
    { name : '홍길동', score : 80},
    { name : '장보고', score : 70}
];

result = student.find(item => item.name == '유관순');
console.log(result);									//{ name: '유관순', score: 90 }
result = student.findIndex(item => item.name == '유관순');
console.log(result);									//0

result = student.find(item => item.name == '신사임당');
console.log(result);									//undefined
result = student.findIndex(item => item.name == '신사임당');
console.log(result);									//-1

// find, findIndex는 일치하는 요소를 찾으면 더 이상 탐색하지 않고 하나의 요소, 인덱스만 반환한다.

 

Array.property.filter : filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.

// 만약 80점 이상인 학생들만 찾고 싶다면?
result = student.filter(item => item.score >= 80);
console.log(result); 
//[ { name: '유관순', score: 90 }, { name: '홍길동', score: 80 } ]

result = student.find(item => item.score >= 80);
console.log(result);
// 첫 번째 요소인 유관순만 반환한다. { name: '유관순', score: 90 }

// 만약 80점 이상인 학생들만 찾고 싶다면?
result = student.filter(item => item.score >= 80);
console.log(result); // 유관순 하나만 반환한다.

result = student.find(item => item.score >= 80);
console.log(result);