[JavaScript] 배열 메소드1 : splice(), slice(), concat(), forEach(), indexOf(), find(), filter(), map()

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

n: 시작

m: 개수

//         0 1 2 3 4
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: 추가

//인덱스   0  1  2  3  4
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200); //인덱스1부터 3개 지우고 그자리에 100과 200을 넣음

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

//           0      1         2
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관");

console.log(arr); // ["나는", "대한민국", "소방관", "철수", "입니다"]

두번째 인수에 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소를 추가한다.

 

splice()의 또 다른 특징으로는 삭제된 요소를 반환한다는 것이다.

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

let result = arr.splice(1,2); //메소드 사용 후 반환값을 result에 저장

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

 

 

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

slice()는 splice()와 유사하게 생겼지만 보다 간단하다.

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

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

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

만약 slice()괄호 안에 아무것도 입력하지 않으면 배열이 그대로 복사된다.

 

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]
arr.concat([3,4],5,6);  // [1,2,3,4,5,6]

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

배열arr에 [3,4],[5,6] 배열을 전달하면 하나로 모아 배열로 반환한다.

[3,4]배열과 배열이 아닌 5, 6을 각각 전달해도 반환하는 값은 동일하다.

 

 

arr.forEach(fn) : 배열 반복

지금까지 배열 반복은 for문이나 forOf문을 사용했는데,  forEach로도 가능하다.

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

users.forEach((item, index, arr) => {
});         /* Mike    0     users
               Tom     1
               Jane    2           */

forEach()는 함수를 인수로 받는다. 그 함수는 3개의 매개변수가 있다.

첫번째 매개변수 : 해당요소

두번째 매개변수 : 인덱스

세번째 매개변수 : 해당 배열 자체

보통은 첫번째와 두번째 매개변수만 사용한다.

 

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

users.forEach((name, index) => {
	console.log(name) // Mike Tom Jane
});

users.forEach((name, index) => {
	console.log(`${index}. ${name}`); // 0. Mike  1. Tom  2. Jane
});

 

arr.indexOf / arr.lastIndexOf

//         0,1,2,3,4,5,6,7
let arr = [1,2,3,4,5,1,2,3];

arr.indexOf(3); // 2 (인덱스 번호)
arr.indexOf(3,3); // 7 (두번째 변수: 시작 인덱스 번호)

arr.lastIndexOf(3); // 7 (끝에서부터 탐색)

indexOf() : 해당요소의 인덱스를 반환하고 없으면 -1을 반환한다.

indexOf(3) : 3의 인덱스 번호를 반환

indexOf(3,3) : 두번째 변수는 시작 인덱스 번호를 의미한다. (인덱스3부터 탐색한다.)

lastIndexOf(3) : 끝에서부터 3을 찾아 인덱스 번호를 반환

 

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

indexOf()처럼 찾는다는 의미는 동일하지만, 보다 복잡한 연산이 가능하도록 함수를 연결할 수 있다.

주의할 점 : 첫번째 true값만 반환하고 끝난다. 만약 없으면 undefined를 반환한다.

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

const result = arr.find((item)=> {
	return item % 2 === 0; // 각 요소를 순회하며 짝수를 반환. 
})

console.log(result); // 2 (return값이 true일때 순회를 멈추고 해당 요소를 반환)

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

//find()
userList.find((user)=> {
	if(user.age < 19) { //19세 미만이면 true반환
      return true;
    }
    return false;
});
console.log(result); // { name: "Tom", age: 10 }

//findIndex() : 조건에 만족하는 요소의 인덱스를 반환
userList.findIndex((user)=> {
	if(user.age < 19) { //19세 미만이면 true반환
      return true;
    }
    return false;
});
console.log(result); // 2 (인덱스 번호)

 

arr.filter(fn) : 조건을 만족하는 모든 요소를 배열로 반환

find()와 findIndex()는 첫번째 true값만 반환하고 끝나지만 모든 요소를 반환할 때는 filter()를 사용한다.

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

const result = arr.filter((item)=> {
	return item % 2 === 0; // 각 요소를 순회하며 짝수를 찾아 배열로 반환. 
})

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

 

arr.map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열 반환

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

//  map을 이용하여 isAdult 프로퍼티를 추가한 새로운 배열 생성
let newUserList = userList.map((user, index) => { 
	return Objext.assign({}, user, { //새로운 객체 만들어 리턴
      isAdult : user.age > 19,  // 새로운 프로퍼티 추가
	});
 });
 
 console.log(newUserList); 
 /* 
 { name: "Mike", age: 30, isAdult: true},
 { name: "Jane", age: 27, isAdult: true},
 { name: "Tom", age: 18, isAdult: false}
 */
 
 console.log(userList); 
 /* 기존 userList는 변경되지 않는다
 { name: "Mike", age: 30 },
 { name: "Jane", age: 27 },
 { name: "Tom", age: 10 }
 */

 

 

참고 및 출처 : 유투브 코딩앙마 https://youtu.be/4_WLS9Lj6n4