[TIL] 배열의 선언 방법 & 자주 쓰이는 5가지 메서드 (JavaScript)

배열이란?

• 여러 값이 연속으로 나열되어 저장된 공간으로, 연관성 있는 값들을 한 공간에 저장하기 위해 사용한다.
• 이러한 각각의 값을 엘리멘트(Element) 또는 요소라고 부른다.
• 배열에서는 인덱스(Index)라고 부르는 주소를 이용해 각각의 요소에 접근할 수 있다.

배열을 선언하는 방법

let myArray = [];                   // 변수 myArray를 선언하되, 대괄호를 적어 배열임을 정의
myArray = [19, 44, 'good', false];  // myArray 배열 안에 원하는 요소를 저장

console.log(myArray);               // [19, 44, 'good', false] 출력

---

요소(Element)에 접근하기 : 배열의 인덱스 값을 활용하여

let myArray = [19, 44, 'good', false];

let first = myArray[0];  // 0부터 시작하는 배열의 인덱스 값을 통해 배열의 요소에 각각 접근 가능
console.log(first);      // (배열의 0번째 인덱스 값인) 19 출력

// ※ 배열의 요소로 또 다른 배열을 갖는 경우
let myArray2 = [19, 44, 'good', [100, 200, 500], false];  // 인덱스 값이 3인 요소가 배열!

// Q. 배열 속의 배열에서 요소의 접근하려면?
console.log(myArray2[3][0]);  // 100 출력 (myArray2에서 3번째 요소인 배열의 0번째 요소)
console.log(myArray2[3][1]);  // 200 출력 (myArray2에서 3번째 요소인 배열의 1번째 요소)
console.log(myArray2[3][2]);  // 500 출력 (myArray2에서 3번째 요소인 배열의 2번째 요소)

요소(Element)를 수정하기 : 배열의 인덱스 값을 활용하여

// 요소에 접근한 뒤, 해당 요소에 새로운 값을 할당하여 배열 안의 요소를 수정 가능
let myArray[0] = 500;
let myArray[3] = true;

console.log(myArray);  // [500, 44, 'good', true]로 일부 요소 값이 수정되어 출력

---

요소(Element)를 추가하기 : 배열 맨 뒤에 요소를 추가하는 push() 메서드를 활용하여

myArray.push('kiwi');  // 'kiwi'라는 새로운 요소를 push() 명령으로 배열 맨 뒤에 추가
console.log(myArray);  // [500, 44, 'good', true, 'kiwi']로 기존 배열에 새로운 요소가 추가

cf. 배열 맨 앞에 요소를 추가하는 unshift() 메서드 :

Array.prototype.unshift() - JavaScript | MDN

요소(Element)를 삭제하기 ① : 배열 맨 뒤의 요소부터 삭제하는 pop() 메서드를 활용하여

myArray.pop();         // 'kiwi'라는 기존 배열의 마지막 요소를 pop() 명령으로 배열에서 제거
console.log(myArray);  // [500, 44, 'good', true]로 기존 배열의 맨 뒷 요소가 삭제

요소(Element)를 삭제하기 ② : 배열 맨 앞의 요소부터 삭제하는 shift() 메서드를 활용하여

myArray.shift();       // 500이라는 기존 배열의 첫 번째 요소를 shift() 명령으로 배열에서 제거
console.log(myArray);  // [44, 'good', true]로 기존 배열의 맨 앞 요소가 삭제

[주의] shift()/unshift() 메서드는 pop()/push() 메서드에 비해서 느리다?!

• 배열에 요소들이 들어있을 때, 맨 뒤에서 데이터를 넣고 빼는 것은 기존 데이터에 영향을 미치지 않기 때문에 빠른 기능을 수행할 수 있다.
• 반대로 앞에서부터 데이터를 넣으려고 한다면, 기존 요소들의 인덱스(Index)를 뒤로 이동시켜서 공간을 마련해 준 뒤에 처리해야 하므로 느린 기능을 수행한다고 할 수 있다.
  • 배열이 길어지고 복잡할수록 이러한 현상들을 더 크게 느끼기 때문에 가능하면 pop()/push() 메서드를 사용하는 것이 더 좋다.

---

배열의 길이 구하기 : length 속성을 활용하여

let myArray3 = [1, true, 3.14, 'string', {name: 'object'}, [1, 2, 3]];  // 배열 선언
console.log(myArray3.length);  // (요소의 데이터 타입과 상관 없이) 배열의 길이는 요소의 수인 6으로 출력