중급 기본 정리 (with 앙마코딩) 배열 매서드 Array 1탄

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)

문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

배열 매소드

기본적인 배열 매소드

push() , pop(), unshift(), shift()

순서대로 뒤에 삽입, 뒤에 삭제, 앞에 삽입, 앞에 삭제이다.

splice(n, m) : 특정 요소 지움

n번째 요소부터 m개를 지울 때 사용한다. (당연히 번호는 인덱스 번호이다.)

let arr = [1,2,3,4,5];
arr.splice(1,3);
/* [1,5]*/
let arr1 = [1,2,3,4,5];
arr1.splice(1,3,6,7);
/* [1,6,7,5]*/

splice(n,m,x) 예시에서 보듯 그 뒤에 입력하는 인수는 배열에 삽입된다. (지운 자리 즉 삭제하기 전 n번째 요소 앞에 삽입된다.)
이를 이용하면 삭제 없이 원하는 위치에 요소를 추가 할 수 있다.
arr.splice(1,0, x) 이렇게 m의 인수를 0으로 삽입할 경우 지울 요소은 없고 그 자리에 새로운 요소만 추가된다.

그렇다면 splice 값은 무엇일까?
splice값은 삭제된 요소를 반환한다. 위 예제를 들어보면 arr.splice(1,3)의 값은 [2,3,4]를 반환한다.

slice(n,m) : n부터 m까지 반환

문자열 매소드와 동일하게 n부터 m까지(m은 포함하지 않고 그 앞까지 반환한다.
인수를 입력하지 않으면 배열을 그대로 복사하게 된다.

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

concat(arr1, arr2 ....) : 합쳐 새로운 배열 반환

기존 배열에 인수로 들어간 배열을 합쳐 반환한다.(순서대로 뒤로 붙는다.)
또한 배열이 아니더라도 배열 안에 삽입된다.

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

forEach(fn) : 배열 반복

let users = ['Tom' ,'jerry', 'Btae'];
users.forEach((item, index, arr) => {
  /*.....*/
});

forEach는 매개변수를 함수로 받는다 예시는 화살표 함수를 사용하여 표기했다.
함수 매개변수로 item은 배열에 요소를 가르키고, index는 인덱스, arr는 users라는 배열 자체를 가르킨다. 보통 arr 매개변수는 잘 사용하지 않는다.

let users = ['Tom' ,'jerry', 'Btae'];
users.forEach((name, index) => {
  console.log(`${index + 1}. ${name}`);
});
/*
1. Tome
2. jerry
3. Btae
*/

위 예시처럼 배열에 인수마다 반복하여 총 3번 실행된 결과이다.
이 매서드는 노드리스트 즉 클래스 명을 가지고 왔을 때 사용 할 수도 있다.

indexOf(), lastIndexOf()

문자열과 동일하게 작동한다.

indexOf()는 앞에서부터 lastIndexOf()는 뒤에서부터 해당 인수를 배열에서 찾는다.

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

arr.indexOf(3); // 2
arr.indexOf(2,2); // 5
arr.lastIndexOf(3); //6

주의할 점은 배열과 마찬가지로 찾는 인수를 처음 만난 인덱스를 반환하고 그 이후는 찾지 않는다는 점이다.
예시에서 볼 수 있듯이, 3을 찾을 때는 앞에 인덱스 2번만 찾는다. 그 다음 수를 찾고 싶다면 쉼표(,)로 구분하여 다시 작성하게 되면 첫 번째 인수를 넘기고 다음 인덱스 번호를 반환한다.
만약 뒤에서부터 찾고 싶다면 lastIndexOf()를 사용하면 된다.

includes() : 포함하는지 확인

indexOf()처럼 해당 인수의 인덱스를 확인할 필요 없이 단순히 포함하는지만 확인할 때 사용한다.
포함한다면 true, 없다면 false를 반환한다.

find(fn), findIndex(fn)

indexOf()와 동일하게 인수를 찾지만, 함수를 인수로 넣어 보다 복잡한 조건을 부여할 수 있다. (예를 들면 짝수만 찾기)
특히 객체 배열에 경우 indexOf() 활용이 어려움으로 많이 사용된다.
이것도 마찬가지로 첫 번째 값만 반환하고 뒤에는 실행하지 않는다. 만약 반환될 것이 없다면 undefined를 반환한다.
find는 해당 배열 요소를 findIndex는 요소의 인덱스를 반환한다.

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

const result = arr.find((num) => {
    return num % 2 === 0
}) // 2
/* 짝수인 첫번째 2를 반환 findIndex를 사용하면 인덱스 번호 1을 반환*/

const list = [
  { age: 30},
  { age: 20 },
  { age:10 },
]; 

const result1 = list.find((user) => {
  if(user.age < 19){
    return true;
  }
  return false;
}); 

console.log(result1); // { age : 10 }
/* findIndex를 사용하면 인덱스 번호 2를 반환*/

filter(fn) : 만족하는 모든 요소를 배열로 반환

앞선 매서드는 만족하는 처음 요소만 반환하고 중지했다. fillter 매서드는 해당 배열에 모든 요소를 계산하고 모든 값을 배열의 형태로 반환한다.

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

const result = arr.filter((num) => {
    return num % 2 === 0
}) // [2,4,2]
/* 짝수인 모든 요소를 반환*/

reverse() : 역순으로 재정렬

기존 배열을 역순으로 재정렬하여 반환한다. 이는 게시판에서 마지막 글을 먼저 보여주거나 최근에 가입한 사람을 보여줄 때 주로 사용한다.

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

arr.reverse(); // [4,3,2,1]

map(fn) : 특정 기능을 시행하고 새로운 배열 반환

let list = [
  { name : 'Tom', age: 30},
  { name : 'Jerry', age: 17},
  { name : 'Btae', age: 27},
];

let newList = list.map((user, index) => {
  return Object.assign({}, user, {
    id : index + 1,
    isAdult: user.age > 19,
  });
});
 /* newList >  [ {name: 'Tom', age: 30, id: 1, isAdult: true}
 {name: 'Jerry', age: 17, id: 2, isAdult: flase}
 {name: 'Btae', age: 27, id: 3, isAdult: true}]
*/

위 예제는 assign() 객체 메서드를 이용해서 각 객체에 프로퍼티를 추가하고 그 객체를 배열의 형태로 반환하는 과정이다.
기존에 있는 list 배열은 변하지 않는다.

join() split() : 배열을 문자열로, 문자열을 배열로 변환

let arr = ['안녕', '나는', 'Btae'];

arr.join(); // > '안녕, 나는, Btae'
arr.join('  '); // > '안녕   나는   Btae'

let str = '안녕,나는,Btae';

str.split(","); // > ['안녕','나는','Btae']
str.split(""); // > ['안','녕',',','나','는','B','t','a','e']

위 예시를 살펴보면 join()매서드는 배열을 문자열로 변환한다. 인수를 입력하지 않으면 쉼표(,)로 구분하고 인수를 입력하게 되면 요소 사이에 해당 인수를 집어넣어 문자열로 반환한다.

split()은 반대로 문자열을 배열로 반환한다. 해당 인수를 기준으로 나눠 요소를 구분짓고, 인수를 입력하지 않을 경우 한 글자 씩 배열로 반환한다.

Array.isArray() : 배열인지 아닌지 찾기

문자열, 숫자열 등 구분을 지을 때 배열은 객체형 즉 Object에 속한다. 따라서 typeof를 사용해도 배열, 객체 모두 Object가 반환된다.
따라서 배열을 구분하기 위해서는 Array.isArray() 메서드를 사용해야 한다.
객체일 경우 false가 반환되고, 배열이라면 true로 반환된다.