[JS] javascript 에서 배열의 다양한 활용 방법 2

이전에 javascript에서 배열을 이용하는 방법에 대해 포스팅을 했었다.

https://devkingdom.tistory.com/309

[JS] javascript에서 배열의 활용

오늘은 이전에 정리한 기본적인 기능이외의 다양한 기능에 대해 정리하고자 한다.

 

slice

slice는 입력된 파라미터 n부터 시작해서 m개 반환 하는 메서드이다.

slice는 기존의 배열에 영향을 주지 않는다.

let arr = [1,2,3,4,5];
let sliceResult = arr.slice(0,3);

console.log(arr);
console.log(sliceResult);

 

만약에 아무것도 파라미터로 입력하지 않으면 배열을 복사하여 결과를 리턴한다.

let arr = [1,2,3,4,5];
let sliceResult = arr.slice();

console.log(sliceResult);

 

splice

반면 splice는 기존의 배열 값의 데이터를 지우고 지운 값을 반환한다.

let arr = [1,2,3,4,5];
let spliceResult = arr.splice(0,3);

console.log(arr);
console.log(spliceResult);

 

이런식으로 값을 교체하는 식으로도 활용을 할 수가 있다.

let arr = [1,2,3,4,5];
arr.splice(2,2,-3,-4);

console.log(arr);

 

그리고 값을 삭제하지 않고 중간에 끼워넣는 것도 가능하다.

let arr = ['나는', '바보', '입니다'];
arr.splice(1,0, "사랑의");

console.log(arr);

 

concat

concat을 이용해서 배열의 값을 합칠 수 있다. 배열 자체를 붙일 수 있고, 그냥 데이터를 붙일 수도 있다.

let arr = [0,1];
console.log(arr.concat(2,3));
console.log(arr.concat(2,3,4,[5,6]));

 

 

reverse

배열 값을 거꾸로 뒤집는다.

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

 

join

join을 이용하여 배열 값을 붙인다. 파라미터로 들어오는 값은 각 데이터 사이사이에 들어간다.

let arr = ["나는", "사랑의", "바보"];

let result = arr.join(" ");
console.log(result);

split

반대로 split를 이용하면 문자열을 잘라서 배열로 만들어 넣을수 있다.

let str = "kang|park|kim";

const result =str.split("|");
console.log(result);

 

Array.isArray

typeof로 배열을 확인하면 단순하게 object로 확인한다. 배열인지 여부를 체크할때는 Array.isArray를 사용하자

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

console.log(typeof arr);
console.log(Array.isArray(arr));

 

forEach

forEach문을 이용하여 배열을 순차적으로 순회하여 데이터 처리를 할 수 있다.

파라미터 첫번째 값으로는 데이터가, 두번째 값으로는 인덱스가, 세번째 값으로는 배열 자체가 오는데 보통 세번째는 생략하고 첫번째와 두번째 파라미터만 입력하여 사용한다.

let users = ['kang', 'kim', 'park'];
users.forEach((name, index, users) => {
  console.log(index + ':' + name);
});

 

indexOf, lastIndexOf

위의 메서드로 특정 데이터의 index를 찾을 수 있다.

let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(2));// 앞에서부터
console.log(arr.indexOf(2,2)); // index 2 이후에 있는 숫자 2의 index
console.log(arr.lastIndexOf(2)); // 뒤에서부터

 

includes

값이 있는지 없는지만 찾을 때는 includes를 이용하면 된다.

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

console.log(arr.includes(2));
console.log(arr.includes(6));

 

find, findIndex

find 뒤에 화살표 함수를 넣어서 특정 조건을 만족하는 데이터나 인덱스 값을 찾을 수 있다.

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

const result = arr.find((item) => {
  return item % 2 === 0;
})

console.log(result);

 

이런식으로 Object로 이루어진 배열에서 find는 더 큰 효과를 발휘한다.

let users = [{name : 'kang', gender : 'M'}, 
             {name : 'park', gender : 'M'}, 
             {name : 'kim', gender : 'F'}];

const result = users.find((user) => {
  if(user.gender === 'M') {
    return true;
  }
  return false;
});

console.log(result);

 

findIndex를 사용하면 인덱스 값을 가져와 리턴한다.

let users = [{name : 'kang', gender : 'M'}, 
             {name : 'park', gender : 'M'}, 
             {name : 'kim', gender : 'F'}];

const result = users.findIndex((user) => {
  if(user.gender === 'M') {
    return true;
  }
  return false;
});

console.log(result);

 

filter

find는 가장 먼저 찾은 단 한건의 데이터만 가져온다. 프로그래밍을 하다보면 복수의 값이 있는 결과를 가져와야할 때도 있다. filter를 이용하면 그런문제가 해결된다.

let users = [{name : 'kang', gender : 'M'}, 
             {name : 'park', gender : 'M'}, 
             {name : 'kim', gender : 'F'}];

const result = users.filter((user) => {
  if(user.gender === 'M') {
    return true;
  }
  return false;
});

console.log(result);

 

map

map을 이용하여 배열을 조작할 수 있다.

let users = [{name : 'kang', gender : 'M'}, 
             {name : 'park', gender : 'M'}, 
             {name : 'kim', gender : 'F'}];

let newUsers = users.map((user, index) => {
  return Object.assign({}, user, {
    userNo: index,
    isMan: user.gender === 'M',
  });
});

console.log(newUsers);

위의 로직처럼 객체의 속성을 새로 만들어 넣을 수도 있고..!

let arr = [1,2,3];

let threetimesArr= arr.map((data, index) => {
  return data*3;
});

console.log(threetimesArr);

이런식으로 모든 데이터에 동일한 로직을 넣을 때도 사용할 수 있다.

 

sort

sort를 통해 정렬을 할 수 있다.

let charArr = ["a", "b", "c", "d", "e"];
charArr.sort();
console.log(charArr);

 

문자열은 무리없어 정렬이 잘된다.

 

숫자를 정렬해보자.

let numArr = [8,1,15,9,17];
numArr.sort();
console.log(numArr);

원하는대로 값이 나오지 않는다.

sort 내부에서는 입력된 숫자값을 문자로 인식하기 때문인데, 정상적으로 비교하기 위해서는 함수를 통해 정수에 대한 비교가 가능하도록 해줘야한다.

let numArr = [8,1,15,9,17];

numArr.sort((a,b) => {
  return a-b;
});
console.log(numArr);

다만 이러한 정렬 처리는 실무에서는 Lodash 같은 라이브러리 사용하는 경우가 많으니, 왠만하면 라이브러리 사용을 권장한다.

 

reduce

배열의 값을 순차적으로 탐색해서 로직을 처리하는 방법은 여러가지다.

보통은 for나 forEach문을 통해서 로직을 처리한다.

예를 들어 배열에 들어간 데이터의 합을 forEach문으로 계산하면 아래와 같을 것이다. 

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

let result = 0;
arr.forEach(num => {
  result += num;
});

console.log(result);

이것을 reduce를 이용해서 바꿔보자.

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

const result = arr.reduce((prev, cur) => {
  return prev + cur;
}, 0);

console.log(result);

간단하게 설명을 드리자면 prev는 이전에 계산된 값, cur은 현재 처리하고자는 index에 해당하는 값, 그리고 하단에 있는 0은 초기값으로 prev 값을 해당값으로 초기화 한다.

 

조금 더 심화된 예제를 보여드리겠다.

let users = [
  {name : "kang", age : 33, gender : 'M'},
  {name : "park", age : 30, gender : 'M'},
  {name : "kim", age : 29, gender : 'F'},
  {name : "hong", age : 32, gender : 'M'},
  {name : "ko", age : 16, gender : 'F'},
];

let result = users.reduce((prev, cur) => {
  if(cur.gender === 'M') {
    prev.push(cur);
  }
  return prev;
}, []);

console.log(result);

이번에는 객체 배열을 처리하는 예제인데, 초기값으로 빈 배열을 두고 gender가 "M"인 데이터를 해당 배열에 넣어주는 예제이다. 결과는 아래와 같이 잘 나온다.

 

이번에는 위의 users 데이터의 각 user의 나이의 합을 reduce를 이용해 계산해보겠다.

let users = [
  {name : "kang", age : 33, gender : 'M'},
  {name : "park", age : 30, gender : 'M'},
  {name : "kim", age : 29, gender : 'F'},
  {name : "hong", age : 32, gender : 'M'},
  {name : "ko", age : 16, gender : 'F'},
];

let result = users.reduce((prev, cur) => {
  return(prev += cur.age);
}, 0);

console.log(result);

 

 

배열의 오른쪽부터 수행하고 싶으면 reduceRight()를 사용해주면 된다.

 

끝.