JavaScript - 기초 정리

웹 3대 구성 요소

역할	기술	설명
골격	HTML	블럭 태그(구조) + 인라인 태그/텍스트(내용물)
서식	CSS	크기, 색상, 여백 등 스타일 지정
프로그래밍	JavaScript	동적 기능, 조작, 서버, 프레임워크

JavaScript 역사

탄생 배경

• 넷스케이프 개발 → W3C 표준 등재 신청 → 통과 → ECMAScript 1.0

• MS → JScript(독자 구현)

• 이름: LiveScript → JavaScript (Java와 무관, C 계열 언어)

• 초반엔 가볍고 쉬운 언어 → 2014년 이후 복잡해짐

시대별 이력

시기	주요 기능	모델
초반(1995)	폼 유효성 검사, 폼/링크/이미지 조작만 가능	BOM
중반(1999~2014)	모든 태그 조작 기능 추가	DOM
후반(2014~)	HTML5 + CSS3 + JS 통합, ES6(ECMAScript 2015)	Modern JS

• ES6 이후 확장

  • Node.js 출시(2009년, 구글 크롬 V8 엔진) → 브라우저 밖에서도 JS 실행

  • JavaScript → 프론트엔드 개발

  • Node.js → 백엔드 개발

  • JavaScript → TypeScript(MS)

JavaScript가 하는 일

1. JavaScript Core — 기본 프로그램 언어 기능

• 변수, 연산자, 제어문, 함수 등

2. BOM / DOM — 브라우저 전용 기능

• HTML 태그 생성/수정/삭제

• HTML 속성 생성/수정/삭제

• HTML 문자열 생성/수정/삭제

• CSS 생성/수정/삭제

3. 서버 / 응용 프로그램 제작

• Node.js..

4. 확장 라이브러리

• jQuery..

5. 프레임워크

• Angular.js, React, Vue.js..

HTML 문서에 JS 적용 방법

방식	설명	권장
인라인	태그에 직접 onXXX 속성으로 작성	❌
내부	script 태그 사용	△
외부	*.js 파일 분리 후 참조	✅

⚠️ HTML과 JavaScript는 동시에 실행됨
⚠️ JavaScript는 대소문자 구분(C 계열)

자료형

타입	설명	예시
number	정수 + 실수	10, 3.14
string	문자/문자열	"홍길동", '홍길동'
boolean	논리형	true, false
object	객체형	{}
null	의도적으로 비워둔 상태	null
undefined	변수 선언 후 초기 상태	undefined
NaN	숫자가 아닌 값	NaN
Symbol	고유 식별자
BigInt	큰 정수

• undefined == null → true (값만 비교)
  undefined === null → false (타입까지 비교)

변수 선언 — 동적 vs 정적

구분	JavaScript (var)	Java (int)
타입	동적 타입	정적 타입
타입 지정	불필요	필수
오류 발견	런타임 (늦음)	컴파일 (빠름)
유연성	높음	낮음
안정성	낮음	높음

var n6 = 10, n7 = 20;   // 여러 변수 동시 선언
var n6 = 20;             // 재정의 가능하지만 사용 금지

연산자

== vs ===

연산자	비교 대상	예시 결과
==	값만 비교 (타입 무시)	10 == '10' → true
===	값 + 타입 모두 비교	10 === '10' → false
!=	값만 다름	10 != '10' → false
!==	값 또는 타입 다름	10 !== '10' → true

타입 자동 변환(암묵적)

console.log(10 + 20);    // 30  (number + number)
console.log('10' + 20);  // '1020' (string 우선 → 문자열 연결)
console.log('10' * 2);   // 20  (* 연산 → 숫자 형변환)
JavaScript는 SQL과 같은 Week Type(느슨한 자료형) → ==은 자동 형변환 후 비교

콘솔 출력 포맷

포맷	의미
%d / %i	정수
%f	실수
%s	문자열
%o	객체(모든 타입)

문자열 함수 (String)

길이 / 검색

• length — 문자열 길이 (프로퍼티)

• indexOf() — 앞에서부터 검색, 위치 반환

• lastIndexOf() — 뒤에서부터 검색

대소문자 변환

• toUpperCase() — 대문자 변환

• toLowerCase() — 소문자 변환

추출

• substring(시작, 끝) — 시작~끝-1 (Java 방식)

• substr(시작, 길이) — 시작 위치에서 N개 (SQL 방식)

치환

• replace('대상', '치환') — 처음 만나는 요소 1개만 치환

• replace(/대상/g, '치환') — 정규식 + g 플래그 → 전체 치환

공백 제거

• trim() — 양쪽 제거

• trimStart() / trimEnd() — 왼쪽 / 오른쪽 제거 (표준)

• trimLeft() / trimRight() — 비표준 (구버전)

기타

• split(',') — 구분자 기준 분할 → 배열 반환

• startsWith() / endsWith() — 패턴 검색

• padStart(길이, 문자) — 앞 채우기 ex) '1'.padStart(3,'0') → '001'

• padEnd(길이, 문자) — 뒤 채우기 ex) '1'.padEnd(3,'0') → '100'

• repeat(N) — N번 반복 ex) '안녕'.repeat(3) → '안녕안녕안녕'

날짜/시간 (Date)

기본 생성

• JavaScript는 클래스 없음 → 내장 객체 제공

• new Date() → 현재 시각 객체 생성

• typeof now → object

요소 추출

메서드	반환값	비고
getFullYear()	2026	4자리 연도
getYear()	126	❌ 사용 금지 (1900년 기준)
getMonth()	0~11	1월 = 0 ⚠️
getDate()	1~31	일
getDay()	0~6	요일 (0=일요일)
getHours()	0~23	시
getMinutes()	0~59	분
getSeconds()	0~59	초
getMilliseconds()	0~999	밀리초
getTime()	숫자 1970-01-01	기준 ms

출력 포맷

• toString() — 기본 문자열

• toLocaleString() — 로컬 날짜+시간 ex) 2026. 2. 26. 오전 10:28:25

• toLocaleDateString() — 날짜만

• toLocaleTimeString() — 시간만

• dayjs(now).format('YYYY-MM-DD HH:mm:ss') — 커스텀 포맷 (외부 라이브러리)

날짜 연산

• 시각 - 시각 = ms 단위 시간

• ms → 일 변환: / 1000 / 60 / 60 / 24

• N일 뒤: setTime(getTime() + (N 24 60 60 1000))

배열 (Array)

특징

• 내장 객체 Array 사용

• 외형은 일반 배열(index), 성질은 ArrayList(가변 크기)

• 생성 방법

• new Array() — 생성자

• new Array(100, 200, 300) — 생성자 + 초기값

• [100, 200, 300] — 배열 리터럴 ✅ 주로 사용

주요 메서드

메서드	설명
length	배열 길이
push(값)	뒤에 추가
pop()	뒤에서 꺼내기 (제거 + 반환)

배열 활용 방식

• 순수 배열 → index 접근

• 스택 → push() + pop()

• 큐 → push() + shift()