배열의 기초
선언 및 초기화
const array_name = [item1, item2, ...];
const 키워드로 배열을 선언하는 것이 일반적입니다 .
const cars = ["Saab", "Volvo", "BMW"];
공백과 줄 바꿈은 중요하지 않습니다. 선언은 여러 줄에 걸쳐 있을 수 있습니다.
const cars = [
"Saab",
"Volvo",
"BMW"
];
배열을 생성한 다음 요소를 제공할 수도 있습니다.
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
new 키워드로 배열 선언 방법
const cars = new Array("Saab", "Volvo", "BMW");
new 키워드 사용보다는 아래 처럼 선언하는것이 더 일반적임
const cars = ["Saab", "Volvo", "BMW"];
Array method
push() : 배열의 뒤에 요소를 삽입
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");
console.log(fruits); // [ 'Banana', 'Orange', 'Apple', 'Lemon' ]
unshift(): 배열의 맨 앞에 요소를 삽입
const fruits = ["Banana", "Orange", "Apple"];
fruits.unshift ("Lemon");
console.log(fruits); // [ 'Lemon', 'Banana', 'Orange', 'Apple' ]
pop() : 맨 뒤의 요소를 삭제
shift() : 맨 앞의 요소를 삭제
splice() : 특정 요소를 지움고 새로운 요소를 추가 가능
arr.splice(n, m) : 특정 요소를 지움
n: 시작위치 (0번지부터), m : 개수
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 ]
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관"); // m자리에 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에서 삭제된 2,3 요소를 반환함.
slice()
: n부터 m까지 요소를 반환
let arr= [1, 2, 3, 4, 5];
console.log(arr.slice(1,4)); // [2, 3, 4]
m 생략시 끝까지 리턴
n, m 둘다 생략시 배열 전체를 리턴(복사)
let arr= [1, 2, 3, 4, 5];
console.log(arr.slice(1,4)); // [2, 3, 4]
let arr2 = arr.slice(1);
console.log(arr2); // [ 2, 3, 4, 5 ]
concat(arr2, arr3 ...)
기존 배열에 전달한 배열을 합쳐서 새 배열을 반환
let arr = [1,2];
console.log(arr.concat([3,4])); // [1,2,3,4]
console.log(arr.concat([3,4], [5,6])); // [1,2,3,4,5,6]
console.log(arr.concat([3,4], 5, 6)); // [1,2,3,4,5,6]
arr.forEach(fn) : 배열 반복
let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) =>{
// item : item 값을 가짐 (Mike, Tom, Jane)
// index : index 번지값을 가짐 (0, 1, 2 )
// arr : 배열 자체를 가짐 (users)
// 원하는 작업 처리....
});
let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) =>{
console.log(`${index+1}. ${item}`);
});
결과
1. Mike
2. Tom
3. Jane
indexOf / lastIndexOf
indexOf = 배열에서 목표값을 찾은 배열위치 리턴 없으면 -1 리턴
let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2
indexOf(n, m) => n을 찾을때 m번째 인덱스 부터 검색을 하고 요소를 발견한 인덱스를 리턴
arr.indexOf(3,3) // 7
lastIndexOf : 뒤에서 부터 찾아라
arr.lastIndexOf(3); // 7
includes() : 포함하는지 확인 (true, false 리턴)
let arr = [1,2,3];
arr.includes(2); // true
arr.includes(8); // false
find(fn) / findIndex(fn)
let arr = [1,2,3,4,5];
const result = arr.find((item)=>{
return item %2===0;
});
console.log(result); // 2 : true가 나오면 함수 빠져나옴(첫번째 결과 하나만 찾음)
let userList = [
{ name: "Mide", age: 30},
{ name: "Tom", age: 17},
{ name: "Jane", age: 23},
];
const result = userList.find( (user)=>{
if(user.age < 19) {
return true;
}else{
return false;
}
});
console.log(result); // { name: 'Tom', age: 17 }
let userList = [
{ name: "Mide", age: 30},
{ name: "Tom", age: 17},
{ name: "Jane", age: 23},
];
const result = userList.findIndex( (user)=>{
if(user.age < 19) {
return true;
}else{
return false;
}
});
console.log(result); // 2 -> findIndex 는 찾은 index를 리턴
filter(fn)
let userList = [
{ name: "Mide", age: 30},
{ name: "Tom", age: 17},
{ name: "Jane", age: 15},
];
const result = userList.filter( (user)=>{
if(user.age < 19) {
return true;
}else{
return false;
}
});
console.log(result); // [ { name: 'Tom', age: 17 }, { name: 'Jane', age: 15 } ]] 조건에 해당하는 모든 요소를 찾음
reverse() : 역순으로 재정렬
let arr = [1,2,3,4,5];
console.log(arr.reverse()); // [5,4,3,2,1]
map(fn) : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
let userList = [
{ name: "Mide", age: 30},
{ name: "Tom", age: 17},
{ name: "Jane", age: 15},
];
let newUserList = userList.map( (user, index)=>{
return Object.assign({}, user, {
id: index+1,
isAdult: user.age>19,
})
});
console.log(newUserList);
console.log(userList);
결과
// 새로운 배열
[
{ name: 'Mide', age: 30, id: 1, isAdult: true },
{ name: 'Tom', age: 17, id: 2, isAdult: false },
{ name: 'Jane', age: 15, id: 3, isAdult: false }
]
// 기존 배열
[
{ name: 'Mide', age: 30 },
{ name: 'Tom', age: 17 },
{ name: 'Jane', age: 15 }
]
join(연결자) : 연결자가 생략되면 ,를 추가해서 연결
let arr = ["안녕","나는","철수야"];
let result = arr.join();
console.log(result);
결과
안녕,나는,철수야
let arr = ["안녕","나는","철수야"];
let result = arr.join("-");
console.log(result);
결과
안녕-나는-철수야
split(구분자) : 구분자를 이용하여 배열을 생성
let arr = "Mike, Tom, Jane, Tony";
let result = arr.split(",");
console.log(result);
결과
[ 'Mike', ' Tom', ' Jane', ' Tony' ]
Array.isArray() : 해당 값이 배열인지 확인
let user = {
name: "Mike",
age: 30,
};
let userList = ['Mike', 'Tom', 'Jane'];
console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true
