7.8 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.8 KiB Raw Permalink Blame History