9. 객체와 배열-3

#3 배열의 생성과 활용

배열의 생성

배열은 다음과 같이 생성할 수 있습니다.

let arr = []; // 빈 배열 생성
let arr2 = [1, 2, 3]; // 숫자로 이루어진 배열 생성
let arr3 = ['apple', 'banana', 'orange']; // 문자열로 이루어진 배열 생성

배열의 활용

배열의 요소에 접근하기

배열의 요소에 접근할 때에는 인덱스를 이용합니다. 인덱스는 0부터 시작합니다.

let arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

배열의 길이

배열의 길이는 length 속성을 이용하여 알 수 있습니다.

let arr = [1, 2, 3];
console.log(arr.length); // 3

배열의 메서드

자바스크립트에서는 배열의 요소를 조작하기 위한 다양한 메서드를 제공합니다.

 

• push()

push() 메서드는 배열의 끝에 새로운 요소를 추가합니다.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

• pop()

pop() 메서드는 배열의 끝에서 요소를 제거합니다.

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

• shift()

shift() 메서드는 배열의 첫 번째 요소를 제거합니다.

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

• unshift()

unshift() 메서드는 배열의 첫 번째 자리에 요소를 추가합니다.

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

• splice()

splice() 메서드는 배열의 중간에 요소를 추가하거나 제거합니다.

let arr = [1, 2, 3];
arr.splice(1, 1, 4);
console.log(arr); // [1, 4, 3]

위 예제에서 splice(1, 1, 4)는 인덱스 1에서 1개의 요소를 제거한 후, 그 자리에 4를 추가합니다.

배열의 순회

배열의 모든 요소에 대해서 작업을 하기 위해서는 반복문을 사용합니다.

 

아래는 for문을 이용한 배열 순회 방법입니다.

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

배열의 각 요소에 대해 console.log()를 통해 출력합니다.

또 다른 방법으로는 forEach() 메서드를 이용하는 방법이 있습니다.

const arr = [1, 2, 3, 4, 5];

arr.forEach(function(element) {
  console.log(element);
});

 

배열의 각 요소에 대해 콜백 함수를 실행합니다.

 

마지막으로 for...of 루프를 이용하여 배열을 순회할 수 있습니다.

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element);
}

배열의 각 요소를 element라는 변수에 할당하여 출력합니다.