배열(array)
- 특수한 객체.
- 배열을 구성하는 컨텐츠는 요소 또는 원소(element). (객체의 프로퍼티 또는 속성)
- 객체와 다르게 컨테츠에 항상 순서가 있음.
- 배열에서의 키는 인덱스(index)라 하고,
- 객체와 다르게 순차적인 숫자임. (0부터 오름차순)
- 각 원소에 각종 데이터 타입(Data types)이 섞여 들어감.
- 하지만 동일한 데이터 타입의 요소를 사용하는 것이 예측 가능성을 높일 수 있고, 코드의 가독성을 향상시키는 데 도움이 됨.
- 배열의 크기는 고정되지 않음. (언제든 변경 가능)
배열 생성
[]를 이용함.- 원소를
,로 구분. - 원소에 접근할 때는
[]안에 index를 씀. - 덮어쓸 때는 새 값을 할당.
const array = [1, 'blabla', {}, 4];
console.log(array); // [ 1, 'blabla', {}, 4 ]
console.log(array[0]); // 1
const objects = [{ name: '멍멍이' }, { name: '냐옹이' }]; // 객체로 이루어진 배열.
console.log(objects); // [ { name: '멍멍이' }, { name: '냐옹이' } ]
console.log(objects[1]); // { name: '냐옹이' }비구조화 할당(destructuring assignment)
- 배열도 객체이기 때문에 비구조화 할당 가능.
- 비구조화 할당 내용. (객체)
배열 조작 메서드(array method)
- 배열 내장 함수.
- 콜백을 이용하는 배열 조작 메서드는 기본적으로 원소를 하나씩 순차적으로 빼내는 기능이 있음. (마치
forloop의 기능 내장) - 객체의 접근자 프로퍼티 처럼 조회만 해도 호출이 되기도함.
.length
- 원소의 개수(배열의 크기) 반환하는 프로퍼티.
- 배열 조작 메서드는 아니지만 참고.
const objects = [{ name: '멍멍이' }, { name: '냐옹이' }];
console.log(objects.length); // 2
objects.push({ name: '멍뭉이' });
console.log(objects.length); // 3.push()
- 배열에 마지막에 새로운 원소 추가.
- 기존의 배열을 수정함.
- 파라미터 안에 추가하고자 하는 원소 값 입력.
const objects = [{ name: '멍멍이' }, { name: '냐옹이' }];
objects.push({ name: '멍뭉이' });
console.log(objects); // [ { name: '멍멍이' }, { name: '냐옹이' }, { name: '멍뭉이' } ]Array.prototype.forEach()
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])currentvalue: 처리할 현재 요소index: 처리할 현재 요소의 인덱스array: 메소드를 호출한 배열thisArg:callback실행시this값
- 배열에 있는 각 요소에 대해 오름차순으로 한번 실행됨.
- 초기화하지 않은 인덱스 속성은 실행하지 않음. (
empty items등) - 호출한 배열을 변형하지 않음.
// for를 사용하는 것보다 간결함.
const superheroes = ['아이언맨', '캡틴', '토르'];
function print(hero) {
console.log(hero);
}
superheroes.forEach(print); // 아이언맨 캡틴 토르
// 익명 함수 형태로 쓰면 더욱 간단해짐.
const superheroes = ['아이언맨', '캡틴', '토르'];
superheroes.forEach(function (hero) {
console.log(hero);
}); // 아이언맨 캡틴 토르
// 화살표 함수를 이용하면 더더욱 간단해짐.
const superheroes = ['아이언맨', '캡틴', '토르'];
superheroes.forEach((hero) => {
console.log(hero);
}); // 아이언맨 캡틴 토르.map()
- 배열 안의 모든 원소를 변환 하여 새로운 배열 생성. (forEach + push)
.map(currentValue)가 필수 요소. (currentValue: 처리할 현재 요소).map(currentValue,index)(index: 처리할 현재 요소의 인덱스)map()함수 또한 파라미터로 함수 형태가 들어가며 그 함수의 파라미터는 배열의 각 원소를 의미함.- 즉, 콜백 함수
// array의 각 요소의 제곱 값이 있는 새로운 배열 출력.
// forEach 사용시.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = [];
array.forEach((n) => {
squared.push(n * n);
});
console.log(squared);
// map을 이용하면 좀더 간결하게 표현 가능.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const squared = array.map((n) => n * n);
console.log(squared);
// map은 forEach기능에 더하여 push 기능까지 대체.
// map을 더 활용하자면,
// 객체 배열들을 text로 이루어진 문자열 배열로 바꾸는 예제.
const items = [
{
id: 1,
text: 'hello',
},
{
id: 2,
text: 'bye',
},
];
const texts = items.map((item) => item.text);
console.log(texts); // [ 'hello', 'bye' ].indexOf()
- 문자열, 숫자, 불리언 등의 항목이 몇번째 원소인지 인덱스 값 반환.
- 단, 가장 첫번째로 찾은 원소의 순서만 반환하고 종료 됨.
// 침착맨이 몇번째인지 찾기.
const superheroes = ['아이언맨', '침착맨', '토르'];
const index = superheroes.indexOf('침착맨');
console.log(index); // 1 반환..findIndex()
- 객체나 특정 조건에 부합하는 원소의 인덱스 값 반환.
- 단, 가장 첫번째로 찾은 원소의 순서만 반환하고 종료 됨.
- 콜백 함수로 파라미터로 함수를 받음.
// 객체로 이루어진 배열에서 찾기.
const todos = [
{
id: 1,
text: '침착맨',
done: true,
},
{
id: 2,
text: '주펄',
done: true,
},
{
id: 3,
text: '김풍',
done: true,
},
{
id: 4,
text: '기안84',
done: false,
},
];
const index = todos.findIndex((todo) => todo.done === false);
console.log(index); // 3.find()
- 객체나 특정 조건에 부합하는 원소(객체자체)를 반환.
- 단, 가장 첫번째로 찾은 원소의 값만 반환하고 종료 됨.
- 콜백 함수로 파라미터로 함수를 받음.
// 객체로 이루어진 배열에서 찾기
const todos = [
{
id: 1,
text: '침착맨',
done: true,
},
{
id: 2,
text: '주펄',
done: true,
},
{
id: 3,
text: '김풍',
done: true,
},
{
id: 4,
text: '기안84',
done: false,
},
];
const todo = todos.find((todo) => todo.done === false);
console.log(todo); // { id: 4, text: '기안84', done: false }. todos[3]인 객체 자체를 반환..filter()
- 특정 조건을 만족하는 원소들 새로운 배열로 만듬.
.push()의 기능 까지 소유한 느낌.
// 1부터 10까지의 배열을 만들고, 3의 배수를 제거.
const arr = [...new Array(10)].map((_, i) => i + 1).filter((v) => v % 3 !== 0);
console.log(arr); // [ 1, 2, 4, 5, 7, 8, 10 ]- 객체로 이루어진 배열에서 이용 가능.
const todos = [
{
id: 1,
text: '침착맨',
done: true,
},
{
id: 2,
text: '주펄',
done: true,
},
{
id: 3,
text: '김풍',
done: true,
},
{
id: 4,
text: '기안84',
done: false,
},
];
const tasksNotDone = todos.filter((todo) => todo.done);
// filter함수 안의 파라미터의 'todo.done'이 반환하는 값이 불리언.
// 때문에 'todo.done' 이라 쓰면 'todo.done === true'과 같고,
// '!todo.done' 이라 쓰면 'todo.done === false'와 같음.
console.log(tasksNotDone);
/*
[
{ id: 1, text: '침착맨', done: true },
{ id: 2, text: '주펄', done: true },
{ id: 3, text: '김풍', done: true }
]
*/.splice()
- 배열의 원소를 삭제함.
- 기존의 배열을 수정함.
- 삭제된 원소들을 배열로서 받을 수 있음. (
.push()불필요) - 파라미터는
(인덱스 값, 총 삭제할 원소 개수). - 파라미터에 삭제하고자 하는 원소의 인덱스 값 입력.
- 이어서 총 삭제할 원소의 개수도 지정 가능.
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2);
console.log(spliced); // [ 30, 40 ] 삭제된 원소들을 배열로 보내줌.
console.log(numbers); // [ 10, 20 ] 삭제 뒤의 배열 출력..slice()
- 배열을 잘라냄. (사실
ctrl+c&ctrl+v가 더 어울리므로 복붙에 가까움) .splice()와 다르게 기존의 배열을 건드리지 않음.- 파라미터는
(인덱스 값(이상),인덱스 값(미만)).
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2);
console.log(sliced); // [ 10, 20 ]
console.log(numbers); // [ 10, 20, 30, 40 ]. 기존 배열..shift()
- 배열 안에 있는 첫번째 원소를 추출. (잘라내기)
- 기존의 배열을 수정함.
- 파라미터는 비어있음.
.unshift()와 반대 기능.
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
const value2 = numbers.shift(); // shift는 이렇게 반복해서 사용가능.
console.log(value); // 10
console.log(value2); // 20
console.log(numbers); // [ 30, 40 ].pop()
- 배열 안에 있는 마지막 원소를 추출. (잘라내기)
- 기존의 배열을 수정함.
- 파라미터는 비어있음.
.push()와 반대 기능.
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
const value2 = numbers.pop(); // pop 또한 반복해서 사용가능.
console.log(value); // 40
console.log(value2); // 30
console.log(numbers); // [ 10, 20 ].unshift()
- 배열에 첫번째에 새로운 원소 추가.
- 기존의 배열을 수정함.
- 파라미터 안에 추가하고자 하는 원소 값 입력.
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); // [ 5, 10, 20, 30, 40 ].concat()
- 여러 개의 배열을 하나의 배열로 합쳐줌.
- 기존의 배열은 건드리지 않음.
- 파라미터 안에 합치고자 하는 배열 중 하나를 입력.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(arr1); // [ 1, 2, 3 ] 기존 배열 수정 않함.
console.log(arr2); // [ 4, 5, 6 ] 기존 배열 수정 않함.
console.log(concated); // [ 1, 2, 3, 4, 5, 6 ].join()
- 배열안의 원소를 문자열 형태로 합침.
- 파라미터의 값은 구분기호(separator)를 의미함.
- 비워두면 기본값인
,(콤마).
const arr = [1, 2, 3, 4, 5];
console.log(arr.join()); // 1,2,3,4,5; 파라미터를 비운 기본값
console.log(arr.join('')); // 12345
console.log(arr.join('---')); // 1---2---3---4---5.reduce()
- 요약, 계산, 값 구하기 등의 기능. (like 피벗테이블)
- 매우 유용한 콜백 함수.
- 특이한 점이 많은데 첫번째로 반환 값(return value)은 누산기(accumulator; acc) 값.
- 파라미터는
((함수), (누산기의 초기값; initialValue))로 구성됨. - 또한 함수는
(누산기(accumulator), 현재 원소(currentValue), 현재 인덱스(currentIndex), 호출한 배열(array))4가지의 매개변수를 가지게 됨. - 이 중
누산기(accumulator)와현재 원소(currentValue는 필수 값. - 또한 매개변수의 이름은 동일하지 않아도 문제가 없음.
// 원소의 총합을 forEach로 구하기.
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach((n) => {
sum += n;
});
console.log(sum);
// 원소의 총합을 reduce로 구하기.
const numbers = [1, 2, 3, 4, 5];
function numSum(acc, current) { // reduce의 파라미터로 들어갈 함수를 선언. 필수 매개변수(누산기, 현재원소)만 이용.
return acc + current; // return값은 누산기로 전달됨.
}
const sum = numbers.reduce(numSum, 0); // reduce의 파라미터로 numSum과 누산기의 초기값 0.
console.log(sum); // 15출력
// 원소의 총합을 reduce로 1줄로 간결하게 구하기.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, current) => acc + current, 0); // 화살표함수 body가 1줄이어서 return, 중괄호 삭제.
console.log(sum); // 15
// 원자들의 평균값을 구하기.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, current, index, array) => {
if (index === array.length - 1) { // 배열의 마지막 원소인 조건을 의미.
return (acc + current) / array.length; // 원소의 합을 원소의 개수로 나누기.
}
return (acc += current);
}, 0); // 누산기는 초기값 0.
console.log(sum);
// 배열안의 각 알파벳의 개수를 구하여 객체로 만들기
const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];
const counts = alphabets.reduce((acc, current) => {
if (acc[current]) { // acc.current 값을 의미함. current는 현재 원소.
acc[current] += 1; // acc.current 값이 있다면 1씩 증가함. 이 식은 acc[current] = acc[current] + 1 동일.
} else {
acc[current] = 1; // acc.current 값이 없다면, 즉 처음이라면? 1 할당.
}
return acc;
}, {}); // 누산기의 초기값으로 빈 객체 전달. {}
console.log(counts); // { a: 3, b: 1, c: 2, d: 1, e: 1 }
// 애초에 누산기의 의미가 갑을 더하는 느낌인데, 누산기가 배열로 되어 push 기능 비슷하게 되었음.
Dev