JavaScript의 배열: 여러 값을 효율적으로 저장하기

Source: Dev.to

배열이란 무엇이며 왜 필요할까요?

배열은 특정 순서대로 값들의 모음을 저장하는 자료 구조입니다.

다음과 같이 변수를 여러 개 만들 필요 없이:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";
let fruit4 = "Orange";

하나의 배열에 저장할 수 있습니다:

let fruits = ["Apple", "Banana", "Mango", "Orange"];

배열 사용의 장점

• 관련된 여러 값을 한 곳에 저장
• 데이터를 관리하고 조직하기 쉬움
• 데이터를 순회(loop)하기 간편
• 코드가 더 깔끔하고 확장성 있게 작성됨

배열 만들기

배열은 대괄호 [] 를 사용해 생성합니다.

예시

let fruits = ["Apple", "Banana", "Mango"];

숫자를 이용한 또 다른 예시

let marks = [85, 90, 78, 92];

배열 안의 각 값을 요소(element) 라고 합니다.

인덱스를 이용한 요소 접근

배열의 각 요소는 인덱스(index) 라는 위치를 가지고 있습니다.
배열 인덱스는 0부터 시작하며, 1이 아닙니다.

let fruits = ["Apple", "Banana", "Mango"];

요소 접근

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

대괄호 안의 숫자는 JavaScript에게 어떤 위치의 값을 가져올지 알려줍니다.

요소 업데이트

배열 요소는 특정 인덱스에 새로운 값을 할당함으로써 업데이트할 수 있습니다.

let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits);

출력

["Apple", "Orange", "Mango"]

배열 length 속성

length 속성은 배열에 몇 개의 요소가 들어있는지 알려줍니다.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.length);

출력

4

length 속성은 반복문을 사용할 때도 유용합니다.

배열 기본 반복문

대부분 우리는 배열의 모든 요소를 처리하고 싶습니다. 가장 쉬운 방법은 for 루프를 사용하는 것입니다.

let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

출력

Apple
Banana
Mango

과제

질문

1. 좋아하는 영화 5편을 배열에 담아 보세요.
2. 배열의 첫 번째 요소와 마지막 요소를 출력하세요.
3. 배열의 한 값을 바꾸고, 업데이트된 배열을 출력하세요.
4. 배열을 순회하면서 모든 요소를 출력하세요.

답변

1. 영화 배열 만들기

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];

2. 첫 번째와 마지막 요소 출력

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
console.log(movies[0]);                 // 첫 번째 영화
console.log(movies[movies.length - 1]); // 마지막 영화

3. 한 값 변경하기

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
movies[2] = "Your Name";
console.log(movies);

4. 배열 순회하기

let movies = ["Inception", "Interstellar", "Spirited Away", "The Matrix", "Avengers"];
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

결론

배열은 JavaScript에서 데이터를 효율적으로 저장하고 관리할 수 있게 해 주는 필수 요소입니다. 배열을 만들고, 요소에 접근하고, 값을 업데이트하며, 순회하는 방법을 이해함으로써 실제 애플리케이션에서 큰 데이터 집합을 다루는 탄탄한 기반을 마련할 수 있습니다.