Function: displayName

비표준: 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

Function 인스턴스의 선택 속성인 displayName 함수의 표시 이름을 설정합니다.

값

displayName 속성은 모든 함수에 대해 초기에 존재하는 것이 아니라 코드 작성자가 추가하는 것입니다. 표시의 일환으로, 이는 문자열 값을 가집니다.

설명

만일 displayName 속성이 존재한다면 콘솔과 프로파일러는 이를 name 속성보다 우선하여 사용하는 것을 선호합니다.

브라우저 사이에서는 오직 파이어폭스 콘솔에서만 이 속성을 활용합니다. 리액트 개발자 도구에서도 displayName 속성을 컴포넌트 트리를 표시할 때 사용합니다.

파이어폭스에서는 아래 패턴들이 감지되면 익명 JavaScript 함수 네이밍 컨벤션 알고리즘을 활용하여 displayName 를 복호화하려는 기본적인 시도가 있습니다.

만일 displayName 이 영문자와 숫자와 _ , $ 로 끝나는 경우, 해당 접미사 중 가장 긴 부분이 표시됩니다.
만일 displayName 이 [] 로 감싸진 문자들로 끝나는 경우, 대괄호를 제외한 해당 문자열이 표시됩니다.
만일 displayName 이 영숫자와 _ 로 구성된 문자열 다음에 /, ., 또는 < 가 붙어서 끝나는 경우, 끝에 있는 /, ., 또는 < 문자들을 제외한 문자열이 표시됩니다.
만일 displayName 이 영문자와 숫자와 _ 로 구성된 문자열 다음에 (^) 로 끝나는 경우, (^) 없이 해당 문자열이 표시됩니다.

위 패턴과 일치하지 않는 경우에는 전체 displayName 가 표시됩니다.

예제

표시 이름 설정하기

파이어폭스 콘솔을 확인하면, function MyFunction() 과 같은 형태로 이름이 표시됩니다.

const a = function () {};
a.displayName = "MyFunction";

a; // function MyFunction()

표시 이름을 동적으로 변경하기

함수의 displayName 을 동적으로 변경할 수 있습니다.

const object = {
  // 익명
  someMethod: function someMethod(value) {
    someMethod.displayName = `someMethod (${value})`;
  },
};

console.log(object.someMethod.displayName); // undefined

object.someMethod("123");
console.log(object.someMethod.displayName); // "someMethod (123)"

표시 이름 정리하기

파이어폭스 개발자 도구에서는 displayName 속성을 표시하기 전에 몇 가지 일반적인 패턴을 정리하여 보여줍니다.

function foo() {}

function testName(name) {
  foo.displayName = name;
  console.log(foo);
}

testName("$foo$"); // function $foo$()
testName("foo bar"); // function bar()
testName("Foo.prototype.add"); // function add()
testName("foo ."); // function foo .()
testName("foo <"); // function foo <()
testName("foo?"); // function foo?()
testName("foo()"); // function foo()()

testName("[...]"); // function ...()
testName("foo<"); // function foo()
testName("foo..."); // function foo()
testName("foo(^)"); // function foo()

명세서

Not part of any standard.

브라우저 호환성

BCD tables only load in the browser

같이 보기

Function.prototype.name