JavaScript 배열: 생성, 접근 및 수정 방법

소개

이 랩에서는 JavaScript 의 가장 기본적인 데이터 구조 중 하나인 배열을 탐색합니다. 배열은 한 번에 여러 값을 저장할 수 있는 특별한 변수입니다. 배열은 항목, 숫자 또는 문자열 목록과 같이 순서가 지정된 데이터 컬렉션을 저장하는 데 사용됩니다.

다음 내용을 배우게 됩니다:

배열 생성하기.
배열 요소에 접근하고 수정하기.
일반적인 배열 메서드를 사용하여 요소 추가 및 제거하기.
배열을 반복하여 요소를 처리하기.

이 랩에서는 WebIDE 내에서 작업하게 됩니다. script.js 파일에 JavaScript 코드를 작성합니다. 코드 결과를 보려면 "Web 8080" 탭에서 액세스할 수 있는 브라우저의 개발자 콘솔을 사용합니다.

대괄호로 배열 리터럴 생성하기

이 단계에서는 JavaScript 배열을 만드는 가장 일반적인 방법인 배열 리터럴을 사용하는 방법을 배웁니다. 배열 리터럴은 대괄호 ([]) 로 둘러싸인 0 개 이상의 표현식 목록이며, 각 표현식은 배열 요소를 나타냅니다.

먼저 WebIDE 왼쪽의 파일 탐색기에서 script.js 파일을 찾습니다. 파일을 클릭하여 편집기에서 엽니다.

이제 script.js에 다음 코드를 추가하여 과일 배열을 만들고 콘솔에 기록합니다.

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S 사용 가능). 출력을 보려면 화면 상단의 "Web 8080" 탭으로 전환합니다. 브라우저의 개발자 콘솔을 열어야 할 수 있습니다 (일반적으로 F12를 누르거나 페이지에서 마우스 오른쪽 버튼을 클릭하고 "Inspect"를 선택한 다음 "Console" 탭으로 이동). 콘솔에 배열이 출력되는 것을 볼 수 있습니다.

["Apple", "Banana", "Cherry"];

JavaScript array literal in WebIDE console

인덱스로 배열 요소 접근하기

이 단계에서는 배열 내의 개별 요소에 접근하는 방법을 배웁니다. JavaScript 배열은 0 부터 시작하는 인덱스 (zero-indexed) 를 사용합니다. 즉, 첫 번째 요소는 인덱스 0에 있고, 두 번째 요소는 인덱스 1에 있습니다. 대괄호 안에 인덱스 번호를 참조하여 요소에 접근할 수 있습니다.

script.js 파일을 계속 편집해 보겠습니다. 기존 코드 아래에 다음 줄을 추가하여 fruits 배열의 첫 번째 요소에 접근하고 기록합니다.

// 첫 번째 요소 접근 (인덱스 0)
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);

// 세 번째 요소 접근 (인덱스 2)
console.log("The third fruit is:", fruits[2]);

script.js 파일을 저장하고 "Web 8080" 탭을 새로고침합니다. 개발자 콘솔을 확인합니다. 이전 단계의 출력 외에 새로운 출력이 표시됩니다.

The first fruit is: Apple
The third fruit is: Cherry

Developer console showing array access output

push 메서드로 요소 추가하기

이 단계에서는 기존 배열의 끝에 새 요소를 추가하는 방법을 배웁니다. 이를 수행하는 가장 쉬운 방법은 push() 메서드를 사용하는 것입니다. 이 메서드는 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

fruits 배열에 "Orange"를 추가하기 위해 script.js 파일 끝에 다음 코드를 추가합니다.

// 배열 끝에 새 요소 추가
fruits.push("Orange");

console.log("Array after push:", fruits);

파일을 저장하고 "Web 8080" 탭의 콘솔을 확인합니다. 이제 fruits 배열에 네 개의 요소가 포함된 것을 볼 수 있습니다.

Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]

Console output showing fruits array after push

pop 메서드로 마지막 요소 제거하기

이 단계에서는 pop() 메서드를 사용하여 배열에서 마지막 요소를 제거하는 방법을 배웁니다. 이 메서드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다. 이 작업은 배열의 길이를 변경합니다.

방금 추가한 마지막 요소를 제거하고 제거된 요소와 업데이트된 배열을 모두 기록하기 위해 script.js 파일 끝에 다음 코드를 추가합니다.

// 배열에서 마지막 요소 제거
const removedFruit = fruits.pop();

console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);

파일을 저장하고 "Web 8080" 탭의 콘솔 출력을 관찰합니다. "Orange"가 제거되었고 배열이 원래의 세 요소로 돌아간 것을 볼 수 있습니다.

Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]

Console output showing array after pop

for 루프로 배열 반복하기

이 단계에서는 배열의 모든 요소를 반복하는 방법을 배웁니다. 이를 수행하는 일반적인 방법은 for 루프를 사용하는 것입니다. 배열의 length 속성을 사용하여 루프가 몇 번 실행되어야 하는지 결정할 수 있습니다.

배열의 각 과일을 새 줄에 콘솔에 출력하기 위해 script.js 끝에 다음 for 루프를 추가합니다.

console.log("Iterating through the array with a for loop:");

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

루프는 i = 0으로 시작하며 i가 fruits 배열의 길이보다 작은 동안 계속됩니다. 각 반복에서 현재 인덱스 i의 요소를 출력합니다.

파일을 저장하고 "Web 8080" 탭의 콘솔을 확인합니다. 각 과일이 개별적으로 나열된 것을 볼 수 있습니다.

Iterating through the array with a for loop:
Apple
Banana
Cherry

Console output showing fruits iterated by for loop

요약

JavaScript 배열 실습을 완료하신 것을 축하드립니다!

이 실습에서는 JavaScript 에서 배열을 작업하는 데 필수적인 연산들을 배웠습니다. 다음을 연습했습니다:

리터럴 구문 []을 사용하여 배열 생성하기.
array[0]과 같이 0 기반 인덱스로 요소에 접근하기.
push() 메서드를 사용하여 배열 끝에 요소 추가하기.
pop() 메서드를 사용하여 배열에서 마지막 요소 제거하기.
for 루프와 length 속성을 사용하여 배열의 모든 요소를 반복하기.

배열은 JavaScript 프로그래밍의 초석입니다. forEach(), map(), filter()와 같이 코드를 더욱 간결하고 표현력 있게 만들 수 있는 더 강력한 메서드들이 많이 있습니다. 이 기본적인 데이터 구조를 숙달하기 위해 계속 연습하세요.