📘 자바스크립트(JavaScript) 기본 다지기 - Part 2

함수, 객체/배열, DOM, this, 실행 컨텍스트 완전 정복

 

자바스크립트의 기본기를 더 탄탄하게 만들기 위해, 이번 글에서는 실무에서 자주 마주치는 핵심 주제들을 다뤄볼게요.

함수의 선언 방식부터, 객체와 배열의 활용, DOM 조작, 그리고 많은 개발자가 처음에 헷갈려하는 this, 실행 컨텍스트까지 함께 정리해 보겠습니다.

---

✅ 함수의 다양한 선언 방식

자바스크립트에서 함수를 선언하는 방식은 크게 세 가지가 있어요.

🔹 함수 선언식 (Function Declaration)

function sayHello() {
  console.log("안녕하세요!");
}
sayHello(); // ✅ 선언 전에도 호출 가능

• 선언 전에 호출해도 작동해요.
• 자바스크립트 엔진이 실행 전에 함수 선언을 호이스팅(끌어올림) 하기 때문이에요.

🔹 함수 표현식 (Function Expression)

const sayHi = function() {
  console.log("안녕!");
};
sayHi(); // ✅ 호출 가능 (단, 선언 이후부터)

• 변수에 함수를 저장하는 방식이고, 선언 이전에는 호출할 수 없어요.

🔹 화살표 함수 (Arrow Function, ES6+)

const greet = (name) => {
  console.log(`안녕, ${name}!`);
};

// 더 간결하게 (한 줄일 경우 return 생략 가능)
const add = (a, b) => a + b;

함수 유형	호이스팅	this 바인딩	특징
함수 선언식	O	자체 this	선언 전에도 호출 가능
함수 표현식	X	자체 this	변수에 할당된 형태, 선언 후 호출
화살표 함수	X	상위 스코프 this	간결한 문법, 상위 스코프의 this 사용

---

✅ 객체와 배열의 활용

객체(Object)는 key-value 쌍으로 이루어진 자료 구조예요.

const user = {
  name: "혜빈",
  age: 26,
  sayHello: function() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  },
};

user.sayHello(); // 안녕하세요, 혜빈입니다.

이처럼 객체 안에는 데이터뿐 아니라 함수도 담을 수 있어요. 이 함수는 보통 메서드라고 불러요.

// 객체 속성 접근
console.log(user.name); // 혜빈
console.log(user['age']); // 26

// 객체 속성 추가/수정
user.job = '개발자';
user.age = 27;

// 객체 속성 삭제
delete user.age;

// 객체 메서드 간편 표기법 (ES6+)
const enhancedUser = {
  name: "민지",
  greet() { // function 키워드 생략 가능
    console.log(`Hello, I'm ${this.name}`);
  }
};

🔹 배열 (Array)

배열(Array)은 순서가 있는 값들의 집합이에요.

const fruits = ["사과", "바나나", "포도"];

console.log(fruits[1]); // 바나나
fruits.push("딸기"); // 배열 끝에 추가

// 배열 요소 순회
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of 구문 (ES6+)
for (const fruit of fruits) {
  console.log(fruit);
}

자주 사용하는 배열 메서드

• map: 배열의 각 요소를 변형해 새 배열 생성
• filter: 조건을 만족하는 요소만 남긴 새 배열 생성
• reduce: 배열의 값을 하나로 줄임 (누적 계산)
• forEach: 각 요소에 대해 함수 실행 (반환 값없음)
• find: 조건을 만족하는 첫 번째 요소 반환

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);       // [2, 4, 6, 8, 10]
const odd = nums.filter(n => n % 2 === 1);  // [1, 3, 5]
const sum = nums.reduce((acc, curr) => acc + curr, 0); // 15
nums.forEach(n => console.log(n));
const found = nums.find(n => n > 3);  // 4

기타 배열 메서드

 

메서드	용도	반환값	원본 배열 변경
push/pop	끝에 추가/제거	새 길이/제거된 요소	O
shift/unshift	앞에 제거/추가	제거된 요소/새 길이	O
map	각 요소 변환	새 배열	X
filter	조건 필터링	새 배열	X
reduce	값 누적 계산	계산 결과	X
forEach	각 요소 순회	undefined	X
slice	일부 추출	새 배열	X
splice	요소 교체	제거된 요소 배열	O

 

---

✅ DOM 조작 (Document Object Model)

자바스크립트는 HTML 문서(=DOM)를 조작할 수 있어요.

화면의 텍스트를 바꾸거나, 요소를 클릭했을 때 이벤트를 처리할 수 있죠.

🔹 요소 선택

const title = document.getElementById("main-title");
const buttons = document.querySelectorAll(".btn");

🔹 텍스트, 속성 변경

title.textContent = "새로운 제목";
title.setAttribute("data-role", "hero");

🔹 클래스 제어

title.classList.add("active");
title.classList.remove("hidden");

🔹 이벤트 리스너 추가

const btn = document.querySelector(".btn");

btn.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

이렇게 하면 HTML과 자바스크립트가 연결되어 진짜로 동작하는 페이지를 만들 수 있게 돼요.

---

 

✅ 자바스크립트 실행 방식 이해하기

자바스크립트는 코드가 실행되기 전에 내부적으로 다양한 과정을 거쳐요.

그 과정을 알면 버그를 줄이고, 코드를 더 정확하게 예측할 수 있어요.

1. 호이스팅(Hoisting)

자바스크립트는 실행 전에 변수와 함수 선언을 먼저 끌어올리는 작업을 해요.

이걸 호이스팅이라고 해요.

console.log(x); // undefined
var x = 10;

이렇게 var로 선언한 변수는 선언만 위로 올라가고, 값은 할당되지 않기 때문에 undefined가 출력돼요.

반면 let, const는 초기화 전에 접근하면 에러가 발생해요.

2. this 키워드

this는 현재 실행 중인 문맥(context)에 따라 달라지는 키워드예요.

const person = {
  name: "혜빈",
  sayHello() {
    console.log(this.name);
  }
};

person.sayHello(); // '혜빈'

여기서는 this가 person 객체를 가리켜요.

하지만 아래처럼 함수만 따로 꺼내서 쓰면 달라져요.

const greet = person.sayHello;
greet(); // undefined (브라우저 환경에서는 window.name)

또한 화살표 함수는 this를 바인딩하지 않고, 자신이 선언된 위치의 this를 그대로 사용해요.

3. 실행 컨텍스트(Execution Context)

코드가 실행되기 전, 자바스크립트 엔진은 실행 환경을 구성해요. 이걸 실행 컨텍스트라고 부릅니다.

쉽게 말하면, 누가 실행 중인지, 어떤 변수들이 있는지, 어떤 함수가 어디에 있는지를 기억하는 공간이에요.

function outer() {
  const outerVar = '밖';
  
  function inner() {
    console.log(outerVar); // 실행 컨텍스트 체인에 따라 접근 가능
  }

  inner();
}
outer();

 

자바스크립트는 실행 시점마다 스택처럼 컨텍스트를 쌓아가며 실행하고,

이 컨텍스트를 기준으로 변수나 함수에 접근해요. 이 구조를 이해하면 클로저나 this, 비동기 처리도 훨씬 이해하기 쉬워져요.

---

🎯 마무리 요약

• 함수는 선언식과 표현식이 있고, 호이스팅 여부가 다릅니다.
• 객체와 배열은 JS에서 가장 많이 사용하는 자료 구조이며, 메서드와 고차 함수에 익숙해질 필요가 있어요.
• DOM을 조작하면 HTML 요소를 동적으로 바꿀 수 있고, 이벤트 처리도 가능합니다.
• this, 실행 컨텍스트, 호이스팅 등 자바스크립트의 실행 흐름을 이해하는 것은 실력을 한 단계 끌어올려줘요.