이 랩에서는 학생들이 포괄적인 실습 학습 경험을 통해 필수적인 JavaScript 배열 조작 기술을 탐구합니다. 이 랩은 slice(), unshift(), shift()와 같은 주요 배열 메서드, 정렬 및 배열 변환을 다루며, 배열 데이터 구조를 관리하고 수정하는 데 필요한 실용적인 기술을 제공합니다.
참가자들은 slice()를 사용하여 배열 요소를 추출하고, unshift()를 사용하여 배열의 시작 부분에 요소를 추가하며, shift()를 사용하여 첫 번째 요소를 제거하고, 배열 정렬 및 반전을 수행하는 방법을 배우게 됩니다. 실용적인 코딩 예제를 통해 학습자들은 JavaScript 에서 배열을 효과적으로 조작하는 방법을 확실하게 이해하고 프로그래밍 능력과 문제 해결 능력을 향상시킬 수 있습니다.
이 단계에서는 JavaScript 에서 slice() 메서드를 사용하여 배열의 일부를 추출하는 방법을 배웁니다. slice() 메서드를 사용하면 원본 배열을 수정하지 않고 기존 배열에서 요소를 선택하여 새로운 배열을 만들 수 있습니다.
샘플 배열을 만들고 해당 요소들을 슬라이스하는 연습부터 시작해 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 array-slice.js라는 새 파일을 만듭니다.
// 과일 배열 생성
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
// 처음 세 개의 요소 슬라이스
const slicedFruits1 = fruits.slice(0, 3);
console.log("처음 세 개의 과일:", slicedFruits1);
// 인덱스 2 부터 끝까지 슬라이스
const slicedFruits2 = fruits.slice(2);
console.log("인덱스 2 부터의 과일:", slicedFruits2);
// 음수 인덱스를 사용하여 마지막 두 개의 요소 슬라이스
const slicedFruits3 = fruits.slice(-2);
console.log("마지막 두 개의 과일:", slicedFruits3);이제 스크립트를 실행하여 결과를 확인합니다.
node ~/project/array-slice.js예시 출력:
First three fruits: [ 'apple', 'banana', 'cherry' ]
Fruits from index 2: [ 'cherry', 'date', 'elderberry' ]
Last two fruits: [ 'date', 'elderberry' ]slice()에 대한 주요 사항:
이 단계에서는 JavaScript 에서 unshift() 메서드를 사용하여 하나 이상의 요소를 배열의 시작 부분에 추가하는 방법을 배웁니다. unshift() 메서드는 시작 부분에 요소를 삽입하여 원본 배열을 수정하고 배열의 새로운 길이를 반환합니다.
~/project 디렉토리에 array-unshift.js라는 새 파일을 만들고 다음 코드를 추가합니다.
// 초기 과일 배열 생성
let fruits = ["banana", "cherry", "date"];
console.log("원본 배열:", fruits);
// 배열의 시작 부분에 단일 요소 추가
fruits.unshift("apple");
console.log("하나의 요소 추가 후:", fruits);
// 배열의 시작 부분에 여러 요소 추가
fruits.unshift("grape", "kiwi");
console.log("여러 요소 추가 후:", fruits);
// 배열의 새로운 길이 저장
let newLength = fruits.unshift("orange");
console.log("새로운 배열 길이:", newLength);
console.log("최종 배열:", fruits);이제 스크립트를 실행하여 결과를 확인합니다.
node ~/project/array-unshift.js예시 출력:
Original array: [ 'banana', 'cherry', 'date' ]
After adding one element: [ 'apple', 'banana', 'cherry', 'date' ]
After adding multiple elements: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
New array length: 7
Final array: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]unshift()에 대한 주요 사항:
이 단계에서는 JavaScript 에서 shift() 메서드를 사용하여 배열에서 첫 번째 요소를 제거하는 방법을 배웁니다. shift() 메서드는 첫 번째 요소를 제거하여 원본 배열을 수정하고 제거된 해당 요소를 반환합니다.
~/project 디렉토리에 array-shift.js라는 새 파일을 만들고 다음 코드를 추가합니다.
// 프로그래밍 언어의 초기 배열 생성
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("원본 배열:", languages);
// 첫 번째 요소 제거 및 저장
let removedLanguage = languages.shift();
console.log("제거된 언어:", removedLanguage);
console.log("shift() 후 배열:", languages);
// shift() 를 여러 번 호출하여 여러 요소 제거
let secondRemovedLanguage = languages.shift();
console.log("두 번째 제거된 언어:", secondRemovedLanguage);
console.log("두 번째 shift() 후 배열:", languages);
// 빈 배열에서 발생하는 상황 시연
let emptyArray = [];
let result = emptyArray.shift();
console.log("빈 배열에서 shift() 실행:", result);
console.log("빈 배열은 그대로:", emptyArray);이제 스크립트를 실행하여 결과를 확인합니다.
node ~/project/array-shift.js예시 출력:
Original array: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
Removed language: JavaScript
Array after shift: [ 'Python', 'Java', 'C++', 'Ruby' ]
Second removed language: Python
Array after second shift: [ 'Java', 'C++', 'Ruby' ]
Shifting from an empty array: undefined
Empty array remains: []shift()에 대한 주요 사항:
undefined를 반환합니다.이 단계에서는 JavaScript 에서 sort() 및 reverse() 메서드를 사용하여 배열 요소를 조작하는 방법을 배웁니다. 이러한 메서드는 배열 내용을 구성하고 재정렬하는 간단한 방법을 제공합니다.
~/project 디렉토리에 array-sort-reverse.js라는 새 파일을 만들고 다음 코드를 추가합니다.
// 정렬 시연을 위한 배열 생성
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];
// 기본 정렬 (문자열의 경우 사전식, 숫자의 경우 오름차순)
console.log("원본 숫자:", numbers);
numbers.sort();
console.log("기본 정렬:", numbers);
// 숫자 정렬에는 비교 함수가 필요합니다.
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("숫자 정렬:", numbers);
// 역순 정렬
console.log("\n원본 과일:", fruits);
fruits.sort().reverse();
console.log("정렬 및 반전:", fruits);
// 정렬하지 않고 배열 반전
let colors = ["red", "green", "blue", "yellow"];
console.log("\n원본 색상:", colors);
colors.reverse();
console.log("반전된 색상:", colors);이제 스크립트를 실행하여 결과를 확인합니다.
node ~/project/array-sort-reverse.js예시 출력:
Original numbers: [ 5, 2, 9, 1, 7 ]
Default sort: [ 1, 2, 5, 7, 9 ]
Numeric sort: [ 1, 2, 5, 7, 9 ]
Original fruits: [ 'banana', 'apple', 'cherry', 'date' ]
Sorted and reversed: [ 'date', 'cherry', 'banana', 'apple' ]
Original colors: [ 'red', 'green', 'blue', 'yellow' ]
Reversed colors: [ 'yellow', 'blue', 'green', 'red' ]sort() 및 reverse()에 대한 주요 사항:
sort()는 원본 배열을 수정합니다.sort()는 요소를 문자열로 변환하고 사전식으로 정렬합니다.reverse()는 배열의 요소 순서를 반전시킵니다.이 단계에서는 JavaScript 에서 map(), filter(), reduce()와 같은 강력한 배열 메서드를 사용하여 배열 요소를 변환하고 분석하는 방법을 살펴봅니다. 이러한 메서드는 배열을 조작하고 배열에서 정보를 추출하는 우아한 방법을 제공합니다.
~/project 디렉토리에 array-transform.js라는 새 파일을 만들고 다음 코드를 추가합니다.
// 학생 점수의 샘플 배열
const scores = [85, 92, 78, 65, 90, 55, 88];
// map() 을 사용하여 수정된 값으로 새 배열 생성
const adjustedScores = scores.map((score) => score + 5);
console.log("원본 점수:", scores);
console.log("조정된 점수:", adjustedScores);
// filter() 를 사용하여 통과 점수 (70 점 이상) 의 배열 생성
const passingScores = scores.filter((score) => score >= 70);
console.log("통과 점수:", passingScores);
// reduce() 를 사용하여 총 점수 계산
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("총 점수:", totalScore);
console.log("평균 점수:", averageScore.toFixed(2));
// 메서드 결합: 통과 점수의 평균 찾기
const averagePassingScore =
passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("통과 점수 평균:", averagePassingScore.toFixed(2));
// 이름 배열 변환
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
(name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("원본 이름:", names);
console.log("대문자 이름:", capitalizedNames);이제 스크립트를 실행하여 결과를 확인합니다.
node ~/project/array-transform.js예시 출력:
Original scores: [ 85, 92, 78, 65, 90, 55, 88 ]
Adjusted scores: [ 90, 97, 83, 70, 95, 60, 93 ]
Passing scores: [ 85, 92, 78, 90, 88 ]
Total score: 553
Average score: 79.00
Average passing score: 86.60
Original names: [ 'alice', 'bob', 'charlie' ]
Capitalized names: [ 'Alice', 'Bob', 'Charlie' ]배열 변환 메서드에 대한 주요 사항:
map(): 각 요소를 변환하여 새 배열을 생성합니다.filter(): 테스트를 통과하는 요소로 새 배열을 생성합니다.reduce(): 콜백 함수를 통해 배열을 단일 값으로 줄입니다.이 랩에서는 참가자들이 내장 메서드를 사용하여 다양한 JavaScript 배열 조작 기술을 탐구했습니다. 이 랩은 slice() 메서드를 사용하여 배열 요소를 슬라이싱하는 방법을 배우는 데 중점을 두었습니다. 이 메서드를 사용하면 원본 배열을 수정하지 않고 배열의 특정 부분을 추출할 수 있습니다. 참가자들은 양수 및 음수 인덱스를 포함한 다양한 인덱스 범위를 사용하여 요소를 선택하여 새 배열을 만드는 연습을 했습니다.
또한 이 랩에서는 배열의 시작 부분에 요소를 추가하는 unshift() 메서드, 첫 번째 요소를 제거하는 shift() 메서드, 그리고 배열 요소 정렬 및 반전 기술을 소개했습니다. 실습 코딩 연습을 통해 학습자들은 배열을 변환하고 분석하는 실질적인 경험을 얻었으며, 이러한 메서드가 JavaScript 에서 배열 구조에서 데이터를 효율적으로 수정하고 추출하는 방법을 이해했습니다.
