자바스크립트 배열: 초보자 가이드

안녕하세요, 미래의 자바스크립트 마법사 여러분! 자바스크립트 배열의 세계로의 흥미로운 여정을 안내해드리게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저로서는 배열이 코딩의 스위스 아미 Knife와도 같다 말씀드릴 수 있습니다 - 매우 다재다능하며 필수적입니다. 그럼 시작해보겠습니다!

JavaScript - Arrays

배열이란?

자세한 내용에 들어가기 전에 기본적인 내용부터 알아보겠습니다. 파티를 계획하고 손님 명단을 작성해야 한다고 가정해봅시다. 각 이름을 별도의 종이에 적는 대신, 모든 이름을 한 장에 적을 수 있다면 어떨까요? 자바스크립트에서 배열은 그 장 종이와 같은 것입니다 - 여러 항목을 담을 수 있는 단일 객체입니다.

정의

배열은 동시에 여러 값을 담을 수 있는 특별한 변수입니다. 다양한 데이터 유형(숫자, 문자열, 다른 배열 등)을 저장할 수 있는 컨테이너입니다.

문법

자바스크립트에서 배열을 만드는 것은 손님 명단을 작성하는 것과 마찬가지로 간단합니다. 다음과 같이 합니다:

let myArray = [item1, item2, item3, ...];

예를 들어:

let fruits = ["apple", "banana", "orange"];

이 경우, fruits라는 이름의 배열을 만들어 세 개의 문자열을 담고 있습니다. 간단하죠?

배열 인덱스

자바스크립트에서 배열 요소는 0부터 번호가 매겨집니다. 저는 이를 "제로 번째" 요소라고 생각합니다. 따라서, fruits 배열에서:

fruits[0]는 "apple"
fruits[1]는 "banana"
fruits[2]는 "orange"

매개변수

배열을 생성할 때, 임의의 수의 매개변수를 전달할 수 있습니다. 이 매개변수는 배열의 요소가 됩니다. 몇 가지 예를 보겠습니다:

let emptyArray = [];  // 빈 배열
let numbers = [1, 2, 3, 4, 5];  // 숫자 배열
let mixedArray = [1, "two", true, null];  // 혼합 데이터 유형의 배열

배열은 매우 유연하다는 것을 알 수 있습니다! 어떤 데이터 유형도 담을 수 있으며, 동일한 배열 내에서 다른 유형을 혼합할 수도 있습니다.

반환 값

배열을 생성할 때, 배열 객체 자체를 반환합니다. 이는 즉시 배열을 사용하거나 변수에 대입할 수 있음을 의미합니다. 예를 들어:

let myArray = [1, 2, 3];
console.log(myArray);  // 출력: [1, 2, 3]

자바스크립트 배열 참조

자바스크립트의 배열은 다양한 내장 메서드를 제공하여 사용을 용이하게 합니다. 다음은 일부 흔히 사용되는 배열 메서드 표입니다:

메서드	설명
push()	배열의 끝에 하나 이상의 요소를 추가
pop()	배열의 마지막 요소를 제거
shift()	배열의 첫 번째 요소를 제거
unshift()	배열의 시작 부분에 하나 이상의 요소를 추가
indexOf()	주어진 요소가 처음 발견되는 인덱스를 반환
slice()	배열의 일부를 복사하여 새로운 배열을 반환
splice()	배열의 내용을 변경하거나 새로운 요소를 추가하거나 기존 요소를 대체

이 메서드들이 압도적이다면 걱정하지 마세요 - 곧 사용해보겠습니다!

자바스크립트 배열 객체의 기본 예제

이제 손을 다물고 몇 가지 실제 예제에 들어보겠습니다. 저는 항상 실습을 통해 배우는 것이 가장 좋다고 생각합니다. 그럼 코드를 작성해보겠습니다!

배열 생성 및 접근

let colors = ["red", "green", "blue"];
console.log(colors[0]);  // 출력: "red"
console.log(colors[2]);  // 출력: "blue"
console.log(colors.length);  // 출력: 3

이 예제에서, 우리는 색상 배열을 생성하고 각 요소를 인덱스를 사용하여 접근합니다. 또한 length 속성을 사용하여 배열의 항목 수를 확인합니다.

배열 수정

배열은 가변적이므로 생성된 후에도 변경할 수 있습니다. 어떻게 하지요:

let fruits = ["apple", "banana"];
fruits[1] = "cherry";  // "banana"를 "cherry"로 변경
console.log(fruits);  // 출력: ["apple", "cherry"]

fruits.push("mango");  // 끝에 "mango" 추가
console.log(fruits);  // 출력: ["apple", "cherry", "mango"]

fruits.pop();  // 마지막 항목 제거
console.log(fruits);  // 출력: ["apple", "cherry"]

배열 반복

배열을 반복하는 것은 매우 흔한 작업입니다. for 루프를 사용한 예제를 보겠습니다:

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}

이는 배열의 각 숫자를 새로운 줄에 출력합니다.

객체 배열

배열은 객체와 같은 복잡한 데이터 유형을 담을 수도 있습니다. 이는 구조화된 데이터를 저장하는 데 매우 유용합니다:

let students = [
{name: "Alice", age: 22},
{name: "Bob", age: 24},
{name: "Charlie", age: 23}
];

console.log(students[1].name);  // 출력: "Bob"

이 예제에서, 우리는 학생 객체 배열을 만들어 각 객체의 이름과 나이 속성을 저장합니다.

결론

와우! 오늘 많은 내용을 다루었습니다. 배열은 자바스크립트의 기본 개념이며, 이를 마스터하면 훨씬 더 효과적인 프로그래머가 될 수 있습니다. 연습이 완벽을 이루는 열쇠라는 점을 기억하세요. 따라서 이 개념들을 실험해보지 마세요.

마무리하면서, 한 학생이 말한 것을 떠올립니다. "배열에 대해 배우는 것은 저추기와도 같다 -처음에는 모든 것을 따라잡기 어려울 수 있지만, 연습을 하면 자연스럽게 되는 법입니다." 따라서 계속 연습하고, 곧 프로처럼 배열을 다루게 될 것입니다!

모두들 즐겁게 코딩하세요!

Credits: Image by storyset