코딩자율학습단 19기 | 16일차 학습일지 – 표준 내장 객체(String·Array·Date·Math), BOM(window) 핵심 정리

오늘 학습 정보

• 날짜/Day: 2026/02/02 (Day16)
• 교재 범위: ~11.4 브라우저 객체 모델 사용하기 (p.433~453)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 표준 내장 객체(standard built-in object)
• 핵심 키워드 2: String/Array 메서드 활용
• 핵심 키워드 3: 브라우저 객체 모델

개념 정리

2-1) 표준 내장 객체 한 번에 잡기

역할: 자바스크립트에 “기본으로 내장된 객체”를 활용해 문자열/배열/날짜/수학 연산을 빠르게 처리

핵심 포인트:

• 많이 쓰는 건 String, Array, Date, Math 정도만 익혀도 실무·과제에서 충분히 도움 됨

짧은 예시(코드):

// 표준 내장 객체 예: Date, Math는 new 없이/있이 형태가 다름
const now = new Date();
const r = Math.random();

2-2) String 객체: “문자열 다루는 기본기”

역할: 문자열 길이 확인, 포함 여부 판단, 치환, 분리, 대/소문자 처리, 공백 제거 등

핵심 포인트:

• length: 길이 확인(유효성 검사에 자주 씀)
• includes(): 특정 문자열 포함 여부(true/false)
• replace()/replaceAll(): 일치하는 부분 치환
• split(): 구분자로 나눠 배열로 만들기
• trim(): 앞뒤 공백 제거
• indexOf(): 찾으면 인덱스, 못 찾으면 -1

짧은 예시(코드):

const email = "test!naver.com";

if (!email.includes("@")) console.log("올바른 이메일 형식이 아닙니다.");
if (email.indexOf("@") === -1) console.log("(@)가 없습니다.");

const raw = " hello world ";
console.log(raw.trim().toUpperCase()); // "HELLO WORLD"

2-3) Array 객체: “파괴적/비파괴적 구분이 핵심”

역할: 배열 요소 추가/삭제/정렬/순회/필터링 등 데이터 처리

핵심 포인트:

• length: 요소 개수
• 파괴적(원본 변경): push, pop, unshift, shift, sort, reverse
• 비파괴적(원본 유지): forEach, filter, find, findIndex, includes, join
• 학습 팁: 같은 배열을 여러 변수가 공유하면(참조) 한쪽 변경이 그대로 반영될 수 있음

짧은 예시(코드):

const arr = [10, 20, 30];

arr.push(40); // 원본 변경
arr.pop(); // 원본 변경

const nums = [10, 20, 30, 40];
nums.forEach(v => console.log(v)); // 원본 유지

const over20 = nums.filter(v => v > 20);
console.log(over20); // [30, 40]

2-4) Date 객체: “생성 방식 + get/set로 다루기”

역할: 날짜/시간 생성, 포맷 만들기, 날짜 차이 계산

핵심 포인트:

• 인스턴스 만들기: new Date()
• 숫자로 전달하는 생성은 월(month)이 0부터 시작(1월=0, 12월=11)
• get 계열: 날짜/시간 가져오기, set 계열: 날짜/시간 설정
• getTime(): 1970-01-01 기준 밀리초 → 날짜 차이 계산에 사용

짧은 예시(코드):

const d1 = new Date(); // 현재
const d2 = new Date(2022, 11, 25); // 2022-12-25 (month=11 주의)

const formatted = `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`;
console.log(formatted); // "2022-12-25"

const a = new Date("2022-12-23");
const b = new Date("2022-12-25");
const diffDays = (b.getTime() - a.getTime()) / (24 * 60 * 60 * 1000);
console.log(diffDays); // 2

2-5) Math 객체: “반올림/내림/올림 + 난수 공식”

역할: 수학 연산(정수 처리, 반올림, 난수 생성 등)

핵심 포인트:

• floor: 내림, ceil: 올림, round: 반올림
• random: 0 이상 1 미만 난수
• 정수 난수 범위 만들기 공식이 자주 나온다

짧은 예시(코드):

const x = 10.52;
console.log(Math.floor(x)); // 10
console.log(Math.ceil(x)); // 11
console.log(Math.round(x)); // 11

// 0~20 정수 난수
const n = Math.floor(Math.random() * 21);

// min~max 정수 난수(예: 10~20)
const min = 10, max = 20;
const m = Math.floor(Math.random() * (max - min + 1)) + min;

2-6) 브라우저 객체 모델(BOM): window 중심으로 이해하기

역할: “웹 브라우저가 제공하는 객체”로 창/주소/기록/브라우저 정보/화면 정보 등을 제어

핵심 포인트:

• 최상위: window
• 하위에 document, location, history, navigator, screen 등이 연결된 구조
• 이 단원은 특히 “웹 브라우저에서 실행”해야 확인 가능(콘솔로 확인하는 흐름)

짧은 예시(코드):

console.log(window.innerWidth, window.innerHeight);
console.log(location.href);
console.log(navigator.userAgent);

2-7) window 객체 실전: 창/스크롤/타이머/대화상자

역할: 브라우저 화면과 사용자 인터랙션을 직접 제어

핵심 포인트:

• 화면/창 크기: innerWidth/innerHeight, outerWidth/outerHeight
• 스크롤 위치: scrollX/scrollY 또는 pageXOffset/pageYOffset(호환성 관점에서 같이 알아두기)
• 대화상자: alert(), confirm(), prompt()
• 타이머: setTimeout(), setInterval(), clearInterval()
• 새 창 제어: open(), close()
• 스크롤 이동: scrollTo(절대 이동), scrollBy(상대 이동)
• 옵션 객체 전달 시 behavior: “smooth”로 부드럽게 이동(브라우저 지원 차이 주의)

짧은 예시(코드):

// 새 창 열기 (경로, 이름, 속성)
window.open("popup.html", "팝업", "width=200,height=100");

// 스크롤: 절대/상대 이동
window.scrollTo(100, 200);
window.scrollBy(200, 400);

// 옵션 객체 + smooth
window.scrollTo({ top: 4000, behavior: "smooth" });

이슈 로그

• Date 생성자에서 month가 0부터 시작하는 부분이 계속 헷갈려서, 숫자 전달 방식 vs 문자열 전달 방식을 같이 정리해둠.
• Array 메서드는 “파괴적/비파괴적”을 먼저 구분해두니 코드 읽기가 훨씬 편해졌음.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」