1. Global 오브젝트 개요, Global 함수, 변수
Global 오브젝트 개요
- 모든
<script>를 통해 하나만 존재한다.
- new 연산자로 인스턴스를 생성할 수 없다. (하나만 존재하기 때문에 애초에 생성할 필요가 없다.)
- 모든 코드에서 공유된다. (여러 파일에서 사용할 수 있다. 파일이 달라도 전체가 하나!)
- 이름(Global)은 있지만 오브젝트 실체가 없고 오브젝트를 작성 및 사용할 수 없다.
Global 오브젝트 함수, 변수
- Global 오브젝트의 함수, 변수를 Global 함수, Global 변수라고 부른다.
- 함수 안에 작성한 것을
- 지역 함수, 로컬 함수라고 부른다.
- 지역 변수, 로컬 변수라고 부른다.
- 일반적으로 그냥 함수는 함수 안에 작성한 것을 의미한다.
- 확실히 구분을 하기 위해서는 Global 함수, 지역 함수라고 명시하는 게 좋다.
전역 객체라고 부르기도 하지만 Global은 오브젝트 이름이다. 여기서는 글로벌 오브젝트라고 표기한다.
2. Global 프로퍼티, 프로퍼티 리스트
- NaN, infinity, parseInt(), parseFloat(), eval(), encodeURI() 등
- eval() 함수는 문자열을 JS 코드로 간주한 후에 실행까지 한다. 문자열 안에 악의적인 코드를 넣는다면 문제가 될 수 있다. 이런 보안 관련 문제 때문에 eval() 함수는 되도록 쓰지 않는 것이 좋다.
Global 프로퍼티
Global 프로퍼티 종류
- NaN: Not-a-Number
- Infinity: 무한대
- undefined: undefined
- 상수 개념으로 사용된다.
delete 연산자로 삭제할 수 없다.
console.log(NaN); // NaN
console.log(Infinity); // Infinitiy
console.log(undefined); // undefined
Number.MAX_VALUE처럼 프로퍼티 앞에 오브젝트 이름을 작성해야 하지만 글로벌 오브젝트는 실체가 없으므로 프로퍼티 이름만 작성한다.- 오브젝트 이름을 작성하지 않으면 글로벌 프로퍼티로 인식한다.
- 이들은 Window 오브젝트에 저장되어 있다.
3. Global과 window의 관계
Global과 window의 관계
Global과 window 오브젝트 주체
- 글로벌 오브젝트는 JS가 주체
- window 오브젝트는 window가 주체
- 주체는 다르지만 글로벌 오브젝트의 프로퍼티와 함수가
window 오브젝트에 설정된다.
- 글로벌 오브젝트는 실체가 없는데 어딘가에 프로퍼티, 함수가 저장되어야 하기 때문
- Host 오브젝트 개념이 밑바탕에 활용되기 때문에 가능한 것이다.
- 브라우저 안에 있는 오브젝트를 JS에서 마치 자기 것처럼 쓰는 개념
4. 정수, 실수 변환
parseInt()
- 값을 정수로 변환하여 반환한다.
- ex. 123.56 -> 123
- 소수 제외하고 정수만 반환
- 값이 "123px"이면 123을 반환한다.
- 이 용도로 많이 사용된다.
- String 타입이라도 값이 숫자이면 변환된다.
- 0 또는 빈 문자열을 제외시킨다.
- 진수를 적용하여 값을 변환한다.
console.log(parseInt("-123.45")); // -123
console.log(parseInt("123px")); // 123
console.log(parseInt("12AB34")); // 12
console.log(parseInt("0012")); // 12
console.log(parseInt(" 123")); // 123, 앞의 공백 무시
console.log(parseInt()); // NaN, 파라미터를 숫자(Number) 개념으로 처리하기 때문
console.log(parseInt(13, 16)); // 19, 13을 16진수로 변환 (16 + 3)
console.log(parseInt("0x13")); // 19, 13을 16진수로 변환
parseFloat()
- 값을 실수로 변환하여 반환한다.
- 그런데 JS는 기본적으로 실수로 처리한다.
- 따라서 실수로 변환하는 것은 의미가 없지만 문자열의 실수 변환은 의미가 있다.
- 지수, 공백 변환
console.log(parseFloat("1.2e3")); // 1200
console.log(parseInt()); // NaN
5. NaN, 유한대 체크 함수
isNaN()
- 값의 NaN 여부 반환
- 숫자 값이 아니면 true, 숫자 값이면 false를 반환한다.
console.log(isNaN(null)); // null은 숫자로 변환하면 0이기 때문에 false이다.
NaN === NaN의 결과는 false 이다.
- 이는 설계 실수이다.
- ES6의
Object.is()를 사용한다.
// NaN을 비교할 때는 Object.is()를 사용하는 것이 안전하다.
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
isFinite()
- 값이
Infinity, NaN이면 false를 반환한다.
- 그렇지 않으면, 즉 finite(유한)이면 true를 반환한다.
- 값이 숫자로 변환되면 숫자로 인식한다.
// NaN
console.log(isFinite(0 / 0)); // false
// Infinity
console.log(isFinite(1 / 0)); // false
console.log(isFinite("ABC")); // false
// true가 되는 경우
console.log(isFinite(123));
console.log(isFinite("123"));
console.log(isFinite(false)); // 숫자로 변환되면 0이기 때문
6. 인코딩, 디코딩
encodeURI()
- URI를 인코딩하여 반환한다.
- Uniform Resource Idetifier
- 인코딩 제외 문자를 제외하고 "%16진수%16진수" 형태로 변환한다.
- 인코딩 제외 문자
- 영문자, 숫자
- # ; / ? : @ & = + $ , - _ . ! ~ * () 따옴표
encodeURIComponent()
- encodeURI()와 같다.
- 다만 제외 문자가 더 적다.
- ; / ? : @ & = + $ 를 인코딩한다.
decodeURI()
- 인코딩을 디코딩하여 반환한다.
- 사람이 읽기 쉬운 형태로 바꾸기 위함.
- 파라미터에 encodeURI()로 인코딩한 문자열을 작성한다.
decodeURIComponent()
- decodeURI()와 같다.
- 단, 파라미터에
encodeURIComponent()로 인코딩한 문자열을 작성한다.
7. eval() 함수
eval()
- 파라미터의 문자열을 JS 코드로 간주하여 실행한다.
- 실행 결과를 반환 값으로 사용한다.
- 값을 반환하지 않으면
undefined를 반환한다.
var result = eval("parseInt('-123.45')");
console.log(result); // -123
- 보안에 문제가 있다고 알려져 있기 때문에 사용을 권장하지 않는다.