0Pricing
JavaScript Academy · 강의

this 기초와 call/apply/bind 입문

함수와 메서드에서 this가 가리키는 대상을 이해하고 화살표 함수의 this와 call/apply/bind를 맛봅니다.

this 기초와 call/apply/bind 입문은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

this 소개

목표: 서로 다른 호출에서 this가 무엇을 가리키는지 알아보고, 화살표 함수의 this를 익히며, 작은 단계로 call/apply/bind를 사용해 봅니다.

  • 메서드 호출과 일반 호출
  • 화살표 함수의 this
  • call/apply/bind
this 기초와 call/apply/bind 입문 — 일러스트레이션 1

메서드 호출의 this

메서드 호출에서는 this가 점 앞의 객체를 가리킵니다.

// Method call: this is the object before the dot
const user = {
  name: "Ayla",
  say() {
    console.log("I am", this.name);
  }
};

user.say();
this 기초와 call/apply/bind 입문 — 일러스트레이션 2

일반 호출의 this

일반 호출에서는 엄격 모드일 때 this가 undefined입니다. 엄격 모드가 아닌 브라우저에서는 window일 수 있습니다.

// Plain function call: this is undefined in strict mode
function show() {
  console.log("this is", this);
}

show();
this 기초와 call/apply/bind 입문 — 일러스트레이션 3

화살표 함수의 this(어휘적)

화살표 함수는 바깥쪽 this를 사용합니다(어휘적 this). 메서드 내부의 콜백에 사용하기 좋습니다.

// Arrow functions do not have their own this
// They capture this from the surrounding scope
const team = {
  title: "Blue",
  start() {
    const report = () => {
      console.log("Team:", this.title);
    };
    report();
  }
};

team.start();
this 기초와 call/apply/bind 입문 — 일러스트레이션 4

call과 apply 비교

call과 apply는 주어진 this와 함께 함수를 즉시 실행합니다.

// call/apply invoke the function with a chosen this
function intro(lang1, lang2) {
  console.log("User:", this.name, "knows", lang1, "and", lang2);
}

const person = { name: "Mina" };

// call passes arguments normally
intro.call(person, "JS", "TS");

// apply passes arguments as an array
intro.apply(person, ["JS", "TS"]);
this 기초와 call/apply/bind 입문 — 일러스트레이션 5

bind 기초

bind는 선택한 this를 기억하여 나중에 호출할 수 있는 새 함수를 반환합니다.

// bind creates a new function with this fixed
function sayHi() {
  console.log("Hi from", this.name);
}

const dev = { name: "Lena" };

const sayHiFromLena = sayHi.bind(dev);

sayHiFromLena();
sayHiFromLena();
this 기초와 call/apply/bind 입문 — 일러스트레이션 6

bind와 call/apply 퀴즈

빠른 확인: this 고정하기입니다.

this 기초와 call/apply/bind 입문 — 일러스트레이션 7

복습

복습: 메서드 호출은 this를 객체로 설정하고, 일반 호출에서는 엄격 모드일 때 this가 undefined이며, 화살표 함수는 바깥쪽 this를 캡처합니다. call/apply는 한 번의 호출에 this를 설정하고, bind는 이후 호출을 위해 this를 고정합니다.

this 기초와 call/apply/bind 입문 — 일러스트레이션 8

자주 묻는 질문

“this 기초와 call/apply/bind 입문” 강의는 무료인가요?

네 — “this 기초와 call/apply/bind 입문” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“this 기초와 call/apply/bind 입문”에서 뭘 배우나요?

함수와 메서드에서 this가 가리키는 대상을 이해하고 화살표 함수의 this와 call/apply/bind를 맛봅니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“this 기초와 call/apply/bind 입문” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 선언과 표현식 비교, 화살표 함수 기초
  2. 매개변수, 기본값, 나머지 매개변수와 반환값
  3. this 기초와 call/apply/bind 입문
← JavaScript Academy(으)로 돌아가기