[JavaScript] 중급 #7 - 배열 메소드1 (Array methods)

 

자바스크립트 기초 강의에서 배운 메소드들

  -  push(): 뒤에 삽입

  -  pop(): 뒤에 삭제

  -  unshift(): 앞에 삽입

  -  shift(): 앞에 삭제

 

 

arr.splice(n, m): n부터 m개의 요소를 지움

  -  삭제된 요소 반환

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.splice(n, m, x): n부터 m개의 요소를 지우고 x를 추가

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200);

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

 

let arr = [1, 2, 3];
arr.splice(1, 0, 100, 200);

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

 

 

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

  -  m을 생략하면 n부터 배열 끝까지 반환

  -  문자열에 파트에서 나온 slice와 같은 기능

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] 출력

 

 

arr.concat(arr1, arr2, …): 합쳐서 새배열을 반환

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]

 

 

 

자바스크립트 기초 강의에서 배열의 반복은 for문이나 for…of를 사용

 

arr.forEach(func): 배열 반복, 함수를 인수로 받음

let users = [‘Baby’, ‘Angel’, ‘Noonsong’];

users.forEach((item, index, arr) => {
	console.log(`${index+1}. ${item}`); 
})


//	1. Baby
//	2. Angel
//	3. Noonsong

  →  item은 해당 요소 (Baby, Angel, Noonsong)

  →  index는 배열의 인덱스 (0, 1, 2)

  →  arr은 해당 배열 자체 (users)

  →  보통 첫번째와 두번째 인수만 사용, 세번째 인수 생략 가능

 

 

arr.indexOf(item, n): 배열의 인덱스 n부터 탐색을 시작, 진행 방향 →

arr. lastIndexOf (item, n): 배열 끝을 0으로 하여 n부터 탐색을 시작, 진행 방향 ←

  -  찾아낸 item의 index 반환, 없으면 -1 반환

  -  n이 생략되면 indexOf는 처음부터 탐색 시작, lastIndexOf는 끝에서부터 탐색 시작

 

ex)

let arr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘a’, ‘b’, ‘c’];          

arr.indexOf(‘c’); //2
// → c의 위치는 index 2

arr.indexOf(‘c’, 3); //7
// → n>=3에서부터 탐색한 c의 위치는 index 7

arr.indexOf(‘c’, -4) //7
// → n>=-4에서부터 탐색한 c의 위치는 index 7



arr.lastIndexOf(‘c’); //7
//뒤에서부터 탐색한 c의 위치는 index 7

arr.lastIndexOf(‘c’, 6); //-1
// → n>=6에서부터 탐색한 c은 존재하지 않음, -1 반환

arr.indexOf(‘c’, -4) //2
// → n<=-4에서부터 탐색한 c의 위치는 index 2

 

 

arr.includes(item, n): 배열의 인덱스 n부터 탐색을 시작해서 item을 포함하는지 확인

  -  item을 포함하면 true, 그렇지 않으면 false 반환

  -  n을 생략하면 처음부터 탐색 시작

  -  n이 음수면 배열의 끝을 -1로 시작하여 배열 탐색

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

arr.includes(2); //true

arr.includes(8); //false

arr.includes(4, -3); //false

 

 

arr.find(func)

  -  첫번째 true인 값만 반환하고 끝, 없으면 undefined를 반환

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

const result = arr.find((item) => {
	return item % 2 === 0; //item이 짝수일 때 true
});

console.log(result); //2 출력

 

 

arr.findIndex(func)

  -  indexOf과 동일한 기능을 하지만 함수를 연결하여 좀 더 복잡한 연산이 가능

  -  첫번째 true인 index 값만 반환하고 끝, 없으면 -1을 반환

let userList  = [
	{ name: ‘Baby’, age: 10 },
	{ name: ‘Angel’, age: 27 },
	{ name: ‘Noonsong’, age: 30 }
];

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

console.log(result); // {name: “Angel”, age: 27} 출력

 
const index = userList.findIndex((user) => {
	if(user.age > 29) { return true; }
	return false;
});

console.log(index); // 2 출력

   

 

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

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

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

console.log(result); //[2, 4, 6] 출력

 

 

arr.reverse(): 배열을 역순으로 재정렬

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

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

 

 

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

let userList = [
	{ name: ‘Baby’, age: 10 },
	{ name: ‘Angel’, age: 27 },
	{ name: ‘Noonsong’, age: 30 }
];

const newUserList= userList.map((user, index) => {
	return Object.assign({}, user, {
		isAdult: user.age > 19
	});
});

console.log(newUserList); 


//	[ 
//		{name: “Baby”, age: 10, isAdult: false},
//		{name: “Angel”, age: 27, isAdult: true},
//		{name: “Noonsong”, age: 30, isAdult: true} 
//	]

  →  userList는 변경되지 않고 그대로

 

 

arr.join(): 배열의 모든 요소를 합해서 하나의 문자열로 반환

let arr = ["My", "name", "is", "Angel."];

console.log(arr.join()); //My, name, is, Angel. 출력

console.log(arr.join('')); //MynameisAngel. 출력

console.log(arr.join(' ')); //My name is Angel. 출력

console.log(arr.join('-')); //My-name-is-Angel. 출력

 

 

str.split(): 문자열을 지정한 구분자를 이용하여 여러 개의 문자열 배열로 반환

let str = "My name is Angel.";         

const words = str.split(' ');
console.log(words); //["My", "name", "is", "Angel."]

const chars = str.split('');
console.log(chars); //["M", "y", " ", "n", "a", "m", "e", " ", "I", "s", " ", "A", "n", "g", "e", "l", "."]

const strCopy = str.split();
console.log(strCopy); //["My name is Angel."]

 

 

Array.isArray(): 전달받은 인자가 배열인지 아닌지 판별, 배열이면 true 아니면 false 반환

let user = {
	name: 'Angel',
	age: 30,
};
 
let userList = ["Baby", "Angel", "Noonsong"];

console.log(typeof user); //object
console.log(typeof userList); //object

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

      

 

 

 

↓[코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=pJzO6O-aWew