[🦄자바스크립트 완벽가이드] 배열

🌟 자바스크립트 배열의 특징

• 타입이 없어서 배열 하나에 여러 타입이 섞여있어도 괜찮음
• 0으로 시작하는 32비트 인덱스를 사용해서, 최대 2의32승 -2 (32비트) 까지 커질 수 있다.
• 배열은 **성긴 배열(sparse)**이라 인덱스가 이어지지 않아도 됨!
• 모두 length 프로퍼티가 있다.
• 자바스크립트 실행 환경은 배열을 최적화하므로 일반적인 객체 프로퍼티보다 상당히 빠르게 접근 가능하다.
  • Tip! 배열을 사용할때는 리터럴 형식으로 객체를 생성하고 push() 메서드보다 접근자를 사용해 데이터를 추가하는것이 최적화된 사용법이다.

  * 자바스크립트 배열에서의 성능 우위 문법 *
  
  let arr = new Array(); (X)
  let arr = []; (O)
  
  arr.push("안녕"); (X)
   a[2] = “안녕";  (O)
  

 

🍀 1. 자바스크립트 배열의 생성

• 배열 리터럴
• let array = []; let array2 = ["감자", "고추", "배추", "버섯"]; let sengginArray = ["자바스크립트","싫어요",,];; // 성긴 배열 (length = 3)
• 분해 연산자 …
• // ES6 이후 생겼다. 얕게 복사하기 때문에 복사 배열을 수정해도 원본은 무사하다. let a = [1,2,3]; let array = [0, ...a, 4] // [0,1,2,3,4]
• Array() 생성자
• //인자 없이 호출 let array = new Array(); //배열 길이 나타내는 숫자 인자로 호출(길이만 확정) let array = new Array(2); //[비어 있음 × 2]; // 배열요소를 두개 이상 쓰거나, 숫자가 아닌 요소를 하나 넘겨 호출 let array = new Array(5,4,3,2,1, "vegetables"); //[5, 4, 3, 2, 1, 'vegetables']
• Array.of() 와 Array.from()

//인자로 넣은 요소만 갖는 배열 생성
let array = Array.of(10) // [10]
let array = Array.of(1,2,4) // [1,2,4]

//ES6에서 도입(분해 연산자랑 비슷, 얕게 복사하여 새로운 Array 객체를 만든다.)
let copy = Array.from(original);
Array.from('foo') // ["f", "o", "o"];

• Array.from()
  • Array.from()은 유사 배열 객체(Array-like)를 진짜 배열로 바꾸는데 주로 사용한다.
  • 유사배열객체.. (키가 인덱스이며, length 속성을 갖는 객체, 배열은 아님)
  • 자바스크립트에서 배열은 object이다. object에 Array 메소드와 length, iterator 속성을 넣어주는 것이 배열이다. 반대로 object에 length 속성을 역으로 넣어준다면, 배열이 아니라 마치 배열처럼 인식이 된다.
  • how?

  Array.from({ 0: "햄", 1: "베트남", 2: "코로나", length: 3 }));
  // [ '햄', '베트남', '코로나' ]
  

🍀 2. 배열 요소 읽기 / 쓰기

• 자바스크립트는 인덱스를 숫자에서 문자열로 변환함.

a[1] = "one"
a["1"] // "one"

• JS는 객체에 존재하지 않는 프로퍼티를 검색해도 에러가 일어나지 않고, undefined를 반환한다.

🍀 3. 성긴 배열(sparse array ↔ dense array)

• 배열의 요소가 연속적으로 이어져 있지 않는 배열
• 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체이다.
• length 속성값이 요소 개수보다 크다.
• Array() 생성자 혹은 현재 배열 length 보다 큰 인덱스에 요소를 할당하거나, 배열 리터럴로 만들 수 있다.
• 빈 요소에 대한 메모리 공간을 확보하지 않는다

let array = new Array(5); // [비어 있음 × 5]
let array = [];
array[1000] = 0; //[비어 있음 × 1000, 0], length는 1001
let array = [1,,3]; // array[1] = undefined 

but 왜, 언제 쓰는지는 잘 모르겠다… 다만 희소배열을 사용하지 않는 것을 권장한다. (Even more memory-efficient way than dense arrays)

🍀 4. 배열 길이

• 일반적인 자바스크립트 객체와 배열을 구분하는 특징
• length를 갱신할 수 있다. 그 중 length 보다 작은 양의 정수 n으로 지정하면 n 이상인 배열 요소를 삭제한다.

let a = [1,2,3,4,5];
a.length = 3
a // [1, 2, 3]

🍀 5. 배열 요소 추가와 삭제

• push, unshift, splice, pop 등의 메서드가 있다.
• delete 메서드는 배열 길이에 영향을 주지 않는다.

let a = [1,2,3];
delete a[2];

a // (3) [1, 2, 비어 있음]
a.length // 3 출력

• 앞서 말한 length 프로퍼티를 수정해 뒤에 있는 요소들을 줄일 수 있다.

🍀 6. 배열 순회

• for/of, 그냥 for 루프
• for/of 와 달리 forEach, map → 성긴 배열을 인식하고 존재하지 않는 요소에 대해서는 함수를 호출하지 않음

let a = [1,,3,4]
a.forEach((v) => console.log(v));
// 1
// 3
// 4

🍀 7. 다차원 배열

• 자바 스크립트에서는 지원하지 않지만, 배열의 배열, 즉 이중 배열로 흉내낸다.

let love = [["낭","우","사"],["소", "랑", "민"],["해","뚱","보"]];
love[0][2] + love[1][1] + love[2][0] //'사랑해'

🍀🍀 8. 배열 메서드

중요하다고 생각하는 것, 혹은 제가 몰랐던 것만 뽑았습니다…

1. 배열 이터레이터 메서드

• 배열 요소를 순서대로 함수에 전달. 첫번째 인자로 함수를 받는다. 원래 배열을 수정하지 않는다.
• forEach(새 배열을 반환하지 않아도 된다), map(새 배열을 반환한다), filter(조건에 맞는 부분 집합을 새 배열을 반환)
• find / findIndex() → 첫번째 값을 찾는 즉시 순회를 멈춤. find는 요소 전체 반환, findIndex는 인덱스 반환. 값이 없으면 -1 반환
• every() → 모든 조건이 참일때만 true
• some() → 하나라도 참이면 true, 요소 전체가 false 여야만 false 반환 / 반환값이 정해지면 즉시 멈춤
• reduce 사용 시 빈배열에서 초기값없이 사용하면 TypeError 발생

let a = []
undefined
a.reduce((a,b) => a+b)

// Uncaught TypeError: Reduce of empty array with no initial value

a.reduce((a,b) => a+b, 1);
// 1

• reduceRight() 는 오른쪽에서 왼쪽으로 진행되는 점만 reduce와 다르다. (배열의 끝에서 시작)
• flat() → 괄호를 1단계만 벗겨낸다. 인자에 숫자를 넣으면 그 단계만큼 벗겨진다.

[[1,[2,3]]].flat() // [1, [2,3]]
[[[1,[2,3]]]].flat(2) //[1,2,3]

• flatMap() 은 map 함수의 결과값에 flat()을 적용한 결과와 같다. 즉 한 단계만 가능하다.
• concat()은 배열의 사본을 만들어내기 때문에 **지양???**하는 것이 좋다. (push, splice로 대체할 것)

//인자의 요소를 기존 배열에 추가하는 새 배열을 반환한다.
// 인자에 배열이 들어오면 안의 요소를 넣는다. but 이중 중첩된 요소는 그대로 들어간다. 
let a = [1,2,3];
a.concat(4,5) // [1,2,3,4,5];
a.concat([4,5], [6,7]); //[1,2,3,4,5,6,7];
a.concat(4, [5, [6,7]]) // [1,2,3,4,5,[6,7]];

2. 하위 배열

• splice()는 원본 배열에서 부분 배열(하위 배열)을 만들어낸다. 요소를 삽입하거나 제거하며 원래 배열을 수정한다.
• includes() 는 ES2016에서 도입됨. 인자 하나를 받고 배열에 포함되어있다면 true를 반환함.
• sort() 함수의 오름차순, 내림차순 정렬, 비교 함수가 양수여야 두번째 인자가 앞으로 간다.

let a = [**33, 4**, 1111, 222];
a.sort(); // [1111, 222, 33, 4]; (알파벳 순)
a.sort((a,b) => a - b); //오름차순 정렬
// 33 - 4 가 양수이기 때문에 33이 4의 뒤로 갑니다.
// [4, 33, 1111, 222]
// 33 - 1111이 음수이기 때문에 그대로 있습니다.
// 1111 - 222가 양수이기 때문에 1111이 뒤로 갑니다.
// 그리하여 최종 정렬은 [4, 33, 222, 1111];

3. 배열을 문자열로 변환

• JSON.stringify(), join(), toString()