JavaScript - 배열(2)

1. 📄배열과 메서드

배열은 JavaScript - 배열(1) 게시글에 다룬push, pop, unshift, shift 메서드 이외에 더 많은 메서드를 내장하고 있습니다. ( splice, slice, concat, forEach, indexOf, lastIndeOf, includes, find, findIndex, filter...등)

2. ✅배열 요소조작 메서드

1. splice - 요소를 자유자재로 추가, 삭제, 교체가 가능합니다.

// arr.splice(index[deleteCount, ele1, ..., eleN])
// 삭제
let arr = ['i', 'study', 'javascript']
arr.splice(1,1); // index 1부터 요소 한 개를 제거
console.log(arr); // ['i', 'javascript']
// 수정
let arr2 = ['i', 'study', 'javascript', 'right', 'now'];
//처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체
arr2.splice(0, 3, "let's", "dance");
console.log(arr2);  // let's, dance, right, now
// 추가
let arr3 = ['i', 'study', 'javascript']
arr3.splice(2, 0, 'complex', 'language');
console.log(arr); // 'i, study, complex, language, javascript'
// 음수 index 사용한 배열 끝부터 요소 나타내기
let arr4 = [1,2,5]
// index -1 (배열 끝에서부터 첫번째 요소) , 0개의 요소를 삭제, 3과 4 추가
arr.splice(-1, 0, 3, 4)
console.log(arr); 1,2,3,4,5

2. slice - "start" index부터 "end"인덱스까지 요소를 복사한 새로운 배열을 반환
   arr.slice()를 통하여 인수를 하나도 넘기지 않고 호출하여 arr의 복사본 생성가능

let arr = [1,2,3,4,5];
console.log(arr.slice(1,3)); // 2,3 index가 1인 요소부터 index가 3인  요소까지를 복사(index3인 요소 제외)
// start, end가 음수일 경우 배열 끝에서부터의 요소 개수를 의미
console.log(arr.slice(-2));  // 4,5 index가 -2인 요소부터 제일 끝 요소까지를 복사

3. concat - 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할때 사용

let arr = [1,2];
let ar1 = [3,4];
let arg2 = [5,6];
arr.concat(arg1, arg2...);
arr.concat(arr.concat([3,4]);
arr.concat(arr.concat([3,4], 5, 6); 

concat은 객체가 인자로 넘어오면 객체는 분해되지 않고 통으로 복사되어 더해집니다. 하지만 유사 배열 객체에 특수한 
프로퍼티`Symbol.isConcatSpreadable`이 있으면 객체를 배열로 취급

let arr =[1,2];
let arrayList = {
  0: "something",
  length: 1
}
let arrayList2 = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
}
console.log(arr.concat(arrayList)) // 1,2,[object, object]
console.log(arr.concat(arrayList2)) // 1,2, 'something', 'else'

3. ✅배열 탐색 및 반복메서드

1. forEach - 주어진 함수를 배열 요소 각각에 대해 실행

arr.forEach(function(item,index, array){
  // 요소에 무언가를 합니다.
});

2. indexOf, lastIndexOf, includes
   arr.indexOf(item, from) - index from부터 시작해 item(요소)를 찾습니다. 요소를 발견하면 해당 요소의 index를 반환 발견하지 못하면 -1을 반환
   arr.lastIndexOf(item, from) - 검색을 끝에서부터 시작한다는 점만 다르고 indexOf와 특징이 같습니다.
   arr.includes(item, from) - from부터 시작해 item이 있는지 검색 -> 해당 요소를 발견하면 true반환

let arr = [1,0,false]
console.log(arr.indexOf(0)); // 1
console.log(arr.indexOf(false)); // 2
console.log(arr.indexOf(null)); // -1
console.log(arr.includes(1)); // true

3. find와 findIndex - 객체를 배열 내에서 찾을때 사용 findIndex는 맞는 요소가 없을경우 -1을 find는 undefined를 반환

let result = arr.find(function(item, index, array){
	// true가 반환되면 반복이 멈추고 해당 요소 반환
	 // 조건에 해당하는 요소가 없으면 undefined 반환
});
let users = [
  {id: 1, name: 'jane'},
  {id: 2, name: 'gagaman'},
  {id: 3, name: 'kukudas'}
  ];
let user = users.find(item => item.id ==1);
console.log(user.name); // jane

4. filter - 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾습니다. find와 차이점은 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점이 다릅니다.

let results = arr.filter(function(item, index,arry){
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});
let users = [
  {id: 1, name: 'jane'},
  {id: 2, name: 'gagaman'},
  {id: 3, name: 'kukudas'}
  ];
// 원하는 users 조회
let someUsers = users.filter(item => item.id < 3);
console.log(someUsers.length); //2

4. ✅배열을 변경하는 메소드

1. map - 배열 요소 전체를 대상으로 함수를 호출, 함수 호출 결과를 배열로 반환

let result = arr.map(function(item, index, array){
  // 요소 대신 새로운 값을 반환
});
let lengths = ['jimin','jungkook','RM'].map(item => item.length);
console.log(lengths); // 5, 7, 6

2. sort - 배열의 요소를 정렬해줍니다.(배열 자체가 변경됩니다.)
   문자열 비교엔 localeCompare사용

let arr = [1,2,3,15];
// arr 내부가 정렬
arr.sort();
console.log(sort); // 1,15,2,3 <- 문자열로 취급되어 정렬되었습니다.
function compareNumeric(a, b) {  
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}
arr.sort((comparNueric));  // 인수로 넘겨주는 함수는 반드시 값 두개를 비교해야 하고 반환값도 있어야 합니다.
console.log(arr) // 1,2,15; 
//화살표 함수로 깔끔하게 표현 가능
arr.sort( (a,b) => a-b);

3. reverse - arr의 요소를 역순으로 정렬시켜주는 메소드입니다. 반환값은 재정렬된 배열 입니다.

let arr = [1,2,3,4]
arr.reverse();
console.log(arr) // 4,3,2,1

4. split - 특정 구분자(delim) 기준으로 문자열을 쪼갠후 배열로 반환해줍니다.

let names = 'suzy|hoha|lamy';
let arr = names.split('|');
console.log(arr) // [suzy, hoha, lady]

5. join - split과 반대역할을 메서드로 인수(glue)를 배열 요소에 모두 합친 후 하나의 문자열을 만들어 줍니다.

let arr = ['lolo','lala','hihi'];
let str = arr.join('-');
console.log(str); // lolo-lala-hihi

6. reduce - 배열을 기반으로 값 하나를 도출할때 사용(map, filter, sort등 반복적 사용하는 대부분을 구현가능)

// 문법 구성도
// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => {return 결과}, 초깃값);
const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const initValue = 0; //초깃값
const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, array) => {
    return initialValue + currentValue;
}, initValue);
console.log(totalResult) // 55

// reduce를 활용하여 list안 요소별 갯수를 구할 수 있습니다.
const fruit = ['apple', 'grape', 'banana', 'apple', 'orange', 'grape', 'apple', 'orange'];
const result = fruit.reduce((object, currentValue) => {
    if (!object[currentValue]) {
        object[currentValue] = 0;
    }
    object[currentValue]++;
 
    return object;
}, {}); 
console.log(result); // {apple:3, banana:1, grape:2, orange:2}

5. ✅배열 여부 확인

배열여부를 확인하기 위한 메서드 Array.isArray

배열은 독립된 자료형으로 취급되지 않고 객체형으로 속합니다, typeof로는 일반 객체와 배열을 구분할 수 없습니다. 배열임을 구분하기 위해 Array.isArray를 사용합니다.

console.log(Array.isArray({}); // false
console.log(Array.isArray([]); // true