배열 메소드1 (Array method)

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

arr.splice(n, m) 는 배열의 특정 요소를 지워줍니다. 인덱스 n 부터 시작해서 m 개를 지우라고 할 수 있습니다.

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

arr.splice(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);
console.log(arr); // [1, 100, 200, 5]

// m 에 0을 넣어주면 아무것도 지우지 않고 n 앞에 부터 데이터를 채운다. 

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

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

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]

arr.slice(n, m) 는 n 부터 m 까지 반환합니다. m 앞까지 반환하는데 m 이 없다면 끝까지 반환합니다.

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

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.forEach(fn) 은 함수를 인수로 받아 배열을 반복합니다.

let user = ['Mike', 'Tom', 'Jane'];
user.forEach((item, index, arr) => { .. })
// 3개의 매개변수는 해당요소, 인덱스, 해당 배열 입니다.
// 세번째 배열 자체는 생략하는 경우가 많습니다.

let user = ['Mike', 'Tom', 'Jane'];
arr.forEach((name, index) => {
	console.log(`${index+1}. ${name}`)
})
1 . Mike 
2 . Tom
3 . Jane

arr.indexOf arr.lastIndexOf 는 해당 요소의 인덱스 값을 반환합니다.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7- 두번째 요소 3 부터 확인
arr.lastIndexOf(3); // 7 - 끝에서 부터 탐색

arr.includes() 는 배열 내 해당 요소의 포함여부를 확인하 때 쓰면 좋습니다.

let arr = [1, 2, 3];
arr.includes(2); // ture
arr.includes(8); // false

arr.find(fn) 은 함수를 통해 해당 요소를 찾아 반환합니다. 짝수를 찾거나 성인을 찾을 수 있습니다. arr.find(fn) 는 첫번째 true 값만 반환하고 끝납니다. 없으면 undefined 를 반환합니다. arr.findIndex(fn) 는 해당 인덱스를 반환하고 없으면 -1 을 반환합니다.

let arr = [1, 2, 3, 4, 5];
const result = arr.find((item) => {
	return item % 2 === 0; // 짝수일 때 반환
})
console.log(result); // 2

// 객체가 들어간 배열 예시

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}
//하나만 찾고 반환한다. 

arr.filter(fn) 은 조건에 만족하는 모든 값을 반환합니다.

let arr = [1, 2, 3, 4, 5];
const result = arr.filter((item) => {
	return item % 2 === 0; // 짝수일 때 반환
})
console.log(result); // 2, 4

arr.reverse() 은 배열을 역순으로 재정렬 합니다. 최근 가입된 유저를 보여주거나 게시판 최근 작성글 순으로 정렬할 때 자주 사용합니다.

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

arr.map(fn) 은 함수를 받아 특정 기능을 실행하고 새로운 배열을 반환합니다. 실무에서 자주 사용하는 기술이니 기억해두면 좋습니다.

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 을 사용합니다.

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

let result = arr.join(); // () 안에 사이값을 넣어줄 수 있음
console.log(result); // "안녕, 나는, 철수야"

let result = arr.join(" "); // 공백을 넣어주면
console.log(result); // "안녕 나는 철수야"

split 은 반대로 문자열을 배열로 만들어 줍니다.

const users = "Mike, Jane, Tom, Tony";
const result = user.split(",");
console.log(result); // ["Mike", "Jane", "Tom", "Tony"]

Array.isArray() 를 사용하면 해당 내용이 배열인지 확인할 수 있습니다. 배열은 객체형이기 때문에 typeof 로는 객체와 구분할 수 없습니다.

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