Skip to Content
독학사독학사 2단계웹프로그래밍14. JavaScript 출력 예측 문제

재구성 출제 고지: 이 문제집은 국가평생교육진흥원 독학학위제 2단계 웹 프로그래밍 출제기준(JavaScript 문법·함수·객체·배열·DOM·이벤트 영역)의 평가 범위와 문항 유형을 분석해 새로 구성한 재구성 문항입니다. 실제 기출 문항을 그대로 옮긴 것이 아닙니다. 회차별 정확한 문항 수·시험 시간은 시행처 공고를 확인해야 하며, 여기서는 22문항을 표준 분량으로 구성했습니다.

출제 범위와 문항 배분

영역문항 수문항 번호관련 편
변수·형 변환 결과61–608
함수·배열·객체 동작77–1308, 09
DOM 조작 결과514–1809
이벤트 동작 예측419–2209

코드 문항은 한 줄씩 실행 순서를 따라가며 변수 값이 바뀌는 지점을 표로 적어보고 정답을 확인하세요. 특히 형 변환 규칙, 콜백 함수의 호출 시점, DOM 요소를 잘못 찾았을 때의 오류는 독학사 시험에서 반복 출제되는 대표 함정입니다.

변수·형 변환 결과 (1–6)

문제 1

let x = 10;
var x = 20;
console.log(x);
문제 14지선다
위 코드를 실행하면 어떤 일이 벌어지는가?

문제 2

console.log(typeof '10' + 5);
문제 24지선다
위 코드를 실행했을 때 출력되는 값은?

문제 3

console.log(5 + '5');
console.log(5 - '5');
문제 34지선다
위 두 줄을 순서대로 실행했을 때 출력되는 값으로 옳은 것은?

문제 4

console.log(0 == '0');
console.log(0 === '0');
문제 44지선다
위 두 줄을 순서대로 실행했을 때 출력되는 값으로 옳은 것은?

문제 5

if ('') {
  console.log('참');
} else {
  console.log('거짓');
}
문제 54지선다
위 코드를 실행했을 때 출력되는 값은?

문제 6

console.log(Number('3.14'));
console.log(Number('abc'));
console.log(parseInt('42px'));
문제 64지선다
위 세 줄을 순서대로 실행했을 때 출력되는 값으로 옳은 것은?

함수·배열·객체 동작 (7–13)

문제 7

function add(a, b) {
  return a + b;
}
console.log(add(3));
문제 74지선다
위 코드를 실행했을 때 출력되는 값은?

문제 8

function outer() {
  let count = 0;
  function inner() {
    count = count + 1;
    return count;
  }
  return inner;
}
const counter = outer();
console.log(counter());
console.log(counter());
문제 84지선다
위 코드에서 두 번의 counter() 호출 결과로 옳은 것은?

문제 9

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(function (n) {
  return n % 2 === 0;
});
console.log(result);
문제 94지선다
위 코드를 실행했을 때 result의 값은?

문제 10

const numbers = [1, 2, 3];
const doubled = numbers.map(function (n) {
  return n * 2;
});
console.log(numbers);
console.log(doubled);
문제 104지선다
위 두 줄의 console.log 결과로 옳은 것은?

문제 11

const person = {
  name: '민수',
  greet: function () {
    return '안녕, ' + this.name;
  },
};
const greetFn = person.greet;
console.log(person.greet());
문제 114지선다
person.greet()를 직접 호출했을 때 출력되는 값은?

문제 12

const greetFn = function () {
  return '안녕, ' + this.name;
};
const person = { name: '민수', greet: greetFn };
const standalone = person.greet;
console.log(standalone());
문제 124지선다
standalone()처럼 메서드를 객체에서 떼어내 변수에 담아 호출하면 일반적으로 어떤 값이 출력되는가?

문제 13

const arr = ['a', 'b', 'c'];
console.log(arr.length);
arr.length = 1;
console.log(arr);
문제 134지선다
위 코드를 순서대로 실행했을 때 두 console.log의 출력 결과로 옳은 것은?

DOM 조작 결과 (14–18)

문제 14

<p id="msg">원래 문구</p>
document.getElementById('msg').textContent = '바뀐 문구';
문제 144지선다
위 스크립트를 실행한 뒤 화면에 나타나는 문구는?

문제 15

<p class="item">사과</p>
<p class="item">바나나</p>
const list = document.getElementsByClassName('item');
console.log(list.length);
문제 154지선다
위 스크립트의 console.log 출력 결과는?

문제 16

<ul id="list"></ul>
const ul = document.getElementById('list');
const li = document.createElement('li');
li.textContent = '새 항목';
ul.appendChild(li);
문제 164지선다
위 스크립트를 실행한 뒤 화면에 나타나는 결과로 옳은 것은?

문제 17

<div id="box" style="width: 100px;"></div>
const box = document.getElementById('box');
box.style.width = '200px';
box.style.backgroundColor = 'skyblue';
문제 174지선다
위 스크립트를 실행한 뒤 box 요소의 상태로 옳은 것은?

문제 18

<p id="target">문단</p>
const target = document.getElementById('target');
target.classList.add('highlight');
console.log(target.className);
문제 184지선다
target 요소에 처음부터 class 속성이 전혀 없었다면, 위 스크립트의 console.log 출력 결과는?

이벤트 동작 예측 (19–22)

문제 19

<button id="btn">클릭</button>
const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  console.log('클릭되었습니다');
});
문제 194지선다
사용자가 버튼을 두 번 클릭했을 때 콘솔에 나타나는 결과로 옳은 것은?

문제 20

<form id="form">
  <input type="text" />
  <button type="submit">제출</button>
</form>
const form = document.getElementById('form');
form.addEventListener('submit', function (event) {
  event.preventDefault();
  console.log('제출을 가로챘습니다');
});
문제 204지선다
event.preventDefault()를 호출한 효과로 가장 적절한 것은?

문제 21

<div id="outer" style="padding: 20px;">
  <button id="inner">안쪽 버튼</button>
</div>
document.getElementById('outer').addEventListener('click', function () {
  console.log('outer 클릭');
});
document.getElementById('inner').addEventListener('click', function () {
  console.log('inner 클릭');
});
문제 214지선다
사용자가 안쪽 버튼을 클릭했을 때 콘솔에 출력되는 순서로 옳은 것은?

문제 22

<input id="name" type="text" />
<p id="output"></p>
const input = document.getElementById('name');
const output = document.getElementById('output');
input.addEventListener('input', function () {
  output.textContent = input.value;
});
문제 224지선다
사용자가 입력란에 글자를 한 자씩 입력할 때마다 output 문단에서 일어나는 일로 가장 적절한 것은?

참고 자료

Last updated on
13. CSS 개념 확인 문제15. 독학사 2단계 웹 프로그래밍 예상기출문제 1