배열 이란
- 생성하기
-
배열 리터럴
const arr = ['a','b','c'] //a,b,c 는 요소라고 한다 -
Array 생성자 함수 , Array.of , Array.from메서드
//Array 생성자 const a = new Array(10) // 인수가 하나일때 ->[empty 10개] length = 10 const b = new Array() //[] const c = new Array(1,2,3) //[1,2,3] //Array.of const a = Array.of(1) //[1] const b = Array.of(1,2,3) //[1,2,3] const c = Array.of('test') //['test'] //Array.from -> ES6에서 도입 const a = Array.from({length:2, 0 :'a', 1:'b'}) //['a','b'] const b = Array.from({length:n},()=>true) //[true,true...] const c = Array.from('test') //['t','e','s','t'] -> 이터러블을 변환하여 배열로 생성한다
-
- 접근하기
- 대괄호 표기법
arr[0]
- 대괄호 표기법
- 타입 :
object- 객체와의 차이
- 객체와의 차이
- 요소 추가, 갱신
const arr = [0] arr[1] = 1 // arr[1]이 존재하지 않는 인덱스면 없으면 추가됨, 존재하는 인덱스 였으면 갱신됌 arr[50] = 50 // [0,1,empty...,50] 사이가 비어버림 - 요소 삭제
const arr = [1,2,3] //delete 연산자 delete arr[1] // [1,empty,3] // 앞으로 밀리는게 아니라 비어버림 //splice, slice const spliced = arr.splice(삭제 시작인덱스, 삭제할 요소 갯수) //원본이 잘리고, 잘린 부분을 리턴한다. const sliced = arr.slice(0,3) //0번부터 2번째 요소 까지 자름
자바스크립트 배열은 배열이 아니다
- 흔히 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다.
- 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ⇒ 밀집 배열
자바스크립트 배열
- 그러나 자바스크립트는 각 요소의 메모리 공간이 동일한 크기를 갖지 않아도 되며, 연속적 이지 않을수도 있다. ⇒ 희소 배열
- 결국 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다
일반적인 배열 vs 자바스크립트 배열
- 일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있다 but, 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.
- 자바스크립트 배열은 해시 테이블로 구현된 객체 이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수 밖에 없는 구조적인 단점이 있다. 하지만 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.
배열 메서드
원본을 변경하는 메서드
push
const arr = [1]
arr.push(2) //[1,2]pop()- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
unshift()-
인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
const arr = [1,2] const result = arr.unshift(3,4) //[3,4,1,2] //스프레드 문법으로 구현하길 권장 [3,4,...arr]
-
shift()- 첫번째 요소를 제거 하고, 반환한다.
const arr = [1,2] const result = arr.shift() //1,[2]
- 첫번째 요소를 제거 하고, 반환한다.
splice()const arr = [1,2,3,4] splice(start,deleteCount,items...) const result = arr.splice(1,2) // 1, 2 요소 제거 시작 인덱스, 제거할 요소의 갯수 const result = arr.splice(-1,2) //start가 -1일 경우 마지막 요소 ,-n일 경우 마지막에서 n번째 요소 const result = arr.splice(1,2,20,30) //1번째 인덱스부터 2개 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.join()- 모든 요소를 문자열로 변환한 수, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다.
reverse()- 원본 배열의 순서를 반대로 뒤집는다.
fill()- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다
flat()-
인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 한다.
[1,[2,3,[4,5]]].flat() //[1,2,3,[4,5]] [1,[2,3,[4,5]]].flat(2) //[1,2,3,4,5] [1,[2,3,[4,5]]].flat(Infinity) //[1,2,3,4,5] -> 끝까지 다 평탄화
-
새로운 배열을 만드는 메서드 (원본 배열 변경 x)
concat
const arr = [1]
const result = arr.concat(2)
arr // [1]
result //[1,2]Array.isArray()- 전달된 인수가 배열이면 true, 아니면 false
indexOf(n)-
전달한 배열에 인덱스를 반환한다
const arr = [1,2,2,3] arr.indexOf(2) //1번 인덱스이므로 1 arr.indexOf(2,2) //2 2를 2번 인덱스부터 검색을 시작한다. arr.indexOf(4) //없으므로 -1 반환
-
arr.includes(n)- arr에 인수로 전달받은 요소가 존재 하는지 안하는지 확인한다.
slice()const arr = [1,2,3,4] const result = arr.slice(1,3) // arr[1]부터 arr[3-1]까지 복사하여 반환한다.- slice 메서드에 아무 인수를 넘기지 않았을 경우 얕은 복사를 한다.
- 이를 이용해
arguments,HTMLCollection,NodeList같은 유사 배열 객체를 배열로 변환할 수 있다.
배열 고차 함수
고차함수 : 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
-
고차함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.
-
함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.
-
sort()-
유니 코드를 기준으로 정렬
-
숫자 요소를 정렬할때는 유니코드 코드 포인트가 숫자 순서가 아니기 때문에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다.
-
비교함수는 반환된 값이 양수, 음수, 0 인 것을 기준으로 정렬한다.
const arr = ['a','b','c'] arr.sort() //오름차순 정렬 //숫자 요소 정렬 const arr = [1,2,3,4] arr.sort((a,b)=> a-b) //오름차순 arr.sort((a,b)=> b-a) //내림 차순 //객체 요소 정렬 const arr = [ {id:3,...}, {id:1,...}, {id:2,...}, ] arr.sort((a,b)=> (a[id] > b[id] ? 1 : (a[id] <b[id] ? -1: 0)) //a[id],b[id] 가 같으면 0 //a[id]가 크면 1 //b[id]가 크면 -1
-
