this

this

this 키워드는 함수 본문 같은 코드 조각이 실행될 것으로 예상되는 컨텍스트(context)를 가리킵니다. 가장 일반적으로는 객체 메서드에서 사용되는데, 여기서 this는 메서드가 붙어 있는 객체를 가리켜 같은 메서드를 서로 다른 객체에서 재사용할 수 있게 해 줍니다. Baseline Widely available — 2015년 7월부터 여러 브라우저에서 지원되는 잘 정착된 기능입니다.

출처: this

본문

this 키워드는 코드 조각(예: 함수 본문)이 실행될 것으로 예상되는 컨텍스트를 가리킵니다. 가장 흔히 객체 메서드에서 사용되며, this는 해당 메서드가 붙어 있는 객체를 가리켜 동일한 메서드를 다른 객체에서 재사용할 수 있게 합니다.

JavaScript에서 this의 값은 함수가 어떻게 정의되었는지가 아니라 어떻게 호출되는지(런타임 바인딩, runtime binding)에 따라 달라집니다. 일반 함수가 객체의 메서드로 호출되면(obj.method()) this는 그 객체를 가리킵니다. 독립 함수로 호출되면(객체에 붙어 있지 않음: func()) this는 보통 전역 객체(비엄격 모드) 또는 undefined(엄격 모드)를 가리킵니다. Function.prototype.bind() 메서드는 this 바인딩이 변하지 않는 함수를 만들 수 있고, Function.prototype.apply()Function.prototype.call() 메서드는 특정 호출에서 this 값을 설정할 수 있습니다.

화살표 함수(arrow function)는 this 처리 방식이 다릅니다: 정의될 당시의 부모 스코프에서 this를 상속받습니다. 이 동작 덕분에 화살표 함수는 콜백과 컨텍스트 보존에 특히 유용합니다. 그러나 화살표 함수는 자체 this 바인딩이 없습니다. 따라서 bind(), apply(), call() 메서드로 this 값을 설정할 수 없고, 객체 메서드에서도 현재 객체를 가리키지 않습니다.

시도해 보기 (Try it)

const test = {
  prop: 42,
  func() {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

구문 (Syntax)

this

값 (Value)

비엄격 모드에서 this는 항상 객체에 대한 참조입니다. 엄격 모드에서는 어떤 값이든 될 수 있습니다. 값이 어떻게 결정되는지에 대한 자세한 내용은 아래 설명을 참고하세요.

설명 (Description)

this의 값은 그것이 나타나는 컨텍스트(함수, 클래스, 전역)에 따라 달라집니다.

함수 컨텍스트 (Function context)

함수 내부에서 this의 값은 함수가 어떻게 호출되는지에 따라 달라집니다. 이를 함수의 숨겨진 매개변수라고 생각하세요 — 함수 정의에 선언된 매개변수처럼, this는 함수 본문이 평가될 때 언어가 만들어 주는 바인딩입니다.

일반 함수(화살표 함수, 바인딩 함수 등이 아닌)의 경우 this 값은 함수가 접근되는 객체입니다. 즉, 함수 호출이 obj.f() 형태라면 thisobj를 가리킵니다. 예를 들어:

function getThis() {
  return this;
}

const obj1 = { name: "obj1" };
const obj2 = { name: "obj2" };

obj1.getThis = getThis;
obj2.getThis = getThis;

console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }

함수는 같지만 호출 방식에 따라 this 값이 다름을 주목하세요. 이는 함수 매개변수가 동작하는 방식과 유사합니다.

this의 값은 함수를 고유 속성(own property)으로 가진 객체가 아니라, 함수를 호출하는 데 사용된 객체입니다. 이는 프로토타입 체인 위에 있는 객체의 메서드를 호출해 증명할 수 있습니다.

const obj3 = {
  __proto__: obj1,
  name: "obj3",
};

console.log(obj3.getThis()); // { name: 'obj3' }

this의 값은 함수가 생성 시점에 객체에 정의되었더라도 항상 호출 방식에 따라 달라집니다:

const obj4 = {
  name: "obj4",
  getThis() {
    return this;
  },
};

const obj5 = { name: "obj5" };

obj5.getThis = obj4.getThis;
console.log(obj5.getThis()); // { name: 'obj5', getThis: [Function: getThis] }

메서드가 접근되는 값이 원시(primitive) 값이라면 this 역시 원시 값이 됩니다 — 단, 함수가 엄격 모드일 때만 그렇습니다.

function getThisStrict() {
  "use strict"; // Enter strict mode
  return this;
}

// Only for demonstration — you should not mutate built-in prototypes
Number.prototype.getThisStrict = getThisStrict;
console.log(typeof (1).getThisStrict()); // "number"

함수가 어떤 것에도 접근되지 않고 호출되면 thisundefined가 됩니다 — 단, 함수가 엄격 모드일 때만 그렇습니다.

console.log(typeof getThisStrict()); // "undefined"

비엄격 모드에서는 this 치환(substitution)이라는 특별한 과정 덕분에 this의 값이 항상 객체가 됩니다. 즉:

  • 함수가 thisundefined 또는 null로 설정된 채 호출되면, thisglobalThis로 치환됩니다.
  • 함수가 this가 원시 값으로 설정된 채 호출되면, this는 그 원시 값의 래퍼(wrapper) 객체로 치환됩니다.
function getThis() {
  return this;
}

// Only for demonstration — you should not mutate built-in prototypes
Number.prototype.getThis = getThis;
console.log(typeof (1).getThis()); // "object"
console.log(getThis() === globalThis); // true

일반적인 함수 호출에서 this는 함수의 접두어(부호 앞부분)를 통해 매개변수처럼 암시적으로 전달됩니다. Function.prototype.call(), Function.prototype.apply(), 또는 Reflect.apply() 메서드를 사용해 this 값을 명시적으로 설정할 수도 있습니다. Function.prototype.bind()를 사용하면 호출 방식과 무관하게 변하지 않는 특정 this 값을 가진 새 함수를 만들 수 있습니다. 이 메서드들을 사용할 때도 함수가 비엄격 모드라면 위의 this 치환 규칙이 여전히 적용됩니다.

콜백 (Callbacks)

함수가 콜백으로 전달되면 this의 값은 콜백이 어떻게 호출되는지에 따라 달라지며, 이는 API의 구현자가 결정합니다. 콜백은 보통 this 값이 undefined인 채로 호출됩니다(어떤 객체에도 붙이지 않고 직접 호출). 이는 함수가 비엄격 모드라면 this 값이 전역 객체(globalThis)가 된다는 뜻입니다. 이는 배열의 반복 메서드, Promise() 생성자 등에서 해당됩니다.

function logThis() {
  "use strict";
  console.log(this);
}

[1, 2, 3].forEach(logThis); // undefined, undefined, undefined

일부 API는 콜백을 호출할 때 this 값을 설정할 수 있게 해 줍니다. 예를 들어 모든 배열 반복 메서드와 Set.prototype.forEach() 같은 관련 메서드는 선택적 thisArg 매개변수를 받습니다.

[1, 2, 3].forEach(logThis, { name: "obj" });
// { name: 'obj' }, { name: 'obj' }, { name: 'obj' }

때때로 콜백은 undefined 이외의 this 값으로 호출되기도 합니다. 예를 들어 JSON.parse()reviver 매개변수와 JSON.stringify()replacer 매개변수는 둘 다 해당 속성이 속한 객체를 this로 해서 호출됩니다.

화살표 함수 (Arrow functions)

화살표 함수에서 this는 둘러싼 어휘 컨텍스트의 this 값을 유지합니다. 즉, 화살표 함수 본문을 평가할 때 언어는 새로운 this 바인딩을 만들지 않습니다.

예를 들어 전역 코드에서 this는 전역 컨텍스트 바인딩 때문에 엄격 여부와 무관하게 항상 globalThis입니다:

const globalObject = this;
const foo = () => this;
console.log(foo() === globalObject); // true

화살표 함수는 주변 스코프의 this 값에 대한 클로저(closure)를 만듭니다. 즉, 화살표 함수는 "자동 바인딩(auto-bound)"된 것처럼 동작합니다 — 어떻게 호출되든 this는 함수가 생성될 당시의 값(위 예에서는 전역 객체)에 바인딩됩니다. 다른 함수 안에서 만들어진 화살표 함수에도 동일하게 적용됩니다: 그 this는 둘러싼 어휘 컨텍스트의 것을 유지합니다.

또한 call(), bind(), apply()를 사용해 화살표 함수를 호출할 때 thisArg 매개변수는 무시됩니다. 다만 다른 인자들은 이 메서드들로 전달할 수 있습니다.

const obj = { name: "obj" };

// Attempt to set this using call
console.log(foo.call(obj) === globalObject); // true

// Attempt to set this using bind
const boundFoo = foo.bind(obj);
console.log(boundFoo() === globalObject); // true
생성자 (Constructors)

함수가 생성자(new 키워드)로 사용되면, 생성자 함수가 어느 객체에서 접근되는지와 무관하게 this는 새로 생성되는 객체에 바인딩됩니다. 생성자가 다른 비원시 값을 반환하지 않는 한 this의 값은 new 표현식의 값이 됩니다.

function C() {
  this.a = 37;
}

let o = new C();
console.log(o.a); // 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // 38

두 번째 예(C2)에서는 생성 과정에서 객체가 반환되었으므로, this가 바인딩되었던 새 객체는 버려집니다. (이는 본질적으로 this.a = 37; 문장을 죽은 코드(dead code)로 만듭니다. 완전히 죽은 코드는 아닌데 실행은 되기 때문이며, 외부 효과 없이 제거할 수 있을 뿐입니다.)

super

함수가 super.method() 형태로 호출되면, 메서드 함수 안의 thissuper.method() 호출 주변의 this 값과 같으며, 일반적으로 super가 가리키는 객체와는 같지 않습니다. 이는 super.method가 위의 예들 같은 객체 멤버 접근이 아니라, 바인딩 규칙이 다른 특별한 문법이기 때문입니다. 예제는 super 참조 문서를 참고하세요.

클래스 컨텍스트 (Class context)

클래스는 정적(static)과 인스턴스(instance) 두 컨텍스트로 나눌 수 있습니다. 생성자, 메서드, 인스턴스 필드 이니셜라이저(public 또는 private)는 인스턴스 컨텍스트에 속합니다. 정적 메서드, 정적 필드 이니셜라이저, 정적 초기화 블록은 정적 컨텍스트에 속합니다. this 값은 각 컨텍스트에서 다릅니다.

클래스 생성자는 항상 new로 호출되므로 함수 생성자와 동일하게 동작합니다: this 값은 생성되는 새 인스턴스입니다. 클래스 메서드는 객체 리터럴의 메서드처럼 동작합니다 — this 값은 메서드가 접근된 객체입니다. 메서드가 다른 객체로 옮겨지지 않았다면 this는 일반적으로 클래스의 인스턴스입니다.

정적 메서드는 this의 속성이 아닙니다. 그것들은 클래스 자체의 속성입니다. 따라서 보통 클래스에서 접근되며, this는 클래스(또는 하위 클래스)의 값입니다. 정적 초기화 블록도 this가 현재 클래스로 설정된 채 평가됩니다.

필드 이니셜라이저도 클래스의 컨텍스트에서 평가됩니다. 인스턴스 필드는 this가 생성 중인 인스턴스로 설정된 채 평가되고, 정적 필드는 this가 현재 클래스로 설정된 채 평가됩니다. 이것이 바로 필드 이니셜라이저의 화살표 함수가 인스턴스 필드에서는 인스턴스에, 정적 필드에서는 클래스에 바인딩되는 이유입니다.

class C {
  instanceField = this;
  static staticField = this;
}

const c = new C();
console.log(c.instanceField === c); // true
console.log(C.staticField === C); // true
파생 클래스 생성자 (Derived class constructors)

기본 클래스 생성자와 달리 파생(derived) 생성자는 처음에 this 바인딩이 없습니다. super()를 호출하면 생성자 안에 this 바인딩이 생기며, 본질적으로 다음 코드 줄을 평가하는 효과가 있는데 여기서 Base는 기본 클래스입니다:

this = new Base();

경고: super()를 호출하기 전에 this를 참조하면 오류가 발생합니다.

파생 클래스는 생성자가 객체를 반환하는 경우(this 값이 덮어써지는 경우)나 클래스에 생성자가 전혀 없는 경우가 아니라면, super()를 호출하기 전에 반환해서는 안 됩니다.

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return { a: 5 };
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

전역 컨텍스트 (Global context)

전역 실행 컨텍스트(함수나 클래스 바깥; 전역 스코프에 정의된 블록이나 화살표 함수 안에 있을 수 있음)에서 this 값은 스크립트가 어떤 실행 컨텍스트에서 실행되는지에 따라 달라집니다. 콜백처럼 this 값은 런타임 환경(호출자)이 결정합니다.

스크립트의 최상위 수준에서 this는 엄격 모드이든 아니든 globalThis를 가리킵니다. 이는 일반적으로 전역 객체와 동일합니다 — 예를 들어 소스가 HTML <script> 요소 안에 넣어져 스크립트로 실행된다면 this === window입니다.

참고: globalThis는 일반적으로 전역 객체와 같은 개념입니다(즉, globalThis에 속성을 추가하면 전역 변수가 됩니다) — 이는 브라우저와 Node에서 해당되지만, 호스트가 전역 객체와 무관한 다른 값을 globalThis로 제공하는 것도 허용됩니다.

// In web browsers, the window object is also the global object:
console.log(this === window); // true

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

소스가 모듈로 로드되면(HTML에서는 <script> 태그에 type="module"을 추가하는 것을 의미), this는 최상위 수준에서 항상 undefined입니다.

소스가 eval()로 실행되면, 직접 eval(direct eval)은 둘러싼 컨텍스트와 같은 this를 갖고, 간접 eval(indirect eval)은 globalThis를 갖습니다(마치 별도의 전역 스크립트에서 실행되는 것처럼).

function test() {
  // Direct eval
  console.log(eval("this") === this);
  // Indirect eval, non-strict
  console.log(eval?.("this") === globalThis);
  // Indirect eval, strict
  console.log(eval?.("'use strict'; this") === globalThis);
}

test.call({ name: "obj" }); // Logs 3 "true"

일부 소스 코드는 전역 스코프처럼 보이지만 실행될 때 실제로는 함수로 감싸집니다. 예를 들어 Node.js CommonJS 모듈은 함수로 감싸지고 this 값이 module.exports로 설정된 채 실행됩니다. 이벤트 핸들러 속성은 this가 부착된 요소로 설정된 채 실행됩니다.

객체 리터럴은 this 스코프를 만들지 않습니다 — 객체 안에 정의된 함수(메서드)만 만듭니다. 객체 리터럴에서 this를 사용하면 주변 스코프의 값을 상속받습니다.

const obj = {
  a: this,
};

console.log(obj.a === window); // true

예제 (Examples)

함수 컨텍스트에서의 this

this 매개변수의 값은 함수가 어떻게 정의되었는지가 아니라 어떻게 호출되는지에 따라 달라집니다.

// An object can be passed as the first argument to 'call'
// or 'apply' and 'this' will be bound to it.
const obj = { a: "Custom" };

// Variables declared with var become properties of 'globalThis'.
var a = "Global";

function whatsThis() {
  return this.a; // 'this' depends on how the function is called
}

whatsThis(); // 'Global'; the 'this' parameter defaults to 'globalThis' in non–strict mode
obj.whatsThis = whatsThis;
obj.whatsThis(); // 'Custom'; the 'this' parameter is bound to obj

call()apply()를 사용하면 this의 값을 명시적 매개변수처럼 전달할 수 있습니다.

function add(c, d) {
  return this.a + this.b + c + d;
}

const o = { a: 1, b: 3 };

// The first argument is bound to the implicit 'this' parameter; the remaining
// arguments are bound to the named parameters.
add.call(o, 5, 7); // 16

// The first argument is bound to the implicit 'this' parameter; the second
// argument is an array whose members are bound to the named parameters.
add.apply(o, [10, 20]); // 34

this와 객체 변환

비엄격 모드에서 객체가 아닌 this 값으로 함수가 호출되면, this 값은 객체로 치환됩니다. nullundefinedglobalThis가 됩니다. 7이나 'foo' 같은 원시 값은 관련 생성자를 사용해 객체로 변환되므로, 원시 숫자 7Number 래퍼 클래스로, 문자열 'foo'String 래퍼 클래스로 변환됩니다.

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
bar.call("foo"); // [object String]
bar.call(undefined); // [object Window]

bind() 메서드

f.bind(someObject)를 호출하면 f와 같은 본문과 스코프를 가진 새 함수가 만들어지지만, 함수가 어떻게 호출되든 this의 값은 bind의 첫 번째 인자에 영구적으로 바인딩됩니다.

function f() {
  return this.a;
}

const g = f.bind({ a: "azerty" });
console.log(g()); // azerty

const h = g.bind({ a: "yoo" }); // bind only works once!
console.log(h()); // azerty

const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37 37 azerty azerty

화살표 함수에서의 this

화살표 함수는 둘러싼 실행 컨텍스트의 this 값에 대한 클로저를 만듭니다. 다음 예제에서 우리는 this의 값을 반환하는 함수를 반환하는 메서드 getThisGetter를 가진 obj를 만듭니다. 반환된 함수는 화살표 함수로 생성되므로, 그 this는 둘러싼 함수의 this에 영구적으로 바인딩됩니다. getThisGetter 내부의 this 값은 호출에서 설정할 수 있으며, 이는 차례로 반환된 함수의 반환값을 설정합니다. getThisGetter가 비엄격 함수라고 가정합니다(즉, 비엄격 스크립트에 포함되고 클래스나 엄격 함수 안에 더 중첩되지 않음).

const obj = {
  getThisGetter() {
    const getter = () => this;
    return getter;
  },
};

getThisGetterobj의 메서드로 호출할 수 있는데, 이렇게 하면 본문 안에서 thisobj에 바인딩됩니다. 반환된 함수는 변수 fn에 할당됩니다. 이제 fn을 호출하면 반환되는 this 값은 여전히 getThisGetter 호출로 설정된 값, 즉 obj입니다. 반환된 함수가 화살표 함수가 아니었다면, getThisGetter가 비엄격이므로 이러한 호출은 this 값을 globalThis로 만들 것입니다.

const fn = obj.getThisGetter();
console.log(fn() === obj); // true

하지만 obj의 메서드를 호출하지 않고 바인딩을 풀면 조심해야 합니다. getThisGetter는 여전히 가변적인 this 값을 가진 메서드이기 때문입니다. 다음 예에서 fn2()()를 호출하면 globalThis를 반환하는데, 이는 fn2()가 어떤 객체에도 붙지 않고 호출되어 thisglobalThis이기 때문입니다.

const fn2 = obj.getThisGetter;
console.log(fn2()() === globalThis); // true in non-strict mode

이 동작은 콜백을 정의할 때 매우 유용합니다. 보통 각 함수 표현식은 고유한 this 바인딩을 만들어 상위 스코프의 this 값을 가립니다. 이제 this 값에 신경 쓰지 않는다면 함수를 화살표 함수로 정의하고, 필요한 곳(예: 클래스 메서드)에서만 this 바인딩을 만들 수 있습니다. setTimeout() 예제를 참고하세요.

getter 또는 setter에서의 this

getter와 setter에서의 this는 속성이 정의된 객체가 아니라 속성이 접근된 객체에 기반합니다. getter나 setter로 사용되는 함수는 속성이 설정되거나 얻어지는 객체에 this가 바인딩됩니다.

function sum() {
  return this.a + this.b + this.c;
}

const o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  },
};

Object.defineProperty(o, "sum", {
  get: sum,
  enumerable: true,
  configurable: true,
});

console.log(o.average, o.sum); // 2 6

DOM 이벤트 핸들러에서의 this

함수가 이벤트 핸들러로 사용되면 그 this 매개변수는 리스너가 배치된 DOM 요소에 바인딩됩니다(일부 브라우저는 addEventListener() 이외의 메서드로 동적으로 추가된 리스너에 대해 이 관례를 따르지 않습니다).

// When called as a listener, turns the related element blue
function bluify(e) {
  // Always true
  console.log(this === e.currentTarget);
  // true when currentTarget and target are the same object
  console.log(this === e.target);
  this.style.backgroundColor = "#A5D9F3";
}

// Get a list of every element in the document
const elements = document.getElementsByTagName("*");

// Add bluify as a click listener so when the
// element is clicked on, it turns blue
for (const element of elements) {
  element.addEventListener("click", bluify);
}

인라인 이벤트 핸들러에서의 this

코드가 인라인 이벤트 핸들러 속성에서 호출되면, 그 this는 리스너가 배치된 DOM 요소에 바인딩됩니다:

<button onclick="alert(this.tagName.toLowerCase());">Show this</button>

위 alert는 button을 표시합니다. 다만 바깥 스코프만 이 방식으로 this가 바인딩된다는 점에 유의하세요:

<button onclick="alert((function () { return this; })());">
  Show inner this
</button>

이 경우 내부 함수의 this 매개변수는 globalThis에 바인딩됩니다(즉, 호출에서 this가 전달되지 않는 비엄격 모드의 기본 객체).

클래스에서의 바인딩된 메서드 (Bound methods in classes)

일반 함수와 마찬가지로 메서드 내부의 this 값은 어떻게 호출되는지에 따라 달라집니다. 때로는 클래스 안의 this가 항상 클래스 인스턴스를 가리키도록 이 동작을 덮어쓰는 것이 유용합니다. 이를 위해 생성자에서 클래스 메서드를 바인딩하면 됩니다:

class Car {
  constructor() {
    // Bind sayBye but not sayHi to show the difference
    this.sayBye = this.sayBye.bind(this);
  }

  sayHi() {
    console.log(`Hello from ${this.name}`);
  }

  sayBye() {
    console.log(`Bye from ${this.name}`);
  }

  get name() {
    return "Ferrari";
  }
}

class Bird {
  get name() {
    return "Tweety";
  }
}

const car = new Car();
const bird = new Bird();

// The value of 'this' in methods depends on their caller
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// For bound methods, 'this' doesn't depend on the caller
bird.sayBye = car.sayBye;
bird.sayBye(); // Bye from Ferrari

참고: 클래스는 항상 엄격 모드입니다. undefinedthis로 메서드를 호출하면, 메서드가 this의 속성에 접근하려 할 때 오류가 발생합니다.

const carSayHi = car.sayHi;
carSayHi(); // TypeError because the 'sayHi' method tries to access 'this.name', but 'this' is undefined in strict mode.

다만 자동 바인딩 메서드(auto-bound method)는 클래스 속성에 화살표 함수를 사용할 때와 같은 문제를 겪는다는 점에 유의하세요: 클래스의 각 인스턴스는 메서드의 사본을 갖게 되어 메모리 사용량이 늘어납니다. 꼭 필요한 경우에만 사용하세요. 또한 Intl.NumberFormat.prototype.format()의 구현을 모방할 수도 있습니다: 접근 시 바인딩된 함수를 반환하고 저장하는 getter로 속성을 정의하면, 함수가 한 번만, 필요할 때만 생성됩니다.

with 문에서의 this

with 문은 폐기(deprecated)되었고 엄격 모드에서 사용할 수 없지만, 여전히 정상적인 this 바인딩 규칙의 예외 역할을 합니다. 함수가 with 문 안에서 호출되고 그 함수가 스코프 객체의 속성이라면, obj. 접두어가 있는 것처럼 this 값이 스코프 객체에 바인딩됩니다.

const obj = {
  foo() {
    return this;
  },
};

with (obj) {
  console.log(foo() === obj); // true
}

명세 (Specifications)

this 키워드는 ECMAScript 언어 명세에 정의되어 있습니다.

브라우저 호환성 (Browser compatibility)

이 기능은 대부분의 현대 브라우저에서 널리 지원됩니다(Baseline Widely available). 자세한 호환성 표는 MDN의 브라우저 호환성 섹션을 참고하세요.

더 알아보기