방송대 방통대 HTML5웹프로그래밍 10강 - 자바스크립트 언어 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 10강 - 자바스크립트 언어

자바스크립트의 역할과 실행 방식에서 출발하여 변수, 연산자, 제어문, 함수, 객체와 이벤트를 차례로 학습한다. 웹 페이지의 상태를 데이터로 표현하고 사용자의 행동에 반응하는 프로그램을 작성하기 위해 꼭 알아야 할 문법과 실무 원칙을 함께 정리한다.

제1장 자바스크립트의 역할과 실행

1. HTML, CSS, JavaScript의 역할

웹 페이지는 서로 다른 책임을 맡는 세 기술의 결합으로 완성된다. HTML은 제목, 본문, 이미지, 표와 같은 문서의 구조와 내용을 만들고, CSS는 색상, 글꼴, 정렬, 여백과 레이아웃 등 시각적 표현을 담당한다. JavaScript는 여기에 동작과 상호작용을 더한다. 버튼을 눌렀을 때 문구를 바꾸거나, 입력값을 검사하거나, 서버와 데이터를 주고받아 화면을 갱신하는 일이 자바스크립트의 영역이다.

자바스크립트는 HTML5의 공식 스크립트 언어이며 브라우저에만 갇힌 언어가 아니다. Node.js를 이용한 서버, 모바일과 데스크톱 환경에서도 사용할 수 있는 범용 언어이다. 현대 웹 애플리케이션에서는 단순한 DOM 조작을 넘어 상태 관리, 이벤트 기반 UI 반응, 백엔드와의 데이터 통신을 연결하는 핵심 역할을 맡는다.

핵심 구분: HTML은 구조와 내용, CSS는 표현, JavaScript는 기능과 상호작용을 담당한다.

2. Java와 JavaScript는 다른 언어

이름이 비슷하지만 Java와 JavaScript는 언어 철학과 용도가 완전히 다르다. Java는 정적 타입과 클래스 기반 객체지향을 바탕으로 JVM에서 실행되는 견고한 시스템 구축용 언어이다. JavaScript는 실행 시 타입이 결정되는 동적 타입 언어이며, 프로토타입 기반 객체 모델과 싱글 스레드·이벤트 루프 구조를 사용한다. 브라우저와 Node.js가 대표적인 실행 환경이다. 따라서 자바스크립트를 자바의 축소판으로 이해해서는 안 된다.

구분	Java	JavaScript
주요 성격	대규모 시스템 구축용 객체지향 언어	웹 동작과 상호작용을 위한 스크립트 언어
타입	정적 타입	동적 타입
객체 모델	클래스 기반	프로토타입 기반
동시성	멀티 스레드	싱글 스레드와 이벤트 루프
대표 실행 환경	JVM	웹 브라우저, Node.js

3. 선언 방식과 모듈화

자바스크립트는 HTML 문서 안의 <script> 요소에 직접 작성하거나 외부 .js 파일로 분리할 수 있다. 실무의 기본은 외부 파일을 연결하고 defer 속성을 사용하는 방식이다. 이 방식은 스크립트를 HTML 파싱과 동시에 내려받되, DOM 생성이 끝난 뒤 실행하여 요소를 안전하게 찾을 수 있게 한다.

<script defer src="app.js"></script>

코드를 파일별로 나눌 때는 export로 내보내고 import로 가져온다. HTML에서는 type="module"을 지정하며, 모듈 스크립트는 자동으로 defer처럼 동작한다. 상대 경로로 모듈을 가져올 때는 .js 확장자까지 명시한다.

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }

// main.js
import { add, PI } from './math.js';

제2장 변수와 식별자

1. 변수 선언과 식별자

변수는 프로그램이 다룰 데이터를 저장하기 위한 이름 붙은 공간이다. 변수를 만들 때는 저장할 값을 구분할 식별자가 필요하다. 식별자는 숫자로 시작할 수 없고 공백을 포함할 수 없으며, 특수문자는 밑줄과 달러 기호만 사용할 수 있다. 예약어는 사용할 수 없고 대소문자를 구분한다.

문법적으로 허용된다고 해서 모두 좋은 이름은 아니다. 변수와 함수에는 소문자로 시작하는 낙타체를 사용하고, 클래스는 대문자로 시작한다. 고정된 상수값은 MAX_LEVEL처럼 대문자와 밑줄을 조합하기도 한다. 변수는 userName, totalScore처럼 무엇을 담는지 드러내고, 불리언 상태에는 is, has, can, should 같은 접두사를 붙인다. 데이터 집합은 users처럼 복수형으로, 함수는 getUserData(), handleClick()처럼 동사로 시작하는 것이 좋다.

네이밍 원칙: data, info, process처럼 맥락이 없는 추상적 이름보다 데이터의 의미와 처리 목적이 드러나는 이름을 사용한다.

2. const와 let

현대 자바스크립트에서는 기본적으로 const를 사용하고, 나중에 다른 값을 다시 할당해야 할 때만 let을 사용한다. 과거의 var는 범위와 호이스팅 때문에 흐름을 예측하기 어려우므로 사용하지 않는다. 선언 없이 값을 할당하는 것도 버그와 보안 문제를 만들 수 있어 금지한다. 파일 최상단에 "use strict";를 두면 이러한 실수를 오류로 처리하는 엄격 모드를 적용할 수 있다.

const는 값 내부를 모두 얼린다는 뜻이 아니라 변수에 새 값을 재할당할 수 없다는 뜻이다. 따라서 const user = { name: "Lee" };에서 user = 다른객체는 불가능하지만, user.name = "Kim";처럼 같은 객체의 속성을 바꾸는 것은 가능하다. 전역 변수는 최소화하고 필요한 값은 함수의 매개변수와 반환값 또는 모듈의 import와 export로 공유한다.

제3장 자료형과 문자열 표현

1. 원시 타입과 참조 타입

자바스크립트의 데이터는 원시 타입과 참조 타입으로 나눌 수 있다. 원시 타입 변수에는 값 자체가 저장되며 값을 복사하면 서로 독립적인 복사본이 만들어진다. Number, String, Boolean, null, undefined, Symbol이 여기에 속한다. 참조 타입 변수에는 객체가 위치한 주소가 저장되므로 주소를 복사한 두 변수가 같은 객체를 바라볼 수 있다. Object, Array, Function이 대표적이다.

구분	원시 타입	참조 타입
저장	값 자체	객체의 참조 주소
특징	불변 값	내부 데이터 변경 가능
복사 결과	복사본과 원본이 독립	같은 객체를 함께 참조할 수 있음
예	Number, String, Boolean, null, undefined	Object, Array, Function

undefined는 선언 후 값이 아직 주어지지 않았을 때 자바스크립트가 부여하는 값이고, null은 개발자가 값이 없음을 의도적으로 표시한 값이다. 전자는 ‘아직 모르는 값’, 후자는 ‘없다고 확정한 값’으로 구분하면 이해하기 쉽다.

2. 템플릿 리터럴

템플릿 리터럴은 작은따옴표나 큰따옴표 대신 백틱을 사용한다. 문자열 안에 ${표현식}을 넣어 변수나 계산 결과를 자연스럽게 삽입할 수 있고, 줄바꿈도 작성한 그대로 보존된다. HTML 조각을 문자열로 구성할 때도 여러 줄을 읽기 좋게 작성할 수 있다.

const name = "철수";
const score = 90;
const message = `학생 ${name}의 점수는 ${score}점입니다.`;

document.write()는 로딩이 끝난 문서에서 기존 페이지를 덮어쓸 수 있으므로 실무에서 사용하지 않는다. 디버깅에는 console.log(), 화면 출력에는 선택한 DOM 요소의 textContent 등을 사용한다.

제4장 연산자와 제어문

1. 비교와 안전한 값 처리

연산자는 괄호, 단항 연산, 거듭제곱, 산술, 비교, 논리, 조건, 대입의 순서로 우선순위가 정해진다. 복잡한 식은 우선순위 암기에 의존하기보다 괄호로 의도를 명확하게 표현하는 편이 안전하다.

==와 !=는 비교 전에 타입을 강제로 바꿀 수 있어 0 == false, 0 == "" 같은 예상 밖의 결과를 낳는다. 실무에서는 값과 타입을 함께 비교하는 ===와 !==를 사용한다.

선택적 체이닝 ?.은 앞의 객체가 없을 때 오류를 내지 않고 평가를 멈춰 undefined를 반환한다. 널 병합 연산자 ??는 값이 null 또는 undefined일 때만 기본값을 사용한다. 두 연산자를 결합하면 user?.address?.city ?? "주소 불명"처럼 선택적인 데이터를 안전하게 읽을 수 있다.

&&와 ||는 결과가 확정되면 뒤의 식을 평가하지 않는 단축 평가를 수행한다. 이를 이용하면 로그인 상태가 참일 때만 함수를 실행하거나, 객체가 있을 때만 속성에 접근할 수 있다. 다만 데이터가 실제로 선택적일 때만 사용하여 오류를 숨기지 않아야 한다.

2. 조건문과 반복문

조건에 따라 흐름을 나눌 때는 if-else와 switch를 사용한다. 간단한 양자택일은 조건 ? 참일 때 값 : 거짓일 때 값 형태의 삼항 연산자로 표현할 수 있다. switch에서 break를 빠뜨리면 다음 case까지 이어서 실행되는 fall-through가 발생한다.

반복에는 for, while, do-while을 사용할 수 있다. 배열과 문자열처럼 순서가 있는 데이터의 값을 하나씩 꺼낼 때는 for...of가 적합하다. for...in은 객체의 키를 순회하는 문법이므로 배열에는 사용하지 않는다.

제5장 배열 순회와 함수

1. 배열의 함수형 메서드

forEach()는 배열의 각 요소에 작업을 수행하고 끝나며 새로운 배열을 만들지 않는다. map()은 각 요소를 변환하여 원본과 같은 수의 요소를 가진 새 배열을 만든다. filter()는 조건이 참인 요소만 모아 새 배열을 만들고, reduce()는 누적값과 현재값을 이용하여 배열 전체를 합계나 통계 같은 하나의 결과로 줄인다. includes()는 특정 값의 존재 여부를 불리언으로 반환한다.

메서드	목적	대표 결과
forEach()	요소마다 작업 실행	별도 반환값 없음
map()	모든 요소 변환	같은 길이의 새 배열
filter()	조건에 맞는 요소 선별	선별된 새 배열
reduce()	요소를 누적	하나의 값 또는 새 구조
includes()	값의 존재 확인	true 또는 false

2. 함수 선언과 표현

함수는 입력을 받아 작업하고 결과를 돌려주는 재사용 가능한 코드 묶음이다. 함수 선언문은 function 함수명() 형태이며 호이스팅되어 선언 전에도 호출될 수 있다. 함수 표현식은 함수를 값처럼 변수에 저장하며 변수에 할당된 뒤에만 호출할 수 있어 코드 흐름을 예측하기 쉽다.

기본 매개변수는 인수가 없거나 undefined일 때 미리 정한 값을 넣는다. null, false, 0은 유효한 인수로 취급되므로 기본값이 적용되지 않는다. 이름 없는 무명 함수는 변수에 담거나 다른 함수의 인수로 넘길 때 사용한다. 나중에 실행하도록 다른 함수에 전달하는 함수를 콜백 함수라 하며 이벤트, 타이머, 서버 통신 같은 비동기 처리의 핵심이다.

화살표 함수는 function 대신 =>를 사용한다. 매개변수가 하나면 괄호를 생략할 수 있고, 실행문이 하나의 반환식이면 중괄호와 return을 생략할 수 있다. 객체 리터럴을 즉시 반환할 때는 객체를 소괄호로 감싸야 한다.

const square = n => n * n;
const getUser = name => ({ userName: name });

3. 기본 대화상자

alert()는 메시지를 알리고 반환값이 없으며, confirm()은 확인 여부를 true 또는 false로 돌려준다. prompt()는 입력한 문자열을 반환하고 취소하면 null을 반환한다. 숫자를 입력해도 문자열이므로 계산 전 Number()나 parseInt()로 변환해야 한다.

이 대화상자들은 실행을 멈추는 동기적 차단 방식이고 CSS로 꾸미거나 위치를 제어할 수 없다. 따라서 학습 단계의 입출력 확인에는 편리하지만 실제 서비스에서는 HTML dialog 같은 사용자 인터페이스를 사용하는 편이 적합하다.

제6장 객체의 생성과 접근

1. 속성과 메서드

객체는 서로 연관된 데이터와 기능을 하나로 묶은 집합체이다. 자동차 객체라면 모델명과 색상은 속성이고, 시동을 걸고 달리는 동작은 메서드이다. 객체는 키와 값의 쌍으로 내용을 관리하며, 자바스크립트에서는 원시 타입을 제외한 거의 모든 것이 객체로 취급된다.

일회성 데이터 묶음은 중괄호로 만드는 객체 리터럴이 가장 간단하다. 같은 구조의 객체를 여러 개 만들 때는 생성자 함수에 new를 사용할 수 있으며, 현대 코드에서는 구조와 메서드가 명확한 class를 주로 사용한다. 클래스의 constructor는 생성 시 속성을 초기화하고 this는 현재 생성된 객체 자신을 가리킨다.

데이터만 묶을 때는 객체 리터럴, 기능을 포함한 같은 형태의 객체를 반복 생성할 때는 클래스를 선택하는 것이 핵심이다.

2. 점 표기법과 대괄호 표기법

일반적인 속성과 메서드는 myCar.color, myCar.start()처럼 점 표기법으로 접근한다. 속성 이름이 변수로 주어지거나 공백·특수문자를 포함하면 myCar[key], myCar["특수 속성"]처럼 대괄호 표기법을 사용한다. 객체는 참조 타입이므로 const b = a;로 복사한 뒤 b의 속성을 바꾸면 같은 객체를 가리키는 a에서도 변경 결과가 보인다.

제7장 String과 Array 객체

1. String 객체

문자열은 new String()보다 리터럴 방식으로 선언한다. 생성자 방식은 원시 문자열이 아니라 객체를 만들어 메모리와 타입 혼동을 초래한다. 문자열은 불변이므로 메서드를 호출해도 원본이 바뀌지 않고 새 문자열이 반환된다. 결과를 계속 사용하려면 새 변수에 담거나 기존 변수에 다시 할당해야 한다.

length는 길이, includes()는 포함 여부, indexOf()는 시작 위치를 구한다. split()은 문자열을 배열로 나누고, replace()는 첫 번째 일치 항목을, replaceAll()은 모든 일치 항목을 바꾼다. trim()은 양 끝 공백을 제거하고 slice()는 일부를 잘라 새 문자열을 만든다.

toUpperCase()와 toLowerCase()는 대소문자를 통일하고, startsWith()와 endsWith()는 시작·끝 문자열을 검사한다. padStart()와 padEnd()는 자릿수를 채우며 repeat()는 문자열을 반복한다. 화면 표현용 구식 글꼴 메서드는 사용하지 않고 HTML과 CSS로 표현하며, 폐지 예정인 substr() 대신 substring()이나 slice()를 사용한다.

2. Array 객체

배열도 리터럴 []로 만드는 것이 안전하다. new Array(5)는 값 5를 담은 배열이 아니라 길이만 5인 빈 배열을 만들기 때문이다. length는 요소 수를 알려주고, push()와 pop()은 뒤쪽 요소를 추가·삭제하며 shift()는 앞쪽 요소를 삭제한다. 이 메서드들은 원본 배열을 변경한다.

find()는 조건에 맞는 첫 요소를 반환하고 없으면 undefined를 반환한다. join()은 배열 요소를 하나의 문자열로 연결한다. sort()는 기본적으로 문자열 사전순으로 정렬하므로 숫자는 (a, b) => a - b 같은 비교 함수를 제공해야 한다. sort()는 원본을 바꾸지만 toSorted()는 정렬된 새 배열을 반환한다.

splice()는 중간 요소를 삭제·삽입하며 원본을 바꾼다. slice()는 시작 인덱스부터 끝 인덱스 직전까지 복사해 새 배열을 만든다. concat()은 배열을 합치고, 전개 연산자 ...는 배열이나 객체의 내용물을 펼쳐 복사하거나 결합할 때 사용한다.

제8장 Date, Math와 JSON

1. Date 객체

Date는 반드시 new로 생성한다. 현재 시각, 날짜 문자열, 연·월·일 숫자, 1970년 1월 1일 UTC 이후의 밀리초인 타임스탬프로 만들 수 있다. 숫자로 날짜를 만들 때 월은 0부터 시작하여 0이 1월, 11이 12월이고 요일도 0이 일요일, 6이 토요일이다.

getFullYear(), getMonth(), getDate(), getDay()로 구성 요소를 읽는다. 화면에 월을 표시할 때는 getMonth() + 1이 필요하다. getTime()은 타임스탬프를 반환하여 날짜 차이와 D-Day를 계산하는 데 사용한다. setDate() 등에 범위를 넘는 값을 넣으면 다음 달이나 해로 자동 보정된다.

사람에게 보여줄 때는 지역 형식에 맞추는 toLocaleString(), 서버 전송과 저장에는 ISO 8601 문자열을 만드는 toISOString()이 적합하다. toString()은 개발자 확인용이고 toUTCString()은 쿠키 만료와 HTTP 헤더처럼 UTC 형식이 필요한 경우에 사용한다.

2. Math 객체

Math는 new 없이 바로 쓰는 정적 객체이다. round()는 반올림, ceil()은 올림, floor()는 더 작은 정수 방향의 내림, trunc()는 소수 부분 제거이다. 음수에서 floor(-1.5)는 -2, trunc(-1.5)는 -1이라는 차이에 주의한다.

Math.random()은 0 이상 1 미만의 실수를 반환한다. 최소값부터 최대값까지의 임의 정수는 Math.floor(Math.random() * (최대값 - 최소값 + 1)) + 최소값으로 만든다. 보안 토큰에는 예측 가능한 Math.random() 대신 Web Crypto API를 사용한다. max(), min(), abs(), pow(), sqrt(), PI도 주요 수학 기능이다. 배열의 최댓값은 Math.max(...scores)처럼 펼쳐 전달한다.

3. JSON

JSON은 JavaScript Object Notation의 약자로 데이터를 저장하고 전송하는 언어 독립적인 텍스트 형식이다. 객체처럼 보이지만 문자열 포맷이라는 점이 중요하다. 키와 문자열 값에는 반드시 큰따옴표를 사용하고 마지막 항목 뒤에는 쉼표를 두지 않는다. 함수와 undefined는 담을 수 없으며 순수한 데이터만 표현한다.

JSON.stringify()는 자바스크립트 값을 서버로 보낼 JSON 문자열로 직렬화하고, JSON.parse()는 받은 JSON 문자열을 자바스크립트 객체로 역직렬화한다. 형식이 잘못된 문자열을 parse()하면 오류가 발생한다.

제9장 이벤트와 이벤트 처리

1. 이벤트의 개념과 종류

이벤트는 클릭, 키 입력, 페이지 로딩처럼 브라우저에서 일어나는 사건이다. 이벤트 핸들러 또는 리스너는 그 사건이 발생했을 때 실행되는 함수이다. 이벤트는 대상 요소, 이벤트 종류, 핸들러의 세 요소로 구성된다. 언제 일어날지 모르는 사용자 입력을 기다렸다가 처리하므로 상호작용과 비동기 처리의 기초가 된다.

범주	주요 이벤트	활용
마우스	click, mouseover, mouseout, mousemove	버튼, 툴팁, 드래그
폼·키보드	submit, input, change, keydown	검증, 검색, 단축키
문서·창	DOMContentLoaded, load, scroll, resize	초기화, 로딩, 반응형 처리

DOMContentLoaded는 이미지와 관계없이 HTML 파싱이 끝났을 때 발생하고, load는 이미지 등 모든 리소스가 로딩된 뒤 발생한다. input은 값이 입력되는 매 순간, change는 입력이 확정되어 포커스가 빠지는 시점에 주로 발생한다.

2. addEventListener()

HTML의 onclick 같은 인라인 속성은 구조와 동작을 섞어 유지보수가 어렵다. DOM의 btn.onclick = 함수 방식은 같은 이벤트에 한 함수만 유지할 수 있어 뒤의 할당이 앞의 함수를 덮어쓴다. 표준 방식은 addEventListener('이벤트명', 함수, 옵션)이다. 하나의 요소에 여러 함수를 연결할 수 있고, 이름 있는 함수를 전달하면 나중에 제거할 수도 있다.

const btn = document.querySelector('#myBtn');
function handleClick() {
  console.log('클릭되었습니다.');
}
btn.addEventListener('click', handleClick);

addEventListener()에는 'onclick'이 아니라 'click'처럼 on을 뺀 순수 이벤트 이름을 전달한다. 콜백 함수명 뒤에 괄호를 붙이면 등록 시점에 즉시 실행되므로 괄호 없이 전달한다.

3. 이벤트 객체

브라우저는 사건의 상세 정보를 이벤트 객체로 만들어 핸들러의 첫 번째 인수에 전달한다. 보통 e, evt, event라는 이름으로 받는다. e.target은 실제 사건이 발생한 요소, e.key는 누른 키, e.clientX와 e.clientY는 브라우저 화면 기준 마우스 좌표를 알려준다.

e.preventDefault()는 링크 이동이나 폼 제출 후 새로고침 같은 브라우저의 기본 동작을 막는다. 폼의 submit 이벤트에서 이를 호출하면 페이지를 새로고침하지 않고 자바스크립트로 검증과 전송을 처리할 수 있다. e.stopPropagation()은 부모나 자식 방향으로 이어지는 이벤트 전파를 중단한다.

제10장 이벤트 전파와 위임

1. 버블링과 캡처링

중첩된 요소에서 이벤트가 전달되는 순서를 이벤트 전파라 한다. 기본 방식인 버블링은 자식에서 발생한 이벤트가 부모, body, HTML 방향으로 올라간다. 캡처링은 그 반대로 상위 요소에서 자식 방향으로 내려가며 { capture: true } 옵션으로 사용한다. 대부분의 웹 개발에서는 기본 버블링을 중심으로 처리하고, 꼭 필요할 때만 stopPropagation()으로 전파를 멈춘다.

2. 이벤트 위임

이벤트 위임은 각 자식 요소에 리스너를 붙이지 않고 부모에 하나의 리스너만 등록한 뒤 버블링을 이용해 자식의 사건을 처리하는 기법이다. 리스너 수가 줄어 메모리를 절약하고, 자바스크립트로 나중에 추가된 자식에도 별도 등록 없이 같은 처리를 적용할 수 있다.

const list = document.querySelector('ul');
list.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    e.target.style.color = 'red';
  }
});

이벤트 처리 흐름: 대상 요소를 찾고 → 이벤트 종류를 정하고 → addEventListener()로 핸들러를 등록하고 → 필요하면 이벤트 객체로 대상·키·좌표·기본 동작과 전파를 제어한다.

핵심 개념 정리

• 자바스크립트는 웹 페이지의 상태, 동작, 상호작용과 데이터 통신을 담당하며 Java와는 별개의 언어이다.
• 외부 .js 파일과 defer를 기본으로 사용하고, 모듈은 export와 import로 구성한다.
• 변수는 기본적으로 const, 재할당이 필요할 때만 let을 사용하며 식별자에는 의미가 드러나는 이름을 붙인다.
• 원시 타입은 값이 복사되고 참조 타입은 객체 주소를 공유할 수 있다. ===, !==, ?., ??로 안전한 비교와 접근을 수행한다.
• map(), filter(), reduce()와 함수·콜백·화살표 함수는 데이터 처리의 핵심이다.
• 객체는 속성과 메서드를 묶으며 리터럴과 클래스로 만들고, 점 표기법과 대괄호 표기법으로 접근한다.
• String, Array, Date, Math, JSON의 생성 방식과 원본 변경 여부, 반환값을 구분해야 한다.
• 이벤트는 대상·종류·핸들러로 구성하며 addEventListener(), 이벤트 객체, 버블링과 이벤트 위임을 중심으로 처리한다.

자바스크립트 학습의 핵심은 문법을 따로 암기하는 데 있지 않다. 데이터를 변수와 객체로 표현하고, 함수로 처리하며, 이벤트가 발생했을 때 화면과 상태를 갱신하는 전체 흐름을 연결해야 한다. 특히 const 우선 사용, 엄격 비교, 비파괴적 데이터 처리, addEventListener()와 이벤트 위임은 안전하고 유지보수하기 좋은 현대 웹 코드를 만드는 기준이다.

예상문제 20선

1. HTML, CSS, JavaScript의 역할 구분으로 옳은 것은?

① JavaScript는 문서 구조만 정의한다.② CSS는 서버와 데이터를 교환한다.③ HTML은 구조, CSS는 표현, JavaScript는 동작을 담당한다.④ HTML은 이벤트 처리만 담당한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
HTML은 구조와 내용, CSS는 시각적 표현, JavaScript는 기능과 상호작용을 맡는다.

2. 외부 자바스크립트 파일을 실무적으로 연결하는 방식은?

① <script defer src="app.js"></script>② <style src="app.js">③ <link defer href="app.js">④ <script import="app.js">

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
defer는 HTML 파싱을 막지 않고 DOM이 만들어진 뒤 외부 스크립트를 안전하게 실행하게 한다.

3. 자바스크립트 식별자로 사용할 수 없는 것은?

① userName② $element③ MAX_LEVEL④ 1stPlace

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
식별자는 숫자로 시작할 수 없다. 숫자는 첫 글자가 아닌 위치에서는 사용할 수 있다.

4. const에 대한 설명으로 옳은 것은?

① 객체의 모든 속성을 자동으로 동결한다.② 변수의 재할당은 막지만 참조한 객체의 속성 변경은 가능하다.③ 전역에서만 선언할 수 있다.④ 선언 후 반드시 다른 값을 다시 넣어야 한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
const는 변수와 새 값의 재연결을 금지한다. 같은 객체 내부의 속성까지 불변으로 만드는 것은 아니다.

5. 원시 타입과 참조 타입의 복사 차이로 옳은 것은?

① 원시 타입은 항상 같은 객체를 공유한다.② 참조 타입은 값이 복사되어 언제나 독립적이다.③ 두 타입은 복사 방식이 완전히 같다.④ 참조 타입은 복사된 변수가 같은 객체를 가리킬 수 있다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
객체를 단순 대입하면 참조 주소가 복사되므로 한쪽에서 속성을 바꾸면 다른 변수에서도 변경이 보일 수 있다.

6. undefined와 null의 구분으로 옳은 것은?

① undefined는 값이 아직 정해지지 않은 상태, null은 없음을 의도적으로 지정한 값이다.② 둘 다 함수만 저장하는 참조 타입이다.③ null은 선언하지 않은 식별자를 뜻한다.④ undefined는 개발자가 값이 없음을 확정한 경우에만 사용한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
undefined는 아직 값이 없고, null은 개발자가 비어 있음을 명시적으로 표현한다.

7. 값과 자료형을 모두 비교하는 연산자는?

① ==② ===③ ??④ =>

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
엄격 일치 연산자 ===는 타입 강제 변환 없이 값과 타입이 모두 같은지 검사한다.

8. user?.address?.city ?? "주소 불명"의 동작은?

① city가 0이면 언제나 오류를 낸다.② address 객체를 강제로 새로 만든다.③ 중간 값이 없으면 접근 오류를 피하고 최종값이 null 또는 undefined일 때 기본 문구를 쓴다.④ 모든 속성을 문자열로 변환한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
?.은 안전한 접근, ??는 null 또는 undefined에 대한 기본값 설정을 담당한다.

9. 각 요소를 변환하여 원본과 같은 길이의 새 배열을 만드는 메서드는?

① filter()② map()③ includes()④ pop()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
map()은 각 요소를 1:1로 변환해 같은 길이의 새 배열을 반환한다.

10. 콜백 함수에 대한 설명으로 옳은 것은?

① 반드시 이름이 있고 즉시 실행되는 함수이다.② 클래스 안에서만 선언할 수 있다.③ 반환값이 없는 함수만 콜백이 될 수 있다.④ 나중에 실행하도록 다른 함수에 인수로 전달하는 함수이다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
콜백은 이벤트 발생이나 작업 완료 같은 시점에 실행하도록 다른 함수에 맡기는 함수이다.

11. prompt()의 반환값에 대한 설명으로 옳은 것은?

① 입력값은 문자열이며 취소하면 null을 반환한다.② 숫자 입력은 항상 Number 타입이다.③ 확인하면 언제나 true만 반환한다.④ 취소하면 빈 배열을 반환한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
prompt()의 입력 결과는 문자열이고 취소 결과는 null이다. 숫자 계산 전에는 형 변환이 필요하다.

12. 객체 속성 이름이 변수 key에 들어 있을 때 알맞은 접근법은?

① object.key만 사용한다.② object(key)를 호출한다.③ object[key]를 사용한다.④ object::key를 사용한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
동적으로 정해진 속성 이름은 대괄호 표기법으로 접근한다. 점 표기법은 문자 그대로 key라는 속성을 찾는다.

13. String 메서드의 일반적인 특징은?

① 원본 문자열을 바꾸지 않고 새 문자열을 반환한다.② 모든 메서드가 원본을 직접 수정한다.③ 문자열은 반드시 new String()으로 만들어야 한다.④ replace()는 언제나 모든 일치 항목을 바꾼다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
문자열은 불변이므로 처리 결과를 계속 사용하려면 반환된 새 문자열을 변수에 저장해야 한다.

14. 숫자 배열을 오름차순으로 정렬하는 올바른 코드는?

① numbers.sort('number')② numbers.sort((a, b) => a - b)③ numbers.join((a, b) => a - b)④ numbers.filter(a => a)

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
기본 sort()는 문자열 사전순으로 비교하므로 숫자 정렬에는 차를 반환하는 비교 함수가 필요하다.

15. new Date(2026, 2, 1)이 나타내는 날짜는?

① 2026년 1월 2일② 2026년 2월 1일③ 2026년 2월 2일④ 2026년 3월 1일

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
Date 생성자의 숫자 월은 0부터 시작하므로 2는 3월이다.

16. Math.floor(-1.5)의 결과는?

① 1② -1③ -2④ 2

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
floor()는 수직선에서 더 작은 정수 방향으로 내리므로 -1.5의 결과는 -2이다.

17. JSON 형식의 규칙으로 옳은 것은?

① 키는 반드시 작은따옴표로 감싼다.② 함수와 undefined를 자유롭게 저장한다.③ 키와 문자열 값은 큰따옴표를 사용하고 마지막 쉼표를 두지 않는다.④ 자바스크립트에서만 해석할 수 있다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
JSON은 엄격한 텍스트 포맷으로 큰따옴표를 사용하며 함수와 undefined, 마지막 쉼표를 허용하지 않는다.

18. 이벤트 처리의 표준 방식은?

① HTML의 onclick 속성에 모든 코드를 작성한다.② 요소의 innerHTML에 함수명을 대입한다.③ 이벤트마다 document.write()를 호출한다.④ addEventListener()로 이벤트 종류와 핸들러를 등록한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
addEventListener()는 구조와 동작을 분리하고 한 요소에 여러 핸들러를 연결할 수 있는 표준 방식이다.

19. 폼 제출 시 페이지 새로고침을 막는 이벤트 객체 메서드는?

① e.stopPropagation()② e.preventDefault()③ e.clientX()④ e.target()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
preventDefault()는 폼 제출이나 링크 이동처럼 브라우저가 원래 수행하는 기본 동작을 막는다.

20. 이벤트 위임의 가장 중요한 장점은?

① 부모의 한 리스너로 여러 자식과 나중에 추가된 자식의 이벤트까지 처리할 수 있다.② 모든 이벤트의 버블링을 자동으로 중단한다.③ 자식 요소마다 반드시 별도 리스너를 만든다.④ 캡처링 단계에서만 작동한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
이벤트 위임은 버블링을 이용하므로 부모 하나의 리스너로 현재와 미래의 여러 자식 요소를 효율적으로 처리한다.