[JavaScript] 배열 메소드(Array Method) - 1
이번 시간에는 배열에서 사용하는 메소드에 대해 공부할 것이다.
push( ) : 뒤에 삽입
pop( ) : 뒤에 삭제
unshift( ) : 앞에 삽입
shift( ) : 앞에 삭제
배열에서 사용하는 기본적인 메소드로는 위의 네개가 있는데 더 유용한 메소드에 대해 배워보도록 하자.
1. arr.splice(n, m)
: 특정 요소 지우기, n 번째부터 m 개의 요소를 지우라는 메소드이다.
인덱스는 0부터 시작이기 때문에 해당하는 인덱스부터 m개를 지울 수 있다.
|
let arr = [1,2,3,4,5];
arr.splice(1,2);
console.log(arr); // [1,4,5]
|
arr.splice(n, m, x)를 사용하면 특정 요소를 지우고 추가도 할 수 있다.
|
let arr = [1,2,3,4,5];
// 인덱스 1번부터 2, 3, 4를 지운다. 그렇게 되면 1, 5가 남게 되는데 지웠던 인덱스에 순서대로 100, 200 을 넣어준다. arr.splice(1, 3, 100, 200);
// 3개를 지우고 2개를 추가했기 때문에 최종적으로 4개의 요소를 가진 배열이 된다. console.log(arr); // [1, 100, 200, 5]
|
그렇다면 중간에 m 개수를 나타내는 부분에 0을 사용하면 어떻게 될까?
|
let content = ["나는", "영수", "입니다"];
arr.splice(1, 0, "대한민국", "경찰관");
console.log(content); // ["나는", "대한민국", "경찰관", "영수", "입니다"]
|
위의 코드를 보면 알 수 있듯이 아무 요소도 지우지 않고 인덱스 0번부터 1번 사이에 추가할 수가 있다.
특정 요소를 넣지 않고 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] |
이렇게 1, 2를 삭제한 결과가 result라는 배열에 들어가는 것을 알 수 있다.
String에서도 문자열을 나눠가져오는 slice( ) 메소드가 있었는데 배열도 똑같이 slice( ) 메소드가 있다.
2. arr.slice(n, m)
: n부터 m까지 반환 ( m 포함하지 않는다 )
m을 쓰지 않으면 n부터 끝까지를 반환한다.
|
let arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4]
|
만약 괄호 안에 아무것도 넣지 않는다면 배열이 복사된다.
|
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.slice();
console.log(arr2); //[1, 2, 3, 4, 5]
|
3. arr.concat(arr2, arr3..)
: 기존에 있던 arr에 다른 배열을 합쳐서 새 배열을 반환한다.
concat으로 다른 두 배열을 넘기거나 하나는 배열, 배열이 아닌 요소들을 같이 넘겨줘도 모두 합친 새 배열이 만들어진다.
|
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]
|
4. arr.forEach(fn)
: 배열 반복
|
let users = ["Jane", "Alex", "Christina"];
users.forEach((item, index, arr) => {
//...
});
|
forEach는 함수를 사용하고 그 함수는 세개의 메개변수를 받는데 첫번째는 그 함수의 요소이고
두번째는 index, 세번째는 해당 배열 자체를 의미한다.
보통 첫번째와 두번째 인수만 사용한다.
|
let users = ["Jane", "Alex", "Christina"];
users.forEach((name, index) => {
console.log(name); // Jane, Alex, Christina
console.log(`${index}, ${name}`); // 0. Jane, 1.Alex, 2.Christina
console.log(`${index + 1}, ${name}`); // 1. Jane, 2.Alex, 3.Christina });
|
5. arr.indexOf( ) / arr.lastIndexOf( )
: 문자열에서 사용했던 indexOf와 사용법이 같다.
( ) 안에 들어가는 요소의 index를 반환해주는 메소드이다.
(n, m)으로 사용한다면 m은 시작 위치를 나타낸다.
lastIndexOf( ) 는 끝에서부터 찾는 메소드이다.
|
let indexes = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2
// index 3번부터 시작해서 3을 찾으라고 했기 때문에 맨 마지막인 7번째에 위치하는 3을 찾아 인덱스 7을 반환해준다. arr.indexOf(3, 3); // 7 |
6. arr.includes( )
: 인덱스 번호를 알 필요 없이 그냥 요소를 포함하고 있는지 확인할 때 사용하는 메소드이다.
true와 false로 반환한다.
|
let arr = [1, 2];
arr.includes(2); // true
arr.includes(4); // false
|
7. arr.find(fn) / arr.findIndex(fn)
: find( )는 indexOf 처럼 어떤 요소들을 찾는 메소드이지만
복잡한 연산식을 사용할 수 있는 함수를 넣을 수 있는 메소드이다.
findIndex( )는 인덱스가 있는지를 확인하는 메소드이다.
주의할 점은 두 메소드 모두 찾으려고 하는 인수가 여러개가 있어도 첫번째 true 값만 반환한다.
만약 그 값이 없다면 undefined를 반환한다.
아래는 짝수를 찾는 함수를 넣은 find 메소드이다.
|
let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
return item % 2 === 0;
});
console.log(result); // 2
|
item % 2 === 0으로 짝수인 요소를 찾는데 arr 의 1~5까지의 숫자 중 짝수인 조건을 만족하는 숫자는 2이다.
find( )는 첫번째 true 값만 반환하기 때문에 result의 값은 2만 반환이 되는 것이다.
객체에서 특정한 조건을 가진 요소를 찾을 때에도 find를 사용한다.
|
let userList = [
{name: "Mike", age: 30},
{name: "Alex", age: 23},
{name: "Jane", age: 12}
];
const result = userList.find((user) => {
if(user.age < 19) {
return true;
}
// 19세보다 많으면 반환하지 않는다. return false;
});
console.log(result); // {name: "Jane", age: 12}
조건에 해당하는 요소의 index를 찾는 findIndex( ) const result = userList.findIndex((user) => {
if(user.age < 19) {
return true;
}
// 19세보다 많으면 반환하지 않는다. return false;
});
console.log(result); // 2 |
find로는 조건에 만족하는 요소 딱 한개만 찾을 수 있었는데,
조건을 만족하는 모든 요소를 반환하는 메소드는 무엇일까?
바로 filter( ) 메소드이다.
8. arr.filter(fn)
: 만족하는 모든 요소를 배열로 반환한다.
위의 짝수를 찾는 예제에서 find를 filter로 바꿔 사용하면 어떻게 될까?
|
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
const result = arr.filter((item) => {
return item % 2 === 0;
});
console.log(result); // 2, 4, 6, 8
|
짝수에 해당하는 모든 요소 2, 4, 6, 8이 반환되는 것을 알 수 있다.
9. arr.reverse( )
: 배열을 역순으로 재정렬해주는 메소드이다. 사용법은 간단하다.
가입한 유저들을 최신 순으로 보여준다거나, 최신 게시물을 먼저 보여주려 할 때 많이 쓰인다.
|
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5,4,3,2,1]
|
10. arr.map(fn)
: 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환하는 메소드이다.
원래 있던 userList 객체에 이 user가 성인인지 판단하는 요소를 추가해서 새로운 객체를 만들어보자.
|
let userList = [
{name: "Mike", age: 30},
{name: "Alex", age: 23},
{name: "Jane", age: 12}
];
let newUserList = userList.map((user,index) => {
return Object.assign({}, user, {
id : index + 1, isAdult : user.age > 19
});
});
console.log(newUserList);
/* 0: {name: "Mike", age: 30, isAdult: true}
1: {name: "Alex", age: 23, isAdult: true}
2: {name: "Jane", age: 12, isAdult: false}
*/
|
기존에 있던 userList를 확인해보면 변경사항이 없는 것을 알 수 있다.
|
console.log(userList);
/*
0: {name: "Mike", age: 30},
1: {name: "Alex", age: 23},
2: {name: "Jane", age: 12}
*/
|
map은 실전에서 많이 쓰이는 함수이니 여러가지 예제들을 많이 풀어보는 편이 좋겠다!
(실제로 본인도 실무에서 map 사용을 자주 하는 편이다.)
11. join( ) , split( )
: join( )을 사용하면 배열을 합쳐서 문자열로 만들 수 있다.
괄호 안에는 기본적으로 전달해주는 값이 있는데 이것은 ,(콤마)이다.
괄호 안에 아무것도 전달하지 않으면 기본 값이 전달 되기 때문에 아래와 같은 결과가 반환된다.
|
let arr = ["안녕", "나는", "철수야"];
let result = arr.join();
console.log(result); // 안녕,나는,철수야
|
때문에 기본 값을 구분자으로 주지 않으려면 join(" ") 공백이나 다른 값들을 넣어주면 된다.
|
let arr = ["안녕", "나는", "철수야"];
let result = arr.join(" ");
console.log(result); // 안녕 나는 철수야
|
반대로 split( )은 문자열을 나누어서 배열로 만들어준다.
join과 다르게 괄호 안에는 구분자를 정해주어야한다.
|
const users = "Mike,Jamie,Alex,Tony";
const result = users.split(",");
console.log(result); // ["Mike","Jamie","Alex","Tonu"]
|
12. arr.isArray( )
: 배열인지 아닌지 확인할 때 사용하는 메소드이다.
|
let user = {
name: "Mike",
age: 30,
};
let userList = ["Mike","Tony","Jamie"];
console.log(typeof user); // object
console.log(typeof userList); // object
|
객체인 user와 user들을 담고 있는 userList의 type을 살펴보면 둘 다 object로 나오기 때문에
어느것이 객체이고 어느 것이 배열인지 확인하기가 어렵다.
이럴 때 사용하는 메소드가 isArray 인 것이다.
isArray( )를 사용해보면 객체인 user는 false가 반환되고 배열인 userList는 true가 반환되는 것을 볼 수 있다.
|
console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true
|
이번 시간에는 간단한 배열에 관련된 메소드를 배워봤다.
다음 시간에는 이어서 배열의 sort(정렬)과 reduce에 대해 배워 볼 것이다.
* 본 포스팅은 코딩앙마님의 JavaScript 중급강좌를 기반으로 작성한 글입니다.