자바스크립트 - 배열 메소드1(Array methods)

이전 시간에 배열을 배울때 배열에 관련된 기본적인 메소드에 대해 배웠습니다. 다시 살펴보면

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

이 외에도 배열은 유용한 메소드를 가지고 있습니다. 

 

배열메소드(Array methods)

splice()

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

n은 시작이고 m은 개수입니다. 

앞 포스팅에서 배웠던 문자열 메소드중 slice()와 햇갈리면 안됩니다.

slice()는 특정 범위의 문자를 반환해주고, splice()는 특정 범위의 요소를 지워줍니다.

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];
arr.splice(1,3,100,200);

console.log(arr); // [1,100,200,5]

 

그러면 m자리에 0을 넣으면 어떻게 될까? 

아무것도 지우지 않고 중간에 새로운 요소를 추가하는 것이 가능합니다.

let arr = ["나는", "철수", "입니다"];

arr.splice(1,0,"대한민국","소방관); 

//["나는", "대한민국", "소방관", "철수", "입니다"]

 

추가로 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]

 

slice()

arr.slice(n,m)은 n부터 m까지 반환합니다. 이때 m은 포함 x, 안쓰면 끝까지 반환해줍니다.

 

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]

 

concat()

arr.concat(arr2,arr3 ..)은 인자로 주어진 배열을 기존에 배열과 합하여 새배열을 반환해줍니다. 

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

 

forEach()

arr.forEach(fn)은 함수를 인수로 받습니다.  즉 forEach()를 이용하여 배열을 순회 할 수 있습니다. 

let users = ['Mike' , 'Tom' , 'Jane'];

users.forEach((item , index , arr) => {
  	// .. 		
});

이때 forEach함수는 3개의 매개변수를 가집니다. 첫번째는 해당 요소('Mike', 'Tom'... 이고) 두번째는 index(0,1,2...) 이고, 셋째는 해당 배열 자체를 의미합니다. 보통 첫번째와 두번째만 사용합니다.

 

IndexOf()

문자열의 IndexOf()와 사용법이 같습니다.

 

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

arr.indexOf(3) // 2

arr.indexOf(3,3) // 7   , 인덱스 3부터시작해서 3을 찾으라는 의미입니다. 

arr.lastIndexOf(3); // 7 , 끝에서부터 3을 찾으라는 의미입니다.

 

includes()

arr.includes()는 인덱스를 상관하지 않고 포함하는지만 알고 싶으면 사용합니다. 

배열내의 인수를 포함하고 있으면 true 아니면 false를 반환합니다. 

let arr = [1,2,3];

arr.includes(2); // true
arr.includes(8); // false

 

find(), findIndex()

indexOf와 다른점은 내부에 함수를 넣어 좀 더 복잡한 연산을 통해 반환값을 얻을 수 있습니다. 

첫번째 true 값만 반환하고 끝이납니다. 만약 없으면 undefined를 반환합니다. 코드로 살펴보겠습니다. 

 

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

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

console.log(result); 

// 2

 

첫번째 true값 2를 반환해줍니다. 만약 item%4를 하면 4를 반환해줍니다. 다른 코드를 보겠습니다.

 

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를 반환해줍니다. 

 

 

filter()

arr.filter(fn)은 만족하는 모든 요소를 배열로 반환해줍니다. find와 사용법은 동일합니다. 

 

 

reverse()

arr.reverse()는 역순으로 재정렬해줍니다. 게시판에서 최근작성된순으로 정렬하거나  최근가입된 유저를 보여줄때 주로 사용합니다. 

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

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

 

map()

map() 함수는 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 값을 빼도록 해줍니다.

쉽게 말해 map() 함수의 값 인자는 향상된 for문의 item과 인자와 같은 역할, 

인덱스 인자는 기본 for문 방식의 index와 같은 역할 이라고 보시면 됩니다.

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

//기본 for문 방식
for(let index = 0 ; index < arr.length ; index++) {
    console.log(arr[index]);
}

//향상된 for문 방식
for(let item of arr) {
    console.log(item);
}

코드를 보겠습니다.

 

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);

 

join()

join함수는 배열내의 문자들을 합쳐 하나의 문자열로 만들어줍니다.

인수를 적지 않으면 기본으로 쉼표(,)로 구분되어 합쳐집니다.

let arr = ["안녕", "나는","철수야"];

// () 안에 쓰는 것이 인수
let result = arr.join();

console.log(result) // 안녕,나는,철수야

 

split()

split()함수는 문자열을 문자로 쪼개줍니다. 마찬가지로 인수를 활용하여 쪼개주는데 코드를 보겠습니다. 

const users = "Mike,Jane,Tom,Tony";

const result = users.split(",");

console.log(result)

 

인수 , 를 기준으로 쪼개줍니다. 문자열에서 ,를 기준으로 Mike Jane Tom Tony가됩니다. 

그리고 만약 공백("")를 넣어주면 

다음과 같은 한글자로 쪼개집니다. 

 

Array.isArray()

자바스크립트에서 배열은 객체형에 속하기 때문에 typeof로 구분할 수 없습니다

그럼 어떻게 구분 해야 할까요?

바로 Array.isArray(배열이름)을 통해서 true/false를 반환받아 확인할 수 있습니다.