[Javascript] 배열

배열

• 자바스크립트의 기본 데이터 타입 
• 객체의 한 종류
• [] 안에 데이터 입력
• 배열의 요소는 자료형에 제한이 없음 (boolean, 숫자, 문자열, 배열, 객체 등을 가질 수 있음
• 객체와는 달리 데이터를 요소로만 저장하는 형태 

---

배열 초기화

// 빈 배열
const arr1 = []

// 데이터가 있는 배열 정의
const arr2 = [2,3,1]
// 배열 안에 배열 정의
const arr3 = [[11,22], [33,44]]
// 배열 안에 객체 정의
const arr4 = [{name :'a'}, {name:'b'}]

// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)
const arr5 = new Array('1', '2')

---

배열 요소 접근

메서드	설명	반환
배열[해당 요소의 index]	해당 요소의 순서에 해당하는 값 반환	해당 요소의 자료형

const arr = [0, 1, 3]
console.log(arr[2]); // ⇒ 3

---

배열 요소 수정

메서드	설명
배열[해당 요소의 index] = "변경할 값"	해당 요소의 순서에 변경할 값을 대입

const arr = [true, 100, 'hi'];

arr[0] = !arr[0];
arr[1] += 100;
arr[2] += ' mike';
console.log(arr); // ⇒[ false, 200, 'hi mike' ]

---

배열 요소 추가/삭제

• 배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환
• 원본 함수가 변경됨

메서드	설명
배열.unshift(요소, 요소...)	배열의 첫번째 위치에 요소 추가
배열.push(요소, 요소...)	배열의 마지막 위치에 요소 추가
배열.shift()	배열의 첫번째 위치의 요소를 삭제
배열.pop()	배열의 마지막 위치의 요소를 삭제

let arr = [1, 2, 3];
arr.push(4);     // [1, 2, 3, 4]
arr.pop();       // [1, 2, 3]
arr.shift();     // [2, 3]
arr.unshift(0);  // [0, 2, 3]
arr.reverse();   // [3, 2, 0]
arr.sort();      // 정렬 (문자 기준이면 주의!)

배열 길이 확인

메서드	설명	결과
배열.length	배열 길이 반환	숫자

 

---

배열 요소 변경

메서드	설명	결과
배열.splice(시작인덱스, 제거개수, 추가할값1, 추가할값2, ...)	배열의 해당 인덱스 위치에 m개의 요소를 삭제 후 추가 요소 삽입	원본 배열 변경

const arr = ['a', 'c']
arr.splice(1, 1, 'b','c') // ⇒  [ 'a', 'b', 'c' ]

✓ 'SPice 제거하고 넣는다!" 

메서드	설명	결과
[변수1, 변수2] = [값1, 값2]	배열의 각 요소에 값 변경	원본 배열 변경

let a, b, c
[a, b, c] = [1, 2, 3]

---

배열 요소 추출

메서드	설명	결과
배열.slice(시작인덱스, 끝인덱스);	배열의 시작인덱스 부터 끝 인덱스-1까지 추출	원본 배열 변경 x 얕은 복사
배열.slice(n)	시작위치부터 n인덱스 까지 배열 추출
배열.slice(-n)	끝 위치 부터 n개 만큼의 배열 추출
배열.slice(n1, -n2)	n1번째 인덱스 부터 끝에서 n2번째까지의 요소를 출력

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));//["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));//  ["camel", "duck"]

console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));// ["duck", "elephant"]

console.log(animals.slice(2, -1));// ["camel", "duck"]

console.log(animals.slice());//  ["ant", "bison", "camel", "duck", "elephant"]

---

배열 요소 결합

• 배열을 합쳐 새로운 배열을 생성
• Concat은 Combine + Copy! 🐈‍⬛

메서드	설명	결과
배열1.concat(배열2, 배열3..)	배열1에 배열2, 3 결합	원본 배열 변경 X
[...배열1, ...배열2,...배열3]	배열1에 배열2, 3 결합	원본 배열 변경 X

 

const arr = ['a', 'b'];
const arr2 = ['c']; 
const arr3 = arr.concat(arr2)  // ⇒[ 'a', 'b', 'c' ]
const arr4 = [...arr, ...arr2] // ⇒[ 'a', 'b', 'c' ]

 

---

배열 요소를 문자열로 반환

메서드	설명	결과
배열.join(문자열)	배열 요소를 문자열로 합침	문자 (원본 배열 변경 X)
배열.join()	, 로 구분지어 반환	문자 (원본 배열 변경 X)
배열.join('')	,없이 문자 반환	문자 (원본 배열 변경 X)

const arr = ['a', 'b'];
const res  = arr.join() // ⇒ a,b
const res2  = arr.join('') /// ⇒ ab

✓ "join은 줄을 묶는다" → 배열을 하나의 줄(문자열)로 묶인다.

---

배열 요소 검색

메서드	설명	결과
배열.indexOf(검색어, [시작위치])	검색하려는 요소의 위치를 처음부터 검색	숫자
배열.lastIndexOf(검색어, [시작위치])	끝에서 부터 해당 요소 위치 검색	숫자
배열.includes(검색어, [시작위치])	해당 요소 포함 여부	boolean
배열.find(조건함수)	조건의 만족하는 값 자체를 찾고자 할 때 사용 - 조건에 만족하는 첫번째 요소 반환	값

 

const arr =['a', 'b', 'c', 'c', 'e']
arr.indexOf('c') // ⇒ 2
arr.lastIndexOf('c') // ⇒ 3
arr.includes('c') // ⇒ true

const arr =['a', 'b', 'c', 'c', 'e']
const res = arr.find((value, idx,)=> idx ===4) // ⇒ 4

---

 

배열 정렬

sort() 

• 배열 정렬, 기본적으로 단어순이지만, 숫자 정렬 시에 비교함수가 필요

메서드	설명	결과
배열.sort()	배열 정렬	원본 배열 변경
배열.sort(비교함수)	조건을 통한 배열 정렬 - 숫자의 경우 비교함수가 필요	원본 배열 변경

const arr = ['lee', 'park', 'kim'];
let res = arr.sort(); // ⇒ [ 'kim', 'lee', 'park' ]

let res2 = [1, 2, 10, 3].sort(); // ⇒ ※[ 1, 10, 2, 3 ] 문자열 처럼 정렬!

sort 활용

• 2개의 인수를 설정하여 배열을 정렬
• 반환값 < 0 : a, b 순서대로 정렬 (a를 b보다 먼저 정렬하려면 0보다 작은 숫자를 반환)
• 반환값 = 0 : 변화 없음 (원래 순서를 그대로 두려면 0을 반환)
• 반환값 > 0 : b, a 순 정렬 (a를 b보다 나중에 정렬하려면 0보다 큰 숫자를 반환)
• 비교함수 생략 시 유니코드로 정렬되어 숫자나 문자의 정렬이 제대로 이루어지지 않으므로 비교함수를 활용한 조건 정렬이 필요 (ex) 1, 10, 2,,, / a, b, A

const arr = [1, 2,3,4,5]
arr.sort((a,b)=>{
	return b-a
})
console.log(arr); // ⇒ [ 5, 4, 3, 2, 1 ]

//
const arr = [1, 2,3,4,5]
arr.sort((a,b)=>{
	if(a<b) return 1
	if(a===b) return 0
	if(a > b) return -1
})

arr.sort((a,b) => a > b ? -1 : 1)
console.log(arr); // ⇒ [ 5, 4, 3, 2, 1 ]

// [객체 정렬 활용]
const list = [
	{id: 1, name:'a'},
	{id: 2, name:'b'},
	{id: 3, name:'c'},
]

function accending(){
	list.sort((a,b)=> a.id - b.id)
}

function descending(){
	list.sort((a,b)=> b.id- a.id)
}

descending()

reverse()

메서드	설명	결과
배열.reverse()	배열 역순 정렬	원본 배열 변경

locleCompare()

• 한글/영문 등 문자열을 언어적 규칙에 따라 비교할 수 있도록 도와주는 메서드
• sort()내에서 사용해야 정확한 정렬 가능

메서드	설명	결과
문자1.localeCompare(문자2)	대소문자 구분없이 문자1과 문자2 순서 비교하여 정렬	원본 배열 변경

 

const arr = ['a','E', 'C']
arr.sort((a, b)=> a.localeCompare(b)) // ⇒ [ 'a', 'C', 'E' ]

---

기존 배열을 활용한 새로운 배열 생성

map() 

• 기존 배열을 순회하며 새로운 배열 생성해 줌
• forEach와 비슷하나 반환값이 존재

✓ "map은 배열 여행! 배열 안 모든 요소를 지도(map)를 따라(함수를 따라) 새로운 배열을 만들어 줌

메서드	설명	결과
배열.map(콜백함수)	새로운 배열 생성	배열
콜백함수 ([요소], [인덱스],[기존배열]) => 변형후 요소	요소를 받아 변경 후 반환	배열

const arr = ['a', 'b', 'c'];
const newArr = arr.map((value) => `name : ${value}`); // ⇒ [ 'name : a', 'name : b', 'name : c' ]

filter() 

• 조건식이 true인 요소만을 새 배열로 생성

메서드	설명	결과
배열.filter(콜백함수)	조건을 비교하여 새로운 배열 생성	원본 배열 변경 x 배열
콜백함수 ([요소], [인덱스],[기존배열]) => 진리값	요소를 받아 진리값 반환	배열

const arr = [1,2,3,4,5]
const newArr = arr.filter((val)=> val >4) // // ⇒ [ 5 ]

reduce()

• 배열의 요소를 계산하여 하나의 값으로 만들고 싶을 때 활용

✓ 배열 요소를 하나씩 누적해서, 최종 하나의 값으로 줄여주는 함수

메서드	설명	결과
배열.reduce((accumulator, current, index, array) => {   return 누적값; }, 초기값);	- accumulator : 지금까지 누적된 값 - current : 현재 요소 -초기값 : 처음에 넣을 누적 시작값 요소(좌→우)를 처리하여 하나의 값 생성	임의 지정값
배열.reduce((acc, cur) => 계산식, 초기값)	1. 초기값 0이 prev에 입력 2. 배열의 첫번째 인자값을 cur에 입력 3. 계산식을 통해 결과값 반환 4. 누적된 계산 값을 prev에 입력 5. 두번째 인자를 cur에 입력 6  배열의 요소를 모두 순회할 때까지 4,5반복
배열.reduceRight(콜백함수, [초기화])	요소(좌→우)를 처리하여 하나의 값 생성	임의 지정값

// 함수가 반복되어 실행할 때 마다 설정한 계산값이 acc에 누적됨
const arr = [1, 2, 3, 4, 5];
const res = arr.reduce((acc, cur) => acc + cur); // ⇒ 15
// 또는 초기값을 설정해 줄 수 있음 arr.reduce((acc, cur) => acc + cur, 0);


// 2차원 배열을 1차원 배열로 변환
const arr2 = [
  ['a', 'b', 'c'],
  ['d', 'e'],
];
const res2 = arr2.reduce((acc, cur) => acc.concat(cur)); // ⇒ [ 'a', 'b', 'c', 'd', 'e' ]

---

※ Remark

---

목적에 따른 배열 함수 분류

 변형 (새 배열 반환)
─────────────────────
- map(fn)         → 각 요소 가공
- filter(fn)      → 조건 통과한 것만
- slice(start, end) → 일부만 잘라 새 배열

 탐색 (값/인덱스 찾기)
─────────────────────
- find(fn)        → 조건 만족 첫 요소
- findIndex(fn)   → 조건 만족 첫 인덱스
- includes(val)   → 포함 여부 true/false
- indexOf(val)    → 인덱스 반환, 없으면 -1

 반복/검사
─────────────────────
- forEach(fn)     → 단순 반복 (값 반환 ❌)
- some(fn)        → 하나라도 true면 true
- every(fn)       → 모두 true여야 true

 합치기/축소
─────────────────────
- reduce(fn, acc) → 누적값 계산
- concat(arr)     → 배열 합치기
- join(sep)       → 문자열로 연결

 원본 변경 함수 (주의!) "PPS SURR"
 ─────────────────────
- push(val)       → 뒤에 추가
- pop()           → 뒤에서 제거
- shift()         → 앞에서 제거
- unshift(val)    → 앞에 추가
- splice(i,n,val) → 자르고/넣고
- sort(fn)        → 정렬 (기본은 문자 정렬)
- reverse()       → 배열 뒤집기

💡
─────────────────────
✔ map = “가공”
✔ filter = “선별”
✔ reduce = “하나로”
✔ forEach = “실행만”
✔ some = “하나라도”, every = “전부”
✔ includes = “있냐?”
✔ slice = “복사”, splice = “자르고 바꾸기”
✔ push/pop/shift/unshift = 위치로 추가/삭제
✔ PPS SURR = 원본 변경 함수

────────────────────────────────────────────

 

유형별 함수 비교

새 배열 반환

• map: "지도 그리듯 변형" – 각 요소를 가공한 새 배열
• filter: "필터링된 새로운 배열" – 조건 통과한 것만
• slice: "슬라이스" – 잘라서 새 배열

[1, 2, 3].map(x => x * 2);       // [2, 4, 6]
[1, 2, 3].filter(x => x > 1);    // [2, 3]
[1, 2, 3].slice(0, 2);           // [1, 2]

탐색

• find: "해당 함수를 만족한 첫 번째 요소 값"
• findIndex: " 해당 함수를 만족한 첫 번째 요소의 인덱스"
• includes: "있냐 없냐 true/false"
• indexOf: "몇 번째냐"

[10, 20, 30].find(x => x > 15);     // 20
[10, 20, 30]. findIndex(x => x > 10) // 1
[10, 20, 30].includes(20);          // true
[10, 20, 30].indexOf(30);           // 2

반복/ 검사

• forEach: "단순 실행" – 반환값 없음
• some: "하나라도 true면 true"
• every: "전부 true여야 true"

[1, 2, 3].forEach(x => console.log(x));
[1, 2, 3].some(x => x > 2);      // true
[1, 2, 3].every(x => x > 0);     // true

결합

• reduce: "모든 걸 하나로 줄이기"
• concat: "붙여서 새 배열"
• join: "문자열로 합치기"

[1, 2, 3].reduce((a, b) => a + b, 0); // 6
[1, 2].concat([3, 4]);                // [1, 2, 3, 4]
[1, 2, 3].join("-");                  // "1-2-3"

---

 

유사배열 - 배열로 변환

• 문자열과 유사배열을 배열로 변환하거나, 반복가능한 객체를 배열로 변환하고자 할 때 스프레드 연산자 활용 

유사배열

• 배열처럼 인덱스에 접근할 수 있으나 진짜 배열이 아닌 객체를 의미
• 숫자형 인덱스를 사용하여 요소에 접근 가능
• 배열 메서드를 사용할 수 없음 (push, pop, foreach.. 등)
• Array.from 또는 Array.prototype.slice.call을 활용하여 배열로 변환가능
• length 프로퍼티를 가지고 있음

유사배열의 종류

1. arguments 객체:
   - 함수 내부에서 사용되는 arguments 객체는 함수에 전달된 모든 인자를 포함하는 유사 배열.
   - 배열처럼 인덱스를 통해 접근할 수 있지만, 배열 메서드를 직접 사용할 수는 없음
2. NodeList: :
   - DOM(Document Object Model)에서 특정 메서드(예: document.querySelectorAll)로 선택된 엘리먼트들은 NodeList를 반환
   - NodeList는 유사 배열이며 배열처럼 보이지만 배열 메서드를 직접 사용할 수는 없음
3. String 객체:
   -  문자열은 길이와 인덱스를 가진 유사 배열
   -  문자열은 불변(immutable) 하기 때문에 배열 메서드를 사용하려면 문자열을 배열로 변환해야 함
4. TypedArray:
   - 배열의 일종으로, 일정한 데이터 타입을 갖는 연속적인 메모리 영역을 나타냄
   - 배열 메서드를 직접 사용할 수는 없음

유사배열을 배열로 변환

메서드	설명	결과
[...변환대상]	배열로 변환	배열
Array.from(변환대상, [콜백함수])	배열로 변환	배열

---

관련 글

[Javascript] 배열 메서드