JavaScript에서 'z'['toUpperCase']()가 작동하는 방식과 그 이유

JavaScript에서 'z'['toUpperCase']()의 작동 원리

JavaScript의 toUpperCase() 메서드는 문자열을 대문자로 변환하는 데 사용됩니다. 흥미로운 점은 문자열 리터럴 'z'처럼 원시 값(primitive value)인데도 객체처럼 메서드에 접근하고 호출할 수 있다는 것입니다.

일반적인 점 표기법

보통 다음과 같이 점 표기법(dot notation)을 사용해 대문자로 변환합니다.

alert('z'.toUpperCase());

대괄호 표기법 사용하기

같은 메서드를 대괄호 표기법(bracket notation)으로도 접근할 수 있습니다.

'z'['toUpperCase'];

속성에 접근한 뒤 실제로 호출하려면 괄호를 붙여 다음과 같이 작성합니다.

'z'['toUpperCase']();

이 코드는 앞서 살펴본 일반적인 방식과 결과가 완전히 동일합니다. 즉, 'Z'라는 대문자 값이 반환되어 화면에 표시됩니다.

왜 이런 방식이 가능할까요?

JavaScript에서 문자열 원시 값은 본래 메서드를 직접 가지고 있지 않습니다. 하지만 원시 값에 대해 속성이나 메서드에 접근하려고 하면, JavaScript 엔진은 자동으로 해당 값을 임시 String 객체로 감싸서 처리합니다. 이를 래퍼 객체(wrapper object)라고 부릅니다.

즉, 'z'['toUpperCase']()는 내부적으로 new String('z').toUpperCase()와 유사한 방식으로 해석되며, 메서드 실행이 끝나면 임시 객체는 자동으로 제거됩니다.

또한 점 표기법(obj.prop)과 대괄호 표기법(obj['prop'])은 기능적으로 동일합니다. 차이가 있다면 대괄호 표기법은 속성 이름을 문자열로 전달한다는 점뿐입니다. 따라서 'z'['toUpperCase']()는 'z'.toUpperCase()와 정확히 같은 동작을 수행하는 것입니다.