[Javascript] 배열

배열

• 자바스크립트의 기본 데이터 타입 
• []안에 데이터 입력
• 타입에 상관없이 사용 가능
• 배열에 배열, 객체도 저장 가능

---

배열 초기화

// 빈 배열
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')

---

배열 길이 확인

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

---

배열 요소 추가/삭제

• 배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환

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

---

배열 요소 변경

메서드	설명	결과
배열.splice(위치, 추출개수, 요소, 요소...)	배열의 n번째 위치에 m개의 요소를 삭제 후 추가 요소 삽입	원본 배열 변경

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

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

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

---

배열 요소 추출

메서드	설명	결과
배열.slice(n1, n2)	배열의 n1부터 n2-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"]

---

배열 요소 결합

메서드	설명	결과
배열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

---

배열 요소 검색

메서드	설명	결과
배열.indexOf(검색어, [시작위치])	해당 요소가 있는 위치 검색	숫자
배열.lastIndexOf(검색어, [시작위치])	끝에서 부터 해당 요소 위치 검색	숫자
배열.includes(검색어 [시작위치])	해당 요소 포함 여부	boolean

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

메서드	설명	결과
배열.find(콜백함수)	콜백함수 조건에 맞는 요소 검색	요소
배열.findIndex(함수)	콜백함수 조건에 맞는 요소의 인덱스 검색	숫자
함수 문법 ([요소[, [인덱스], [기존배열]) => 진리값	요소 확인 후 불린값 반환	boolean

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

---

 

배열 정렬

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

sort() 활용

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

메서드	설명	결과
배열.sort(비교함수)	조건을 통한 배열 정렬	원본 배열 변경

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()

 

알파벳 정렬

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

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

---

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

map() 

• 기존 배열을 활용하여 새로운 배열 생성 시 map() 활용
• forEach와 비슷하나 반환값이 존재

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

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

---

filter() 

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

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

---

reduce()

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

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

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


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

---

유사배열 - 배열로 변환

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

유사배열

• 배열처럼 인덱스에 접근할 수 있으나 진짜 배열이 아닌 객체를 의미
• 숫자형 인덱스를 사용하여 요소에 접근 가능
• 배열 메서드를 사용할 수 없음 (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(변환대상, [콜백함수])	배열로 변환	배열

const list = document.querySelector('div');
const newList = [...list];

const txt = 'hello';
// const newtxt = [...txt]; // ⇒ [ 'h', 'e', 'l', 'l', 'o' ]

// const newTxt2 = Array.from(txt); // ⇒ [ 'h', 'e', 'l', 'l', 'o' ]

const newTxt3 = [...txt].map((value)=>`${value}`); // ⇒ [ 'h', 'e', 'l', 'l', 'o' ]

---