📌GlobalThis란?
자바스크립트에서 전역 객체에 접근하기 위한 표준화된 방법입니다. 이를 통해 어떤 환경에서든 전역 객체에 일관된 방식으로 접근할 수 있습니다.
🔎 전역 객체(Global Object)
📁 전역 변수(Global Variable)
📁 함수(Function)
🔎 폴리필(Polyfill)
📝전역 객체(Global Object)
전역객체란 어떤 환경에서도 접근할 수 있는 객체를 말합니다. 전역객체 이름은 자바스크립트를 사용하는 환경에 따라 명칭이 다릅니다.
브라우저 환경에서는 ' Window ' , Node.js 환경에서는 ' Global ' 라는 이름을 가집니다.
❗하지만 ' GlobalThis ' 명칭을 표준화한다는 내용이 생겨서 어떤 환경에서든 일관된 방식으로 전역 객체에 접근 가능하게 되었습니다!
전역객체에 프로퍼티 예제로는 아래와 같습니다.
alert("Hello");
// 위와 동일하게 동작합니다.
window.alert("Hello");console.log("Hello");등등..이 코드들은 어떤 환경에서든 사용할 수 있는 공통적인 기능을 제공합니다.
📁전역 변수(Global Variable)
전역 변수(Global Variable)는 어떤 스코프에서든 접근 가능한 변수를 말합니다.
전역 변수는 아래와 같이 작성할 수 있는데요,
var globalVariable = 'I am a global variable';
이 변수는 프로그램 전체에서 유효합니다.
과도한 전역 변수 사용은 코드의 가독성과 유지보수성을 떨어뜨릴 수 있습니다. 가능하면 지역 변수를 사용하고, 전역 변수는 필요한 경우에만 사용하는 것이 좋습니다.
📁전역 함수(Global Function)
전역 함수(Global Function) 프로그램 전체에서 어디서든 호출 가능한 함수를 말합니다.
// 전역 함수 선언
function globalFunction() {
console.log('I am a global function');
}
// 어디서든 호출 가능
globalFunction();
❗아래의 사진은 객체안에 Method를 사용하는 방법입니다.
❗실무에선 3번째 'concise method' 방법을 많이 쓴다고 하니 참고합시다!!
📝폴리필(Polyfill)
폴리필(Polyfill)은 웹 개발에서 사용되는 용어로, 구현되지 않은 웹 브라우저의 기능을 지원하기 위해 사용되는 코드 조각을 말합니다.
주로 오래된 브라우저나 특정 환경에서 새로 도입된 자바스크립트 기능을 지원하기 위해 폴리필이 사용됩니다.
폴리필은 아래와 같이 사용할 수 있습니다.
if (!window.Promise) {
alert("구식 브라우저를 사용 중이시군요!");
}❗주의: 최신 브라우저에서는 폴리필을 사용할 필요가 없으며, 브라우저 자체에서 지원하는 경우 해당 폴리필을 사용하지 않아도 됩니다. 최신 브라우저에서는 지원되는 기능을 사용하고, 오래된 브라우저에서는 필요한 폴리필을 제공하여 호환성을 확보하는 것이 일반적인 접근 방식입니다.
🔗chatGPT 에 나오는 예문
📌Data Types란?
🔎원시(Primitive) 데이터 타입
📁숫자형(Number)
📁문자형(String)
📁BigInt
📁불린형(Boolean)
📁null 값 , undefined 값
🔎객체와 심볼
📝원시(Primitive) 데이터 타입
원시 데이터 타입(Primitive Data Types)은 자바스크립트에서 값을 단순하게 나타내는 기본적인 데이터 유형을 말합니다.
아래는 원시 데이터 타입의 예시입니다.
// 원시 데이터 타입의 예시
let numberVar = 42; // 숫자 타입
let stringVar = 'Hello'; // 문자열 타입
let booleanVar = true; // 불리언 타입
let nullVar = null; // null 타입
let undefinedVar; // undefined 타입❗원시 데이터 타입은 단일 값을 나타내기 때문에 간단하고 빠르게 처리되며, 변수에 할당된 값이 변경되지 않도록 보장합니다. 이와는 대조적으로, 객체 데이터 타입은 여러 속성을 가지는 복합 데이터 구조를 나타내므로 복사 시에 참조가 복사됩니다.
🔗chatGPT 에 나오는 예문
📁숫자형(Number)
숫자형(number type) 은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다.
숫자형 말그래도 숫자를 활용한 데이터라서 수학적인 연산도 가능합니다.
숫자형은 특징이 두가지 있는데요 아래와 같습니다.
Infinity와 -Infinity
- 무한대를 나타내는 값으로, 어떤 수를 0으로 나누거나, Infinity에 0을 곱하거나, Infinity에서 Infinity를 뺄셈하는 등의 연산을 수행하면 Infinity 또는 -Infinity가 반환됩니다.
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity
NaN (Not-a-Number)
- 숫자가 아님을 나타내는 값으로, 정의되지 않거나 수학적으로 정의할 수 없는 연산의 결과일 때 반환됩니다.
console.log(0 / 0); // NaN
❗Infinity, -Infinity, NaN같은 숫자형들은'특수 숫자 값(special numeric value)'이으로 취급됩니다
📁문자형(String)
문자형(String)은 자바스크립트에서 텍스트 데이터를 나타내는 데이터 타입입니다.
자바스크립트에선 문자형을 '따옴표'로 표기합니다.
let str = "Hello"; //큰따옴표
let str2 = 'Single quotes are ok too'; // 작은따옴표
let phrase = `can embed another ${str}`; //백틱 (backtick)
문자열은 '+' 연산자로 연결 가능합니다.
let firstName = 'baduk';
let lastName = 'lee';
let fullName = firstName + ' ' + lastName; // 'baduk lee'
또한 문자열의 길이도 프로퍼티를 통해 알 수 있는데요,
let a = 'hello, world';
console.log(a.length); //12
.length라는 프로퍼티를 통해 길이를 알 수 있습니다.
📁BigInt
사용하면 정수의 범위에 제약을 받지 않고 아주 큰 정수를 표현할 수 있습니다.
일반적인 정수와는 구분하기 위해 정수 값 뒤에 "n"을 붙여서 표현됩니다.
const bigInt = 1234567890123456789012345678901234567890n;❗ 호환성 이슈로 인해 Firefox, Chrome, Edge, Safari에서만 BigInt를 지원합니다. IE에선 지원하지 않습니다.
📁불린형(Boolean)
자바스크립트의 데이터 타입 중 하나로, 논리적인 참(True) 또는 거짓(False)을 나타냅니다.
불린형타입의 예시는 아래와 같습니다.
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false📁null 값 , undefined 값
이 데이터 타입은 아래와 같이 설명할수있습니다.
null : 값이 없음 //값이 없는 상태를 의도적으로 부여
undefinded : 값이 정의되지 않음 // 의도하지 않음❗그리구 가장 중요한짤 한장으로 이 데이터 타입의 설명은 마무리 하겠습니다.
📝객체와 심볼
객체 (Object):
자바스크립트에서 객체(Object)는 속성(key)과 값(value)의 쌍으로 이루어진 컬렉션입니다. 객체는 여러 종류의 데이터 타입을 포함할 수 있으며, 키를 통해 값에 접근할 수 있습니다. 객체는 중괄호 {}를 사용하여 생성하며, 키와 값은 콜론 :으로 연결합니다.
심볼 (Symbol):
ES6부터 도입된 심볼(Symbol)은 유일하고 변경 불가능한 데이터 타입으로, 주로 객체의 속성 키로 사용됩니다. 심볼은 Symbol() 생성자 함수를 사용하여 생성하며, 각 생성된 심볼은 서로 다릅니다.
🔗chatGPT 에 나오는 예문
객체는 수업중에서 많이 나올 내용이므로 여기선 가볍게 이론만 집고 넘어갑니다.
심볼을 쓰는 방법은 아래와 같습니다.
강사님께서 심볼은 실무에서 만져볼일이 없어 이론만 알고 넘어가면된다는 말씀이 있어서,,저두 여기까지 마무리 하겠습니다,,후후,,
🔗참고 사이트
📍chatGPT
📍Javascript info
📍여러 블로그 포스팅글,,,
