목차
- 배열 검사
- 배열로 변환
- 배열 복사
- 배열 요소 추가
- 배열 요소 제거
- 배열 탐색
- 배열 변형
- 배열 요소 순회
📌 배열 검사
Array.isArray()
: 값이 배열(array)인지 확인
- 배열과 arguments(유사 배열 객체)를 구분할 수 있다.
function example() {
console.log(Array.isArray(arguments)); // false
}
example(1, 2, 3);
true를 반환하는 값들
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array("a", "b", "c", "d"));
Array.isArray(new Array(3));
Array.isArray(Array.prototype);
예제
function processData(data) {
if (Array.isArray(data)) {
data.forEach(item => {
console.log(item);
});
} else {
console.log('The provided data is not an array.');
}
}
processData([1, 2, 3]); // 배열이므로 출력됨
processData({ a: 1, b: 2 }); // 배열이 아니므로 'The provided data is not an array.' 출력됨
📌 배열로 변환
Array.from()
: arguments(유사 배열 객체), 반복 가능한(iterable) 객체를 배열로 변환
- 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성
문자열 ➡ 배열 변환
const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']
유사 배열 객체 ➡ 배열 변환
function example() {
const argsArray = Array.from(arguments);
console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]
Set ➡ 배열 변환
const set = new Set([1, 2, 3, 4]);
const arr = Array.from(set);
console.log(arr); // [1, 2, 3, 4]
📌 배열 복사
let copiedArray1 = [...friends];
slice() 사용
let copiedArray2 = friends.slice();
Array.from(대상)
: 유사 배열 ➡ 배열, 배열 ➡ 배열로 만들어준다.
let copiedArray3 = Array.from(friends);
📌 배열 요소 추가
push()
: 끝 부분에 요소 추가
let arr = ['a', 'b', 'c'];
arr.push('d'); // 배열의 끝에 요소를 추가
// arr = ['a', 'b', 'c', 'd']
unshift()
: 시작 부분에 요소 추가
let arr = ['a', 'b', 'c'];
arr.unshift('d'); // 배열의 앞쪽에 요소를 추가
// arr = ['d', 'a', 'b', 'c']
splice(위치, 0, 추가할 값)
: 원하는 위치에 하나 이상의 요소를 추가
let arr = ['a', 'b', 'c'];
arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가
// arr = ['a', 'b', 'd', 'c']
arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가
// arr = ['a', 'b', 'd', 'c', 'e', 'f']
toSpliced()
- splice() 메서드와 유사
- 원본 배열을 변경하지 않고 새로운 배열을 반환
const toSpliced = people.toSpliced(0, 2)
concat()
: 두 개의 서로 다른 배열을 이어 붙여서 새로운 배열로 반환
let arr6 = [1, 2];
let arr7 = [3, 4];
let concatedArr = arr6.concat(arr7);
console.log(concatedArr);
// [1, 2, 3, 4]
📌 배열 요소 제거
pop()
: 마지막 요소 제거
let arr = ['a', 'b', 'c', 'e', 'f'];
arr.pop(); // 배열의 마지막 요소를 제거
// arr = ['a', 'b', 'c', 'e']
let popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음
// popped = 'e'
shift()
: 처음 요소 제거
let arr = ['a', 'b', 'c', 'e', 'f'];
arr.shift(); // 배열의 첫번째 요소를 제거
// arr = ['b', 'c', 'e', 'f']
let shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음
// shifted = 'b'
splice(제거 위치, 제거 개수[, 추가할 값] )
: 원하는 위치에서 하나 이상의 요소를 제거 (+ 해당 위치에 새로운 요소를 추가)
let arr = ['a', 'b', 'c', 'e', 'f'];
arr.splice(2, 1); // index 2부터 1개의 요소('c')를 제거
// arr = ['a', 'b', 'e', 'f']
arr.splice(1, 2); // index 1부터 2개의 요소('b', 'e')를 제거
// arr = ['a', 'f']
removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = 'f'
📌 배열 탐색
includes()
: 배열에 특정 요소가 있는지 확인
- boolean형
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(2);
// true
let isInclude = arr2.includes(10);
// false
indexOf()
: 특정 요소의 인덱스(위치)를 반환
- 객체 타입의 값이 저장된 배열에서는 정확한 위치를 찾을 수 없음
👉 indexOf는 얕은 복사이기 때문
👉 그래서 findIndex 메서드 사용 - 찾으려는 값이 여러 개 존재할 경우, 제일 처음 값의 인덱스 반환
- 값이 존재하지 않다면, -1 반환
let arr3 = [1, 2, 3];
let index = arr3.indexOf(2);
// 1
findIndex()
: 콜백 함수를 만족하는 특정 요소의 인덱스(위치) 반환
- 콜백 함수는 true인 요소의 인덱스를 반환
- 깊은 복사
👉 복잡한 객체 타입의 값을 찾을 때 유용!
let arr4 = [1, 2, 3];
// 배열 arr4를 순회하면서 가장 처음 if문을 만족시키는 값의 인덱스를 반환
const findedIndex = arr4.findIndex((item) => {
if (item === 2) {
return true;
}
});
// 축약 버전
const findedIndex = arr4.findIndex((item) => item === 2);
console.log(findedIndex); // 1
find()
: 콜백함수를 만족하는 요소를 반환
let arr5 = [
{ name: "이정환" },
{ name: "홍길동" },
];
const finded = arr5.find(
(item) => item.name === "이정환"
);
console.log(finded);
// name: "이정환"
📌 배열 변형
reduce()
: 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환
배열.reduce(function(acc, cur) {
...
}, 초기값)
- 인자값
- 누적값 (acc)
- 현재 값 (cur)
- 현재 인덱스 (idx)
- 값을 꼭 반환해줘야 한다.
- 반환 안하면 undefined - 숫자/문자/배열/객체 등을 반환할 수 있다⭕
- 누적 변수(total 등)를 따로 선언하지 않아도 된다.
- 초기값을 설정하면 acc로 들어간다.
- 초기값을 설정하지 않으면 배열의 첫 번째 아이템이 acc로 들어간다. - acc + cur의 값이 다시 acc로 들어간다. (누적)
[1000, 3000, 2500].reduce(function(acc, cur) {
return acc + cur
}, 0)
예시
let calculateTotal = function () {
const result = arr.reduce(function(arr, cur){
return arr + cur
}, 0);
return result;
};
const result = calculateTotal(1000, 5000, 2500, 4000, 2300);
예시 2
const people = [
{
nickName:'tiger',
age:40
},
{
nickName:'beom',
age:45
},
{
nickName: 'seon',
age:20
}
]
const template = people.reduce(function(htmlCode,cur){
return htmlCode + `<div>${cur.nickName} : ${cur.age}</div>`
},'')
console.log(template);
// 출력 결과
<div>tiger : 40</div><div>beom : 45</div><div>seon : 20</div>
map()
: 배열의 모든 요소를 순회하면서 각각 콜백함수를 실행하고, 그 결과값들을 모아서 새로운 배열로 반환
배열.map(콜백 함수(item, index) {
...
})
- 현재 요소, 인덱스, 원본 배열을 인자로 전달 받는다.
- 값을 반환해야 한다.
- 오직 배열로만 반환한다.
- 원본 보존 (원본 배열을 훼손하지 않는다.❌)
- forEach와 비슷함
const arr = [10, 100, 1000];
const mapValue = arr.map(function (item, index) {
return item * 2
})
console.log(mapValue);
// 출력 결과
(3) [20, 200, 2000]
예시
// - html 만들기
const cardTag = people.map(({ name, age, job, imgSrc, imgAlt }) => {
let template = /* html */`
<li class="userCard">
<div class="imageField">
<img src="${imgSrc}" alt="${imgAlt}" />
</div>
<ul class="contents">
<li> <span class="strong">이름</span> : ${name}</li>
<li> <span class="strong">나이</span> : ${age}</li>
<li> <span class="strong">직업</span> : ${job}</li>
</ul>
</li>
`
return template;
})
const ul = document.querySelector('ul');
cardTag.forEach(tag => ul.insertAdjacentHTML('beforeend', tag))
// 넣을 태그.insertAdjacentHTML('위치', 넣을 요소)
filter()
: 조건에 부합하는 모든 대상을 배열로 반환
- 현재 요소, 인덱스, 원본 배열을 인자로 전달 받는다.
- find()와 다른 점
1. 복수 대상을 반환한다.
2. 배열을 반환한다.
const people = [
{
id: 0,
name: '안녕1',
age: 25,
job: '목사',
imgSrc: 'https://randomuser.me/api/portraits/thumb/men/50.jpg',
imgAlt: '대체 텍스트입니다.'
},
{
id: 1,
name: '안녕2',
age: 51,
job: '사장님',
imgSrc: 'https://randomuser.me/api/portraits/thumb/men/65.jpg',
imgAlt: '대체 텍스트입니다.'
}
]
const filter = people.filter((itme) => {
return itme.age > 20
})
console.log('filter', ...filter) // 구조분해(...)로 각자 배열로 반환
split()
: 문자열에서 ()를 기준으로 쪼갠 후 배열로 반환
const frontEndDev = 'HTML CSS SVG JavaScript jQuery React Redux'.split(' ');
let i = 0;
let l = frontEndDev.length;
while(i < l) {
console.log(frontEndDev[i]);
i += 1;
}
/*
HTML
CSS
SVG
JavaScript
jQuery
React
Redux
*/
sort()
: (원본) 배열을 사전 순으로 정렬
let arr = [10, 3, 5];
// 오름차순 정렬
arr.sort((a, b) => {
if (a > b) { // a가 b 앞에 와라
return -1;
} else if (a < b) { // b가 a 앞에 와라
return 1;
} else { // 두 값의 자리를 바꾸지 마라 => 값이 동일
return 0;
}
});
toSorted()
: 배열을 정렬하여 새로운 배열(복사본)로 반환
- sort() 메서드와 유사
- 원본 배열을 변경하지 않고 새로운 배열을 반환
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();
// ["a", "b", "c"]
join()
: 배열의 모든 요소를 하나의 문자열로 합쳐서 반환
- split(): 문자 ➡ 배열
- join(): 배열 ➡ 문자
const str = '유 정 현 재';
const arrayToString = stringToArray.join('-'); // '-'가 문자 구분자
console.log('arrayToString', arrayToString);
// 유-정-현-재
reverse()
: 배열의 순서를 뒤집어서 반환
const array = [1, 2, 3, 4, 5];
const copyArray = [...array].reverse();
console.log(copyArray); // [5, 4, 3, 2, 1]
console.log(array); // [1, 2, 3, 4, 5] - 원본 배열은 변경되지 않음
toReversed()
- reverse() 메서드와 유사
- 원본 배열을 변경하지 않고 새로운 배열을 반환
const toReversed = people.toReversed();
📌 배열 요소 순회
for문
- 인덱스 저장 O
let friends = '한,재,정,유,윤,민,재,신'.split(',');
for (let i = 0; i < friends.length; i++) {
console.log(friends[i]);
}
/*
한
재
정
유
윤
민
재
신
*/
for...of문
: iterator한 요소들을 순환하는데 사용
- iterator 요소로 만들어서 순환 👉 [Symbol.iterator]

- 인덱스 저장 X
let friends = '한,재,정,유,윤,민,재,신'.split(',');
const iter = friends[Symbol.iterator]() // iterator한 배열 객체가 생성됨
for (const name of iter) {
console.log(name);
}
/*
한
재
정
유
윤
민
재
신
*/
forEach문
const people = [
{
id: 0,
name: '안녕1',
age: 25,
job: '목사'
},
{
id: 1,
name: '안녕2',
age: 51,
job: '사장님'
}
]
people.forEach(user => {
console.log(user.job);
});
/*
목사
사장님
*/
배열인지 체크하는 함수
function isArray(data) {
return Object.prototype.toString.call([]).slice(8, -1).toLowerCase() === 'array'
/* 1. Object.prototype.toString.call([])을 하면 [object Array] 문자열이 나옴
2. .slice(8, -1)로 'Array' 부분만 잘라서 검사함 */
}
null인지 확인하는 함수
function isNull(data) {
return Object.prototype.toString.call(null).slice(8, -1).toLowerCase() === 'null'
}
자료형 체크하는 함수를 따로 빼서 만들기
function typeOf(data) {
return Object.prototype.toString.call(null).slice(8, -1).toLowerCase()
}
// -------------arrow function-------------
const typeOf2 = (data) => Object.prototype.toString.call(null).slice(8, -1).toLowerCase()
const isArray2 = (data) => typeOf(data) === 'array'
const isNull2 = (data) => typeOf(data) === 'null'
const isNumber2 = (data) => typeOf(data) === 'number'
배열
ko.javascript.info
배열과 메서드
ko.javascript.info
Array.from() - JavaScript | MDN
Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성합니다.
developer.mozilla.org
Array.isArray() - JavaScript | MDN
Array.isArray() 정적 메서드는 전달된 값이 Array인지 판단합니다.
developer.mozilla.org