JavaScript - 전역 객체

JavaScript 전역 객체에 대한 소개

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript 전역 객체의 세계로 흥미로운 여정을 떠납니다. 이 객체들을 JavaScript 우주의 VIP로 상상해보세요 - 어디서든 도와주기 위해 항상 주변에 있죠. 이제 이 omnipresent한 존재들의 힘을 풀어보도록 가시겠습니다!

JavaScript - Global Object

전역 객체란 무엇인가요?

JavaScript의 전역 객체는 프로그래밍의 스위스 아ー�์미니Knife와도 같습니다 - 항상 사용할 수 있는 다재다능한 도구입니다. 이 객체들은 JavaScript를 실행시키기 시작할 때 자동으로 생성되며, 코드 어디서나 접근할 수 있습니다. 이들을 도와주는 가까운 비서로 생각해보세요.

Window 객체: 전역 객체의 왕

웹 브라우저에서는 window 객체가 모든 전역 객체의 왕입니다. 이는 웹 페이지의 모든 일을 감독하는 보스입니다. 간단한 예제를 보겠습니다:

console.log(window.innerWidth);
console.log(window.innerHeight);

브라우저에서 이 코드를 실행하면 브라우저 창의 너비와 높이를 표시합니다. 멋지죠? 웹 페이지에 내장된 측정 테이프 같은 것입니다!

전역 객체와 그 메서드의 예제

이제 가장 흔히 사용되는 전역 객체와 그 메서드를 탐구해보겠습니다. 이들을 통해 프로그래밍 생활이 더 쉬워질 것입니다.

1. Math 객체: 수학의 동료

Math 객체는 항상 손쉽게 사용할 수 있는 초보적 계산기입니다. 예제를 몇 가지 보여드리겠습니다:

console.log(Math.PI); // 출력: 3.141592653589793
console.log(Math.round(4.7)); // 출력: 5
console.log(Math.random()); // 출력: 0과 1 사이의 임의 수

이 예제에서 우리는 Math 객체를 사용하여 PI의 값을 접근하고, 숫자를 둘러매고, 임의의 숫자를 생성합니다. 수학 천재 비서가 있다는 것 같죠!

2. Date 객체: 시간 여행의 동반자

Date 객체는 날짜와 시간을 다루는 데 도움을 줍니다. 시간 기계를 코드에 넣는 것과도 같습니다!

let today = new Date();
console.log(today.getFullYear()); // 출력: 현재 연도 (예: 2023)
console.log(today.getMonth()); // 출력: 현재 월 (0-11)
console.log(today.getDate()); // 출력: 현재 월의 날짜

이 코드는 현재 날짜와 시간을 나타내는 새로운 Date 객체를 생성하고, 그 특정 부분을 추출합니다. 시간 여행 동반자에게 "이제는 몇 년인가요?"라고 물어보는 것과도 같습니다.

3. String 객체: 텍스트 조작자

String 객체는 텍스트를 다루는 데 유용한 도우미입니다. 다음의 편리한 메서드를 확인해보세요:

let message = "Hello, World!";
console.log(message.length); // 출력: 13
console.log(message.toUpperCase()); // 출력: HELLO, WORLD!
console.log(message.split(", ")); // 출력: ["Hello", "World!"]

여기서 우리는 String 객체의 메서드를 사용하여 문자 수를 계산하고, 메시지를 대문자로 변환하고, 메시지를 부분으로 나눕니다. 텍스트에 능숙한 친구가 있어서 다양한 방법으로 단어를 조작할 수 있습니다!

JavaScript 전역 객체를 사용한 폴리필

이제 더 고급 개념에 대해 이야기해보겠습니다: 폴리필. 두려워 말아요 - 나중에 설명해드릴게요!

폴리필은 구식과 최신 JavaScript 사이의 다리입니다. 이를 통해 더 오래된 브라우저에서도 새로운 JavaScript 기능을 사용할 수 있습니다. 전역 객체는 폴리필을 만드는 데 중요한 역할을 합니다.

다음은 Array.prototype.includes 메서드의 폴리필 예제입니다:

if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}

var o = Object(this);
var len = o.length >>> 0;

if (len === 0) {
return false;
}

var n = fromIndex | 0;
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

while (k < len) {
if (o[k] === searchElement) {
return true;
}
k++;
}
return false;
};
}

이 코드는 includes 메서드가 Array.prototype에 존재하지 않는지 확인하고, 존재하지 않으면 이 메서드를 추가하여 includes를 구식 브라우저에서도 사용할 수 있게 합니다. 구식 브라우저에게 새로운 기술을 가르치는 것과도 같습니다!

결론

그렇습니다, 내 사랑하는 학생들이여! 우리는 JavaScript 전역 객체의 세계를 빠르게 여행했습니다. 기본부터 고급 개념까지. 기억하세요, 이 전역 객체들은 JavaScript 세계에서 항상 도와주는 신뢰할 수 있는 동반자입니다.

코딩 여정을 계속하면서, 이 전역 객체들을 점점 더 자주 사용하게 될 것입니다. 그들은 마스터 목수의 도구 상자에 있는 도구들처럼 - 사용할수록 그들의 힘과 다재다능성을 더욱 감사하게 느끼게 될 것입니다.

계속 연습하고, 탐구하고, 가장 중요한 것은 JavaScript를 즐기세요! 누가 알겠는가?也许有一天你会创造出自己的惊人全局对象，未来的程序员会学习它。 즐겁게 코딩하세요!



이상이 한국어로 번역된 내용입니다. 원본의 의미와 분위기, 그리고 미세한 차이를 유지하려고 노력했습니다.

Credits: Image by storyset