배열과 객체로 데이터 관리하기
[ 배열 – 여러 개의 데이터를 순서대로 ]
변수 하나에 값 하나만 저장하는 게 불편했던 적 있지? 배열을 사용하면 하나의 변수에 여러 개의 값을 순서대로 저장할 수 있어!
배열은 대괄호 []를 사용해서 만들고, 각 값은 쉼표로 구분해. 첫 번째 값의 인덱스는 0부터 시작한다는 걸 꼭 기억해!
▲ 순서가 있는 데이터 집합
▲ 인덱스는 0부터 시작
▲ 다양한 타입의 데이터 저장 가능
▲ 크기가 동적으로 변경 가능
[ 배열 메서드 – 배열을 다루는 도구들 ]
자바스크립트는 배열을 쉽게 다룰 수 있는 다양한 메서드(함수)를 제공해. 가장 많이 사용하는 것들을 알아보자!
push() – 끝에 추가pop() – 끝에서 제거unshift() – 앞에 추가shift() – 앞에서 제거length – 배열 길이indexOf() – 값의 위치 찾기
| 메서드 | 기능 | 원본 변경 | 반환값 |
|---|---|---|---|
push() |
끝에 추가 | O | 새 길이 |
pop() |
끝에서 제거 | O | 제거된 값 |
slice() |
일부 복사 | X | 새 배열 |
concat() |
배열 합치기 | X | 새 배열 |
[ 배열 순회와 고차 함수 ]
배열의 모든 요소를 처리하는 고차 함수들이 있어. 이것들을 사용하면 코드가 훨씬 간결해지고 읽기 쉬워져!
forEach() – 각 요소에 함수 실행map() – 변환된 새 배열 생성filter() – 조건에 맞는 요소만 선택find() – 조건에 맞는 첫 번째 요소reduce() – 하나의 값으로 축약
고차 함수의 장점:
– 코드가 더 읽기 쉬워짐
– 실수할 가능성이 줄어듦
– 함수형 프로그래밍 스타일
[ 객체 – 이름과 값의 쌍으로 데이터 관리 ]
객체는 관련된 정보를 하나로 묶어서 관리할 수 있는 자료구조야. 실제 세계의 사물을 코드로 표현할 때 정말 유용해!
{ 속성이름: 값, 속성이름2: 값2}▲ 중괄호 {} 사용
▲ 키(key)와 값(value)의 쌍
▲ 점(.) 또는 대괄호[]로 접근
객체 vs 배열:
– 배열: 순서가 중요할 때 (리스트)
– 객체: 이름으로 구분할 때 (정보 묶음)
[ 객체와 메서드 – 객체 안의 함수 ]
객체의 속성값으로 함수를 넣을 수도 있어! 이런 함수를 메서드라고 부르고, this 키워드로 객체 자신을 참조할 수 있어.
Object.keys() – 모든 키 배열Object.values() – 모든 값 배열Object.entries() – [키, 값] 배열hasOwnProperty() – 속성 존재 확인Object.assign() – 객체 복사/병합
[ 실전 프로젝트 – 할 일 관리 앱 ]
배열과 객체를 활용해서 간단한 할 일 관리 시스템을 만들어보자! 실무에서도 이런 방식으로 데이터를 관리해.
[ 다음 단계는? ]
축하해! 이제 데이터를 효율적으로 관리할 수 있는 배열과 객체를 마스터했어. 이 두 가지는 프로그래밍에서 정말 많이 사용되니까 꼭 연습을 많이 해봐!
배열과 객체 마스터 체크리스트:
✓ 배열 생성과 인덱스 접근
✓ 다양한 배열 메서드 활용
✓ 고차 함수로 데이터 처리
✓ 객체 생성과 속성 접근
✓ 배열과 객체 조합해서 사용하기
DOM 조작으로 웹페이지를 동적으로 변경하기! 진짜 인터랙티브한 웹 만들기의 시작이야