[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 1

앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다.

이번 포스팅에서는 여러가지 유용한 배열 메소드에 대해서 알아보도록 하겠다.
기존에 익히 알고 있던 메소드는 생략하도록 하겠다.

1. 기초 Method

push(): 뒤에 삽입
pop(): 뒤에 삭제
unshift(): 앞에 삽입
shift(): 앞에 삭제

기초적인 Method에 대한 자세한 설명은 생략하도록 하겠다.

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

n번째 요소부터 m개를 지워라는 의미로 사용한다.

let arr = [1,2,3,4,5];
arr.splice(1,2);  // 1번째 요소부터 2개를 지워라
console.log(arr);  // [1,4,5]

또한 arr.splice(n, m, x) 형태로도 사용이 가능하다. 이는 특정 요소를 지우고 x라는 요소를 추가하는 용도로 사용한다.

let arr = [1,2,3,4,5];
arr.splice(1, 3, 100, 200);   // 1번째 요소부터 3개를 지우고 100,200을 추가해라
console.log(arr);  // [1,100,200,5]

만약에 m이 0이 된다면 어떻게 될까? 코드에서 살펴보자.

let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");   // 1번째 요소부터 0개를 지워라 이후 추가해라
console.log(arr);  // ["나는", "대한민국", "소방관", "철수", "입니다"]

이 경우에는 아무것도 지우지 않고 시작지점 전에 넣게 된다.

마지막으로, splice는 삭제된 요소를 반환하기도 한다.

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

console.log(arr);   // [1,4,5]
console.log(result);  // [2,3]

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

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

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

이와 같이 slice안에 아무것도 넣지 않게되면 그대로 출력을 한다.

4. arr.indexOf / arr.lastIndexOf

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

arr.indexOf(3);  // 2
arr.indexOf(3,3);   // 7
arr.lastIndexOf(3);   // 7

• 발견하면 해당 요소의 index를 반환하고 없으면 -1를 반환한다.
• indexOf에 두 번째 인자는 몇 번째 index에서 부터 탐색을 시작할 지 정하는 곳이다. 대표적으로 배열에 같은 값이 여러개 있을 때 사용한다.
• 끝에서부터 탐색을 하고 싶으면 lastIndexOf를 사용하면 된다.

5. arr.find(fn) / arr.findIndex(fn)

indexOf 메소드와 비슷하다고 생각할 수 있지만 약간의 다른점이 있다.
find와 findIndex는 예를 들어 짝수를 찾아라, 홀수를 찾아라 등 연산이 필요한 작업이 있을 때 사용한다.

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

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

console.log(result);   // 2

다음과 같이 arr를 순회하면서 짝수를 찾았을 경우에는 순회를 멈추고 처음 찾은 값을 반환하게 된다. 다른 예제를 보자.

let userList = [
  { name: 'Mike', age: 30 },
  { name: 'Jane', age: 27 },
  { name: 'Tom', age: 10 },
];

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

console.log(result);   // { name: 'Tom', age: 10 }

만약 여기서 findIndex를 사용하게 된다면 index가 2가 반환이 될 것이다.

6. arr.filter(fn)

find는 결과값을 딱 1개만 반환을 했는데 조건을 만족하는 모든 요소를 출력을 하고 싶다면 filter를 통해서 만족하는 모든 요소를 배열로 반환시킬 수 있다.

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

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

console.log(result);   // [2,4]

7. arr.reverse(): 역순으로 재정렬

배열을 역순으로 재정렬한다. 최근에 가입한 유저 순으로 보여준다던가, 게시판에서 가장 최근에 작성된 글 순서로 보여줄 때 자주 사용된다.

8. arr.map(fn)

map함수는 함수를 매개변수로 받아 특정 기능을 시행하고 새로운 배열을 반환한다.

let userList = [
  { name: 'Mike', age: 30 },
  { name: 'Jane', age: 27 },
  { name: 'Tom', age: 10 },
];

let newUserList = userList.map((user, index) => {
	return Object.assign({}, user, { 
      id: index + 1,
      isAdult: user.age > 19
    });  
});

console.log(newUserList);   // 각 배열에 id와 isAdult가 추가됨 (T/T/F)
console.log(userList);

실제로 아주 많이쓰는 메소드이기 때문에 꼭 기억하는게 좋다!

9. arr.join, arr.split

배열을 합쳐서 문자열을 만드려면 join 메소드를 사용하면 된다.

let arr = ['안녕', '나는', '철수야'];
let result = arr.join(" ");
console.log(result);   // 안녕 나는 철수야

반대로 split은 문자열을 특정 문자로 나눠서 배열로 반환한다.

let str = 'Hello, My name is Mike.';
const result = str.split("");   // 각 문자별로 나눔
console.log(result);   // 배열로 반환

10. Array.isArray()

어떤 변수가 배열인지 아닌지 확인하기 위해서는 isArray 메소드를 사용한다.

let user = {
	name: 'Mike',
  	age: 30
}

let userList = ["Mike", "Tom", "Jane"];

console.log(typeof user);   // object
console.log(typeof userList);   // object

console.log(Array.isArray(user));   // false
console.log(Array.isArray(userList));   // true

typeof를 사용하게 되면 둘다 object로 나와서 어느 것이 배열이고 어느것이 객체인지 모른다. 따라서 Array.isArray를 사용해서 구분한다.

이번 포스팅에서는 배열에서 사용하는 메소드들 몇가지를 정리해보았다. 쭉 정리를 해봐도 많이 헷갈리는 것 같다. map이나 forEach같이 많이 쓰는 메소드 외에는 굳이 외울 필요 없으니 한번 쭉 읽고 필요할 때마다 찾아서 사용하도록 하자!

다음 포스팅에서는 배열 메소드 나머지를 설명하도록 하겠다.

(해당 포스팅의 내용은 유튜브 코딩앙마님의 영상을 참고했습니다)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4