JavaScript · 01 값과 상태
단계: 값과 계산 · 편집 가능한 예제 · 저장 ID: javascript-01
목표와 학습 후 역량
- 미완료 제목 2개를 추출한다.
- 참조 동등성과 원본 값 비교 2쌍을 남긴다.
선수 지식
HTML 요소와 이벤트
핵심 개념과 설명
참조 공유
객체를 대입하면 같은 객체를 가리키는 값이 복사됩니다. 얕은 복사에서는 중첩 객체를 계속 공유합니다.
파생 목록
filter와 map은 새 배열을 반환합니다. 콜백에서 내부 객체를 수정하면 원본도 바뀔 수 있습니다.
실습 준비
Frontory의 기존 미리보기는 제한된 시작 예제이며 전체 과제의 완성본이 아닙니다. 추가 파일과 기능은 별도 로컬 프로젝트에서 직접 구현하세요. 별도 폴더의 index.html에서 script type="module"로 실습 JS를 연결하고 로컬 HTTP 서버로 여세요. 콘솔·Network·Elements를 사용합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- state.js 파일에 완료 1개와 미완료 2개인 중첩 객체 배열 조건을 준비하세요.
- filter/map으로 미완료 제목을 구하고 직접 수정과 새 객체 교체를 console.assert로 비교하세요.
- 완료 1개와 미완료 2개인 중첩 객체 배열 조건으로 실행하세요. 확인할 결과: 미완료 제목 2개를 추출한다. 참조 동등성과 원본 값 비교 2쌍을 남긴다. 예상과 실제 결과는 구분해 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 복사 깊이 | 배열만 spread | 중첩 객체도 spread | 실행 전 가설: 중첩 값을 바꿔도 원본은 보존될 것이다. 다른 조건은 고정하고 실행 후 실제 결과를 따로 기록합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 미완료 제목 2개를 추출한다.
- 참조 동등성과 원본 값 비교 2쌍을 남긴다.
자가 점검
- 새 배열이면 내부 객체도 새 객체인가요?
- 파생 목록을 따로 저장하면 어떤 동기화가 필요한가요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.