JavaScript에서 배열과 객체 탐색

6일 차: JavaScript의 배열 및 객체 탐색

날짜: 2024년 12월 13일

JavaScript 여정 6일차에 오신 것을 환영합니다! 오늘은 JavaScript의 두 가지 필수 데이터 구조인 배열과 객체에 대해 알아봅니다. 이러한 구조는 현대 웹 개발에서 데이터 조작의 중추를 형성합니다. 배열과 개체를 마스터하면 데이터를 효율적으로 저장, 액세스 및 변환하는 강력한 방법을 얻을 수 있습니다.

---

1. 배열이란 무엇입니까?

배열은 연속적인 메모리 위치에 저장된 항목(요소라고 함)의 모음입니다. JavaScript에서 배열은 다목적이며 혼합된 데이터 유형을 보유할 수 있습니다.

배열 생성

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

2. 배열 조작

요소 추가 및 제거

• push: 끝에 요소를 추가합니다.
• pop: 마지막 요소를 제거합니다.
• unshift: 시작 부분에 요소를 추가합니다.
• shift: 첫 번째 요소를 제거합니다.

예:

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

---

3. 일반적인 배열 방법

map: 배열의 각 요소를 변환합니다.

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

필터: 조건에 따라 요소를 필터링합니다.

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

reduce: 배열을 단일 값으로 줄입니다.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

---

4. 객체란 무엇인가요?

객체는 속성 모음이며, 각 속성은 키-값 쌍입니다. 객체는 속성이 있는 실제 엔터티를 표현하는 데 적합합니다.

객체 생성

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

---

5. 객체 조작

속성 추가 및 업데이트

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

속성 제거

delete car.model;
console.log(car); // Output: { brand: "Ford" }

---

6. 공통 객체 메소드

객체 반복

• Object.keys: 키 배열을 반환합니다.
• Object.values: 값 배열을 반환합니다.
• Object.entries: 키-값 쌍의 배열을 반환합니다.

예:

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

---

7. 배열과 객체

기능 배열 객체

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

저장 주문된 항목 모음 키-값 쌍의 순서 없는 컬렉션입니다.

---

액세스

인덱스 기반(arr[0]). 키 기반(obj.key). 최상의 사용 사례 관련 항목 목록 엔티티의 그룹화 속성.

8. 실제 사례

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

예 1: 배열을 사용한 할 일 목록

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

예시 2: 객체를 이용한 사람 표현

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

---

예 3: 배열과 객체 결합

• 9. 주요 시사점
• 배열
: 주문된 컬렉션에 사용합니다. 강력한 변환을 위해 맵, 필터, 축소와 같은 방법을 활용하세요.
• 객체
: 키-값 쌍이 있는 구조화된 데이터에 사용합니다. Object.keys 및 Object.values와 같은 마스터 메소드.

---

결합된 힘: 배열과 객체를 혼합하여 복잡한 데이터를 모델링하고 조작합니다.

6일차 연습
좋아하는 영화 배열을 만들고 동적으로 항목을 추가/제거하세요.

---

제목, 저자, 연도 등의 속성이 포함된 책을 나타내는 개체를 만듭니다. 책 세부정보를 기록하는 메서드를 추가합니다.

숫자 배열에 맵과 필터를 사용하여 짝수의 제곱을 구하세요.

다음 단계

7일차에서는 이벤트와 DOM에 초점을 맞춰 웹 애플리케이션에 상호작용성을 구현합니다. 내일 만나요!

위 내용은 JavaScript에서 배열과 객체 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!