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 배열은 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

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" ]

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" ]

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

요약

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

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

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

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