Day 6 - ModernJS

이 글은 2026년 3월 10일 기준 작성된 글이다.

오늘은 모던 스크립트의 핵심 개념인 DOM 조작, 변수 선언, 배열/객체, 삼항연산자, 구조분해할당, Array Functions에 대해 정리했습니다.
웹 페이지 요소를 조작하고, 자바스크립트 기본 문법과 배열 메서드를 이해하는 것이 목표입니다.

---

1. DOM (Document Object Model)

DOM은 문서 객체 모델로, HTML이나 XML 문서의 구조와 요소를 객체 형태로 표현한 인터페이스입니다.
자바스크립트는 DOM을 통해 문서의 요소를 조회, 수정, 추가할 수 있습니다.

예시: 경고창 띄우기

alert("Hello World!");

예시: div 색 변경하기

var divs = document.getElementsByTagName('div');

function changeColors() {
    divs[0].style.backgroundColor = 'red';
    divs[1].style.backgroundColor = 'blue';
}

---

2. 변수 선언: let vs const

console.clear();

//* LET *//
let age1 = 20;
console.log('age1 : ' + age1); > age1 : 20 출력
age1 = 30; // 변경 가능.
console.log('age1 : ' + age1); > age1 : 30 출력

//* CONST *//
const age2 = 20;
console.log('age2 : ' + age2); > age2 : 20 출력
// age2 = 30; // 변경할 수 없음.
console.log('age2 : ' + age2); > age2 : 20 출력

• let: 재할당 가능
• const: 재할당 불가 (상수)

---

3. 자바스크립트 핵심 개념

• 배열과 객체: 데이터를 구조화하고 관리
• 객체 생성 방법: 리터럴, 생성자, 클래스 등
• 삼항연산자: 조건부 값 선택
• Falsy 값: false, 0, "", null, undefined, NaN
• 구조분해할당: 배열/객체에서 변수 추출

---

3-1. Array Functions

자바스크립트 배열에서 자주 사용하는 메서드와 개념입니다.

메서드	설명
join	배열 요소를 문자열로 합침,[1,2,3].join('-') → '1-2-3'
slice	배열 일부 추출 (원본 유지), [1,2,3].slice(0,2) → [1,2]
indexOf	값의 첫 번째 인덱스 반환, [1,2,3].indexOf(2) → 1
lastIndexOf	값의 마지막 인덱스 반환, [1,2,1].lastIndexOf(1) → 2
forEach	각 요소에 콜백 실행, 반환 없음, [1,2].forEach(x => console.log(x))
every	모든 요소 조건 만족 시 true, [2,4].every(x => x%2===0) → true
some	하나라도 조건 만족 시 true, [1,2,3].some(x => x>2) → true
filter	조건 만족 요소 추출, [1,2,3].filter(x => x>1) → [2,3]
map	각 요소 변환, [1,2].map(x => x*2) → [2,4]
reduce	배열 축약, [1,2,3].reduce((a,b)=>a+b) → 6
pop	마지막 요소 제거, arr.pop() → 제거 후 arr 변경
push	배열 끝 요소 추가, arr.push(4) → arr 변경
reverse	배열 순서 뒤집기, [1,2,3].reverse() → [3,2,1]
sort	배열 정렬, [3,1,2].sort() → [1,2,3]
splice	요소 삽입/삭제, arr.splice(1,1,'a') → arr 변경
unshift	배열 앞에 요소 추가, arr.unshift(0) → arr 변경

---

3-2. 불변성 (Immutability)

• 기존 데이터를 변경하지 않고 새로운 배열/객체를 생성하는 개념
• React, Redux 등 상태 관리에서 중요
• 예시:

const arr = [1, 2, 3];
const newArr = arr.map((el, index) => index == 1 ? 200 : el);

console.log(arr); > 출력 [1,2,3] // 원본 
console.log(newArr); > 출력 [1,200,3]// 수정된 버전

---

✅ 정리

• DOM: 문서 객체 모델, JS로 HTML 조작 가능
• let/const: 변수 선언과 재할당 규칙
• 배열/객체: 데이터 구조와 조작
• 삼항연산자, Falsy, 구조분해할당: JS 핵심 문법
• Array Functions: map, filter, reduce 등 주요 메서드 숙지
• 불변성: 기존 데이터를 변경하지 않고 새로운 값 생성

이 내용을 온전히 나의 것으로 숙지하면,
웹 페이지의 동적인 UI를 만들고, 배열과 객체를 효율적으로 관리 및 활용할 수 있습니다.
아직 낯설고 다루기 쉽지 않지만, 이 글을 되새기며 꾸준히 숙지할 것입니다.