JavaScript - 배열(1)

🔎1. 배열 이란

배열 - 배열은 객체의 일종이며 여러 값들이 순서를 갖고 나열되어 있는 집합. 즉 , 순서가 있는 컬렉션을 저장할 때 사용하는 자료구조 입니다.

✅ 2. 배열 선언

배열 선언은 아래 두가지 방식이 있습니다.

let arr = new Array();
let arr = [];

length를 사용하면 배열에 담긴 요소가 몇개인지 알 수 있습니다.

let animals = ['사자','독수리','곰']
console.log(animals.length) // 3

배열 요소의 자료형엔 제약이 없습니다.

let arr = ['사과', { name: '보라'}, true, function(), {alert('hello world')} ];
// index 1인 요소(객체) 의 name 프로퍼티 출력
console.log( arr[1].name); //보라
// index 3인 요소(함수) 실행
arr[3](); // 'hello world'

✅ 3. 배열의 메서드

배열의 요소 추가 및 제거 메서드
push, pop, unshift, shift

1. push - 맨 끝에 요소를 추가합니다.

let array = [1,2,3];
array.push(4);
console.log(array) // [1,2,3,4]
// 데큐처럼 사용가능
let numArray = [4,5];
array.push(...numArray);

2. pop - 배열 끝 요소를 제거하고, 제거한 요소를 반환합니다.

let array = [1,2,3]
array.pop();
console.log(array) // [1,2]

3. unshift - 배열 앞 요소를 추가합니다.

let array = [1,2,3]
array.unshift(4);
console.log(array) // [4,1,2,3]
// 데큐처럼 사용가능
let numArray = [4,5];
array.unshift(...numArray);

4. shift - 배열 앞 요소를 제거하고, 요소를 반환합니다.

let array= [1,2,3]
array.shift();
console.log(array) // [2,3]

✅ 4. 배열의 내부 동작 원리

배열은 객체의 종류중 하나입니다. 배열 arr의 요소를 arr[0]처럼 접근하는 방식은 객체 문법에서 왔습니다. 다만 배열은 Key가 숫자라는 점이 다릅니다.

1. 배열은 객체와 마찬가지로 참조를 통해 복사됩니다.

let animals = ['호랑이']
let arr = animals; // 참조를 복사(두 변수가 같은 객체를 참조)
console.log(animals === arr) // true
arr.push('독수리') // 참조를 이용해 배열을 수정
console.log(animals); // '호랑이','독수리'  - 요소가 두 개가 되었습니다.

2. 배열 관련 연산 최적화(feat. javascript엔진)

let fruits = [];  //  빈 배열 생성
fruits[99999] = 5; // 배열의 길이보다 훨 씬 큰 숫자를 이용해 프로퍼티 생성
fruits.age = 25; // 임의의 이름을 사용해 프로퍼티 생성

• 배열은 객체이므로 위예시처럼 프로퍼티를 추가해도 문제가 발생하지 않습니다 하지만, 자바스크립트 엔진이 배열을 일반 객체러럼 다루게 되면 배열을 다출 때만 적용되는 최적화 기법이 동작하지 않아 배열 특유의 이점이 사라집니다.
• 잘못된 예시
  • arr.test =5 // 같이 숫자가 아닌 값을 프로퍼티 키로 사용한 경우
  • arr[0]과 arr[1000] 만 추가하고 그사이에 아무런 요소도 없는 경우
  • arr[1000], arr[999] 같이 요소를 역순으로 채우는 경우

✅ 4. 성능

1. push와 pop은 빠르지만 shift와 unshift는 느립니다.

• shift, unshift 연산은 3가지 동작을 모두 수행해야 이뤄집니다.
  ㅇ 인덱스가 0인 요소를 제거
  ㅇ 모든 요소를 왼족으로 이동 , 이때 인덱스는 1은 0 , 2는 1로 변환
  ㅇ lenght 프로퍼티 값을 갱신
• 배열에 요소가 많으면 요소가 이동하는데 걸리는 시간이 길고 메모리 관련 연산도 많아집니다.
• push와 pop 메서드들은 마지막 요소만 조작하기 때문에 length 프로퍼티 값을 줄여주기만 하면 됩니다. (메서드의 실행 속도가 빠른 이유)

2. 반복문 (for, for..of, for..in)

• for문은 배열을 순회할 때 쓰는 가장 오래된 방법입니다. 순회시 index를 사용합니다.

let arr = [1,2,3,4]
for(let i=0; i<arr.length;i++){
  console.log(arr[i]);
}

• for..of를 사용하여 배열을 순회가 가능합니다.
  for..of를 사용하면 현재 요소의 인덱스는 얻을수 없고 값만 얻을수 있습니다.

let arrs = [1,2,3,4]
for (let arr of arrs){
  console.log(arr);
}

• for..in를 사용한 배열순회
  배열은 객체형에 속하므로 for..in을 사용하는것은 가능하지만 하지만 for..in 반복문 특징은 모든 프로퍼티를 대상으로 순회합니다. Key가 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다.
  for..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에서는 권장하지 않습니다. for..in반복문의 속도가 대체로 빠른편이라 병목 지점에서만 문제가 되긴 하지만 for..in반복문을 사용할 땐 이런 차이를 알고 적절한 곳에 사용하시길 바랍니다.(배열엔 되도록 사용 X)
  Tip. 유사배열 객체(arra-like)는 배열처럼 length프로퍼티도 있고, 요소마다 인덱스도 있습니다 배열과 차이점은 Key가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있습니다.유사배열 객체와 for..in을 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다.

✅ 5. length 프로퍼티와 주의점

length 프로퍼티는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값입니다.

• 배열에 요소가 하나 있고, 이 요소의 인덱스가 아주 큰 정수라면 배열의 length 프로퍼티도 아주 커집니다.

let fruits = [];
fruits[1234] = '사과';
console.log(fruits.length); //1235

• 주의점 : 자동의로 갱신되는 length 프로퍼티를 수동으로 조작할경우 증가시키는건 아무 변화가 없지만 감소 시키면 배열이 잘립니다.

let arr = [1,2,3,4,5]
arr.length =2; //요소 2개만 남기고 잘라봅니다.
console.log(arr); [1,2]
arr.length =5; // 다시 원래 length로 되돌려보지만..
console.log(arr[3]) // undefined: 이미 삭제된 요소들은 복구가 되지 않습니다.

✅ 6. new Array()

new Array() 문법을 사용해도 배열을 만들 수 있지만 대괄호 []를 사용하면 더 짧은 문법으로 배열을 만들 수 있기 때문에 new Array()를 잘 사용하지 않는 편입니다. (feat. 까다로운 기능)

숫자형 인수 하나를 넣어서 new Array를 호출하면 배열의 만들어 지는데, 이 배열엔 요소가 없는 반면 길이는 인수와 같아집니다.

let arr = new Array(2); 
console.log(arr[0]); // undefined, 요소가 하나도 없는 배열
console.log(arr.length) // 길이는 2

🙏 마치며

배열에 대해서는 다른언어들을 통해 다뤄봤었기 때문에 쉽게생각하고 간과했지만 생각보다 성능적인 측면에서 몰랐던 지식을 공부하게 되었습니다.
또 length가 배열의 갯수를 나타내는 프로퍼티로 알고있었는데... 충격😨 역시 하나를 보더라도 제대로 봐야한다는 생각을 하게 되었습니다.

자료출처
https://ko.javascript.info/array - 모던 자바스크립트 튜토리얼 Site