7.7 KiB

Raw Permalink Blame History

JavaScript 기초: 배열과 반복문

스케치노트 제공: Tomomi Imura

강의 전 퀴즈

이 강의에서는 웹에서 상호작용을 제공하는 언어인 JavaScript의 기초를 다룹니다. 이번 강의에서는 데이터를 조작하는 데 사용되는 배열과 반복문에 대해 배웁니다.

🎥 위 이미지를 클릭하면 배열과 반복문에 대한 동영상을 볼 수 있습니다.

이 강의를 Microsoft Learn에서 진행할 수 있습니다!

배열

데이터를 다루는 작업은 모든 프로그래밍 언어에서 흔히 하는 일이며, 데이터가 배열과 같은 구조적 형식으로 조직화되면 훨씬 더 쉽게 처리할 수 있습니다. 배열을 사용하면 데이터가 리스트와 유사한 구조로 저장됩니다. 배열의 주요 장점 중 하나는 하나의 배열에 서로 다른 유형의 데이터를 저장할 수 있다는 점입니다.

✅ 배열은 우리 주변 어디에나 있습니다! 태양광 패널 배열과 같은 실생활의 배열 예를 생각해볼 수 있나요?

배열의 문법은 대괄호 쌍으로 이루어져 있습니다.

let myArray = [];

이것은 빈 배열입니다. 하지만 배열은 이미 데이터로 채워진 상태로 선언될 수도 있습니다. 배열의 여러 값은 쉼표로 구분됩니다.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

배열 값은 인덱스라는 고유한 값이 할당됩니다. 인덱스는 배열의 시작점으로부터의 거리로 할당되는 정수입니다. 위 예제에서 문자열 값 "Chocolate"의 인덱스는 0이고, "Rocky Road"의 인덱스는 4입니다. 대괄호와 인덱스를 사용하여 배열 값을 검색, 변경 또는 삽입할 수 있습니다.

✅ 배열이 0 인덱스에서 시작한다는 것이 놀랍나요? 일부 프로그래밍 언어에서는 인덱스가 1에서 시작합니다. 이에 대한 흥미로운 역사를 Wikipedia에서 읽어볼 수 있습니다.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

인덱스를 활용하여 값을 변경할 수도 있습니다. 예를 들어:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

그리고 특정 인덱스에 새 값을 삽입할 수도 있습니다.

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ 배열에 값을 추가하는 더 일반적인 방법은 array.push()와 같은 배열 연산자를 사용하는 것입니다.

배열에 포함된 항목의 개수를 확인하려면 length 속성을 사용하세요.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ 직접 해보세요! 브라우저의 콘솔을 사용하여 자신만의 배열을 생성하고 조작해보세요.

반복문

반복문은 반복적이거나 반복적인 작업을 수행할 수 있게 해주며, 많은 시간과 코드를 절약할 수 있습니다. 각 반복은 변수, 값, 조건에 따라 다를 수 있습니다. JavaScript에는 다양한 유형의 반복문이 있으며, 각각 약간의 차이가 있지만 기본적으로 동일한 작업을 수행합니다: 데이터를 반복 처리합니다.

For 반복문

for 반복문은 반복을 위해 3가지 요소가 필요합니다:

counter 일반적으로 반복 횟수를 세는 숫자로 초기화되는 변수
condition 비교 연산자를 사용하여 false가 될 때 반복문을 멈추게 하는 표현식
iteration-expression 각 반복 끝에서 실행되며, 일반적으로 카운터 값을 변경하는 데 사용됨

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ 이 코드를 브라우저 콘솔에서 실행해보세요. 카운터, 조건, 반복 표현식을 약간 변경하면 어떤 일이 발생하나요? 반복문을 역방향으로 실행하여 카운트다운을 만들 수 있나요?

While 반복문

for 반복문의 문법과 달리, while 반복문은 조건만 필요하며, 조건이 false가 되면 반복문이 멈춥니다. 반복문의 조건은 일반적으로 카운터와 같은 다른 값에 의존하며, 반복문 동안 관리되어야 합니다. 카운터의 초기 값은 반복문 외부에서 생성되어야 하며, 조건을 충족하기 위한 모든 표현식(카운터 변경 포함)은 반복문 내부에서 유지되어야 합니다.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ 왜 for 반복문 대신 while 반복문을 선택할까요? StackOverflow에서 17K 명의 사람들이 같은 질문을 했으며, 일부 의견이 흥미로울 수 있습니다.

반복문과 배열

배열은 반복문과 자주 함께 사용됩니다. 대부분의 조건은 반복문을 멈추기 위해 배열의 길이를 필요로 하며, 인덱스는 카운터 값으로도 사용할 수 있습니다.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ 브라우저 콘솔에서 자신만의 배열을 생성하고 반복문을 사용해 실험해보세요.

🚀 도전

배열을 반복하는 방법은 for와 while 반복문 외에도 여러 가지가 있습니다. forEach, for-of, map과 같은 방법을 사용해 배열 반복문을 다시 작성해보세요.

강의 후 퀴즈

복습 및 자기 학습

JavaScript의 배열에는 데이터 조작에 매우 유용한 다양한 메서드가 포함되어 있습니다. 이 메서드들에 대해 읽어보고 자신만의 배열에서 push, pop, slice, splice와 같은 메서드를 사용해보세요.

과제

배열 반복하기

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 권위 있는 출처로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.

7.7 KiB Raw Permalink Blame History