안녕하세요?
오늘은 자바스크립트 배열과 배열에서 사용되는 메소드들에 대해 알아볼게요
배열(Array)
배열은 순서가 보장된 이름과 인덱스로 참조되는 정렬된 값입니다
Element와 index로 구성되어 있습니다
index로 번호를 지정하기 때문에 순서가 중요하고,
같은 배열 내 요소끼리 데이터 타입이 다를 수 있음을 명심해야합니다!
인덱스 번호는 0번부터 시작되기 때문에, 배열의 마지막 인덱스는 배열의 길이 - 1이라는 것도 꼭 알아두세요
배열 생성하기
- 배열 리터럴 사용하기
- Array 객체의 생성자 사용하기
- new 연산자 사용하기
const arr1 = [1,2,3];
const arr2 = Array(1, 2, 3);
const arr3 = new Array(1, 2, 3);
배열 접근하기
위에서 말한 index 번호를 통해 접근할 수 있습니다
숫자는 값의 순서이며, 0부터 시작합니다
배열이름[인덱스번호]const arr = [1, 2, 3];
arr[0]; // value = 1
arr[1]; // value = 2
arr[2]; // value = 3배열의 길이
arr.length // 3행렬(Matrix, 다차원 배열)
배열안에 다른 배열을 포함시킬 수 있습니다.
행렬입니다
const arr = [
[1,2],
[3,4],
[5,6],
[7,8]
]; // 2차원
const arr = [
[
[1,2],
[3,4]
],
[
[5,6],
[7,8]
]
]; // 3차원배열의 메소드
push() : 배열 맨 마지막에 요소를 추가하고, 배열의 길이(length)를 리턴
pop() : 배열의 맨 마지막 요소를 제거하고, 제거된 요소(데이터)를 리턴
shift() : 배열의 맨 앞 요소를 제거하고, 제거된 요소(데이터)를 리턴
unshift() : 배열의 맨 앞에 요소를 추가하고, 배열의 길이(length)를 리턴
reverse() : 배열을 거꾸로 뒤집어서 순서 교체
sort() : 배열 요소를 문자열로 치환하여, 알파벳 순으로 정렬
splice(시작 인덱스, 요소 개수, 추가요소(생략가능)) : 배열의 요소를 추가, 제거, 교환합니다
slice(시작 인덱스, 끝 인덱스) : 배열의 시작 인덱스번째 요소부터 끝 인덱스 -1 번째 요소까지 추출합니다
delete() : 배열 요소를 지우는데, 배열 길이는 유지합니다.
forEach() : 배열의 모든 요소에 대해 반복적으로 콜백 함수를 실행합니다
const arr = [1,2,3,4];
arr.forEach((item, index) => {});map : 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 리턴합니다
// 각 요소를 2승하여 새 배열로 반환
const arr = [1,2,3,4];
const arrSquare = arr.map((item, index) => {return item ** 2});여기서!
map은 새로운 배열로 반환하지만,forEach는 그렇지 않습니다
filter() : 배열의 모든 요소에 반복적으로 콜백 함수를 실행한 후, 결과가 참인 경우에만 새로운 배열에 추가하여 리턴
const arr = [
{
"name" : "무꾸씨",
"age" : 28
},
{
"name" : "푸꾸씨",
"age" : 20
}
];
// 나이가 27살 이상인 배열 만들기
const overAge = arr.filter((item) => {
return item.age >= 27;
});reduce() : 배열 내 요소들을 하나의 값으로 합산하기 위해, 두 개의 파라미터를 받는 콜백함수 실행
const arr = [
{
"name" : "무꾸씨",
"age" : 28
},
{
"name" : "푸꾸씨",
"age" : 20
}
];
// 나이를 모두 더해서, 평균값 내기
const averageAge = arr.reduce((a, b) => a + b.age, 0) / arr.length;콜백 함수 첫번째 파라미터 내 a, b는 배열의 첫 번째 요소와 두 번째 요소이고 리턴된 결과값이 다시 a, 세번째 요소가 b로 들어가 배열의 끝까지 진행됩니다
두번째 파라미터는 초기값(initial Value)입니다.
초기값을 세팅하지 않으면 어떻게 되는지는 이전 포스트에 있어요!
includes() : 요소에 포함된 게 있으면 참(true), 아니라면 거짓(false)을 리턴합니다
join : 배열을 문자열로 이어붙여 나열합니다
오늘은 이렇게 배열에서 자주 사용하는 메소드에 대해 알아봤는데요
엄청 많네요..
근데 아시죠?
여기에 없는 것도 더 많이 있으니 개발자답게 필요할 때만!
검색해서 사용하시면 되겠습니다
오늘은 여기까지입니다
감사합니다
