이 랩에서는 학생들이 JavaScript 에서 배열을 생성하고 조작하는 기본적인 개념을 탐구합니다. 이 랩은 배열 초기화, 배열 요소 접근, 실용적인 코딩 연습을 통한 기본적인 배열 연산 수행에 대한 포괄적인 소개를 제공합니다. 참가자들은 대괄호 표기법과 Array 생성자를 포함한 다양한 방법을 사용하여 배열을 생성하는 방법을 배우고, 다양한 데이터 유형을 포함하는 배열을 사용하는 방법을 이해하게 됩니다.
이 랩은 숫자, 문자열 및 혼합된 요소를 사용하여 배열을 정의하고, 인덱스를 사용하여 개별 배열 요소에 접근하며, 기본적인 배열 조작 기술을 시연하는 것과 같은 핵심 기술을 다룹니다. 실습 예제를 통해 학습자들은 JavaScript 프로그래밍에서 필수적인 데이터 구조인 배열을 생성, 접근 및 상호 작용하는 실질적인 경험을 얻게 됩니다.
이 단계에서는 JavaScript 에서 배열에 대해 배우게 됩니다. 배열은 단일 변수에 여러 값을 저장하는 데 사용되는 기본적인 데이터 구조입니다. 배열을 사용하면 관련 데이터를 효율적으로 수집하고 구성할 수 있습니다.
JavaScript 에서 간단한 배열을 생성하는 것으로 시작해 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 arrays.js라는 새 파일을 생성합니다.
// 숫자의 배열 생성
let numbers = [1, 2, 3, 4, 5];
// 문자열의 배열 생성
let fruits = ["apple", "banana", "orange"];
// 빈 배열 생성
let emptyArray = [];
// 혼합된 데이터 유형의 배열 생성
let mixedArray = [42, "hello", true, null];
console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);이 코드를 실행하면 다음과 같은 예제 출력을 볼 수 있습니다.
Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]배열 초기화에 대한 주요 사항:
[]를 사용하여 생성됩니다.Array 생성자를 사용하여 배열을 생성할 수도 있습니다.
// Array 생성자 사용
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);이 단계에서는 인덱스를 사용하여 배열의 개별 요소에 접근하는 방법을 배우게 됩니다. JavaScript 에서 배열 인덱스는 0 부터 시작합니다. 즉, 첫 번째 요소는 인덱스 0 에 있고, 두 번째 요소는 인덱스 1 에 있는 식입니다.
~/project 디렉토리에서 arrays.js 파일을 열고 다음 코드를 추가합니다.
// 색상 배열 생성
let colors = ["red", "green", "blue", "yellow", "purple"];
// 인덱스로 배열 요소에 접근
console.log("First color:", colors[0]); // 첫 번째 요소
console.log("Third color:", colors[2]); // 세 번째 요소
console.log("Last color:", colors[colors.length - 1]); // 마지막 요소
// 배열 요소 수정
colors[1] = "orange"; // 두 번째 요소 변경
console.log("Modified colors array:", colors);
// 인덱스 범위 시연
console.log("Array length:", colors.length);이 코드를 실행하면 다음과 같은 예제 출력을 볼 수 있습니다.
First color: red
Third color: blue
Last color: purple
Modified colors array: ['red', 'orange', 'blue', 'yellow', 'purple']
Array length: 5배열 인덱싱에 대한 주요 사항:
[]를 사용하여 요소에 접근합니다.array.length는 총 요소 수를 제공합니다.array[array.length - 1]을 사용합니다.배열 범위를 벗어난 요소에 접근하여 어떤 일이 발생하는지 확인해 보세요.
console.log("Accessing out-of-range index:", colors[10]); // undefined 반환이 단계에서는 과일 배열을 생성하고 이를 사용하는 방법을 배우게 됩니다. ~/project 디렉토리에서 arrays.js 파일을 열고 다음 코드를 추가합니다.
// 과일 배열 생성
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];
// 전체 과일 배열 표시
console.log("Fruits array:", fruits);
// 배열 끝에 새 과일 추가
fruits.push("grape");
console.log("Fruits after adding grape:", fruits);
// 서로 다른 유형의 과일로 배열 생성
let tropicalFruits = ["pineapple", "coconut", "papaya"];
// 두 과일 배열 결합
let allFruits = fruits.concat(tropicalFruits);
console.log("All fruits:", allFruits);
// 과일 수 확인
console.log("Total number of fruits:", allFruits.length);이 코드를 실행하면 다음과 같은 예제 출력을 볼 수 있습니다.
Fruits array: ['apple', 'banana', 'orange', 'mango', 'strawberry']
Fruits after adding grape: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape']
All fruits: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Total number of fruits: 9과일 배열 생성 및 조작에 대한 주요 사항:
push()를 사용하여 새 요소를 추가할 수 있습니다.concat()을 사용하여 배열을 결합할 수 있습니다.length 속성은 총 요소 수를 보여줍니다.이 단계에서는 HTML 과 JavaScript 를 사용하여 웹 페이지에 배열 요소를 표시하는 방법을 배우게 됩니다. 먼저, ~/project 디렉토리에 fruits.html이라는 HTML 파일을 생성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fruits Array Display</title>
<style>
body {
font-family: Arial, sans-serif;
}
#fruits-list {
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>My Fruits Collection</h1>
<div id="fruits-list"></div>
<script>
// 과일 배열 생성
let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];
// 과일 목록 컨테이너 가져오기
let fruitsList = document.getElementById("fruits-list");
// 과일을 표시하기 위한 순서 없는 목록 생성
let ul = document.createElement("ul");
// 과일 배열을 반복하고 목록 항목 생성
fruits.forEach(function (fruit) {
let li = document.createElement("li");
li.textContent = fruit;
ul.appendChild(li);
});
// 페이지에 목록 추가
fruitsList.appendChild(ul);
</script>
</body>
</html>이 예제는 몇 가지 주요 개념을 보여줍니다.
forEach()를 사용하여 배열 요소 반복웹 브라우저에서 이 HTML 파일을 열면 페이지에 과일 목록이 표시됩니다.
innerHTML을 사용하는 대체 방법:
// 과일을 표시하는 대체 방법
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");이 단계에서는 JavaScript 에서 일반적인 배열 연산에 대해 배우게 됩니다. ~/project 디렉토리에서 arrays.js 파일을 열고 다음 코드를 추가합니다.
// 숫자 배열 생성
let numbers = [5, 2, 8, 1, 9, 3];
// 요소 추가
numbers.push(10); // 배열 끝에 요소 추가
numbers.unshift(0); // 배열 시작에 요소 추가
console.log("After adding elements:", numbers);
// 요소 제거
let lastNumber = numbers.pop(); // 마지막 요소 제거
let firstNumber = numbers.shift(); // 첫 번째 요소 제거
console.log("After removing elements:", numbers);
// 배열 정렬
numbers.sort((a, b) => a - b); // 오름차순 정렬
console.log("Sorted array:", numbers);
// 배열 반전
numbers.reverse();
console.log("Reversed array:", numbers);
// 요소 찾기
let index = numbers.indexOf(8);
console.log("Index of 8:", index);
// 배열 슬라이싱
let slicedNumbers = numbers.slice(1, 4);
console.log("Sliced array:", slicedNumbers);
// 배열 필터링
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Even numbers:", evenNumbers);
// 배열 매핑
let squaredNumbers = numbers.map((num) => num * num);
console.log("Squared numbers:", squaredNumbers);이 코드를 실행하면 다음과 같은 예제 출력을 볼 수 있습니다.
After adding elements: [0, 5, 2, 8, 1, 9, 3, 10]
After removing elements: [5, 2, 8, 1, 9, 3, 10]
Sorted array: [1, 2, 3, 5, 8, 9, 10]
Reversed array: [10, 9, 8, 5, 3, 2, 1]
Index of 8: 2
Sliced array: [9, 8, 5]
Even numbers: [10, 8, 2]
Squared numbers: [100, 81, 64, 25, 9, 4, 1]시연된 주요 배열 연산:
push() 및 unshift()를 사용하여 요소 추가pop() 및 shift()를 사용하여 요소 제거sort()를 사용하여 요소 정렬reverse()를 사용하여 배열 순서 뒤집기indexOf()를 사용하여 요소 위치 찾기slice()를 사용하여 배열의 일부 추출filter()를 사용하여 특정 요소로 새 배열 생성map()을 사용하여 배열 요소 변환이 랩에서는 참가자들이 JavaScript 에서 배열을 사용하는 기본 사항을 탐구하여 배열 데이터 구조를 생성, 초기화 및 조작하는 방법을 배웠습니다. 이 랩에서는 대괄호와 Array 생성자를 사용하여 배열을 정의하는 것과 같은 주요 개념을 다루었으며, 숫자, 문자열 및 혼합 데이터 유형을 포함한 다양한 유형의 요소로 배열을 생성하는 기능을 시연했습니다.
참가자들은 인덱싱을 통해 배열 요소에 접근하는 실질적인 기술을 습득했으며, 배열 인덱스가 0 부터 시작한다는 것을 이해하고 기본적인 배열 연산을 수행하는 방법을 배웠습니다. 실습 방식을 통해 학습자들은 배열을 생성하고, 내용을 로깅하며, 데이터를 효율적으로 저장하고 구성하는 데 있어 JavaScript 배열의 유연성을 탐구하는 연습을 할 수 있었습니다.
