자바스크립트 - 배열 메소드 정리2

forEach : 배열의 반복

for문이나 for of문이 아니라 forEach를 통한 배열의 반복 방법에 대해 알아본다.
forEach메소드는 함수를 인자로 받는다. 인자로 들어가는 함수의 첫번째 인자는 배열의 각각의 원소들을 의미하고, 두번째는 index, 마지막은 해당 배열 자체를 의미하는데 보통 첫번째, 두번째 인자만 사용한다.

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

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

indexOf, lastindexOf : 원소의 index 탐색

indexOf메소드는 인자로 들어가는 값의 index를 반환하는 메소드다.
인자를 2개 사용할 경우 두번째 인자는 탐색을 시작할 위치를 가리킨다.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(3, 3)); // index 3에서 부터 탐색하므로 2번째 위치에 있는 3을 무시하게 됨

만약 끝에서부터 탐색하고 싶다면 lastIndexOf를 사용하면 된다.

console.log(arr.lastIndexOf(3)); //7

includes : 원소를 포함하는지 확인

includes 메소드를 사용해서는 인자로 들어가는 원소가 배열에 포함되어있는지를 확인할 수 있다.

let arr = [1, 2, 3, 4, 5, 1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(11)); // false

find, findIndexOf

find, findIndexOf 메소드는 인자로 함수를 받아 복잡한 조건을 줄 수 있다.
조건에 해당하는 첫번째 값만 반환하고 종료되며, 만약 조건에 해당하는 값이 없을 때는 undefined를 반환하게 된다.
배열보다는 객체를 다룰 때 많이 사용하게 될 듯하다.
findIndexOf는 조건에 만족하는 원소의 index를 반환하게 된다.

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

// result에 배열에서 짝수인 값 중 첫번째로 탐색되는 값만을 반환한다.
const result = arr.find((item) => {
	return item % 2 === 0;
});
console.log(result);

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

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

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

filter : 만족하는 모든 원소를 배열로 반환

filter메소드는 인자로 함수를 설정하고, 조건에 해당하는 모든 원소를 배열에 담아 반환한다.
find는 첫번째 원소, 원소의 index만 반환했었다.

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item)=>{
	return item % 2 === 0;
})
console.log(result); // [2, 4, 6]

reverse : 역순으로 재정렬

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

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

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

let newUserList = userList.map((user) => {
	return Object.assign({}, user, { 
		id: index + 1, 
		isAdult: user.age > 19 ? true : false 
	});
});
console.log(newUserList);
// [
//   { name: 'Mike', age: 30, id: 1, isAdult: true },
//   { name: 'Jane', age: 27, id: 2, isAdult: true },
//   { name: 'Tom', age: 10, id: 3, isAdult: false }
// ]

isArray

객체와 배열을 typeOf로 확인해보면 둘 다 모두 Object가 나온다. 때문에 배열인지 아닌지를 확인할 때는 isArray 메소드를 사용해야 한다.

let user = {
	name:'Mike',
	age:30,
}
let userList = ['Mike', 'Tom', 'Jane'];
console.log(typeOf user); // Object
console.log(typeOf user); // Object

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