조금 쉬운 빌트인 객체 - 빌트인 전역 함수

빌트인 전역 함수에 대해 알아보자!

빌트인 전역 함수

애플리케이션 전역에서 호출할 수 이쓴 빌트인 함수, 전역 객체의 메서드

빌트인 전역 함수의 종류

eval
isFinite
isNaN
parseFloat
parseInt
encodeURI / decodeURI
encodeURIComponent / decodeURIComponent

---

eval

JS코드를 나타내는 문자열을 인수로 전달 받는다.

• 전달 받은 문자열 코드 = 표현식 => 문자열 코드를 런타임에 평가해 값 생성
• 전달 받은 문자열 코드 = 문 => 문자열 코드를 런타임에 실행
• 문자열 코드가 여러 개의 문으로 이루어져 있다면 모든 문 실행

  eval('1+2; 3+4');    // 표현식인 문, 마지막 결과값 7만 반환
  eval('var x = 5;');    // undefined, 표현식이 아닌 문
  console.log(x);    // eval 함수에 의해 런타임에 변수 선언문이 실행되어 x 변수 선언
  const o = eval('({a:1})');    // 객체 리터럴은 반드시 괄호로 둘러싸야 한다.
  console.log(o);    // {a:1}
  const f = eval('(function() {return 1;})');    // 함수 리터럴은 반드시 괄호로 둘러싸야 한다.
  console.log(f());    // 1

• eval 함수는 기존의 스코프를 런타임에 동적으로 수정
  => 함수 내에서 eval로 작성된 변수는 함수내에선 쓰일 수 있으나 전역으로 쓰이지 못한다.
• 단, strict mode에서 eval 함수는 기존의 스코프를 수정하지 않고 eval 함수 자신의 자체적인 스코프를 생성
  => 함수 내에서 eval로 작성된 변수는 eval 내에서만 유효, 함수 내, 전역에선 무효
• 인수로 전달받은 문자열 코드가 let, const를 사용한 변수 선언문일 시, 암묵적으로 strict mode가 적용

but, eval 함수를 통해 콘텐츠를 실행하는 건 보안에 매우 취약하며 최적화가 수행되지 않아 일반적인 코드 실행에 비해 처리 속도가 느려 사용은 금지해야 한다.

isFinite

전달받은 인수가 정상적인 유한수인지 검사해 유한수면 true를 반환하고 무한수면 false를 반환
전달받은 인수의 타입이 숫자가 아닌 경우 -> 숫자로 타입 변환 후 검사 수행
인수가 NaN이라면 false 반환

isFinite(1234);    // true
isFinite(1e34);    // true
isFinite('987654321');    // true
isFinite(null);    // true, null = 0
isFinite(NaN);    // false
isFinite(Infinity);    // false
isFinite('1q2w3e4r');    // false

isNaN

전달받은 인수가 NaN인지 검사해 그 결과를 불리언 타입으로 반환
전달받은 인수의 타입이 숫자가 아닌 경우 숫자로 타입 변환 후 검사 수행

isNaN(NaN);    // true
isNaN(1);    //false
isNaN('bibi');    // true, String = NaN
isNaN('10');    // false
isNaN('');    // false, '' = ' ' = null = 0
isNaN(true)l    // false, true = 1
isNaN(undefined);    // true, undefined = {} = NaN
isNaN(new Date());    // false

parseFloat

전달받은 문자열 인수를 부동 소수점 숫자(실수)로 해석해 반환

parseFloat('10.00');    // 10
parseFloat('3.14');    // 3.14

parseInt

전달받은 문자열 인수를 정수로 해석해 반환
문자열이 아니면 문자열로 변환한 다음 정수로 해석

parseInt('10.01');    // 10
parseInt(3.14)    // 3

parseInt('10');    // 10을 10진수로 해석, 10진수 정수로 반환
parseInt('10'. 2);    // 10을 2진수로 해석, 10진수 정수로 반환
parseInt('10', 8);    // 10을 8진수로 해석, 10진수 정수로 반환
parseInt('10', 16);    // 10을 16진수로 해석, 10진수 정수로 반환

• parseInt(a,b)를 사용해 a를 b진수로 해석하여 10진수 정수로 반환할 수 있다.
• 첫번째 인수의 문자열이 '0x'로 시작하는 16진수 리터럴은 b를 작성하지 않아도 16진수로 해석해 10진수 정수로 반환
  (2진수, 8진수 리터럴은 제대로 해석하지 못한다,)
• 10진수 숫자를 문자열로 변환할 때는 Number.prototype.toString 메서드를 사용

parseInt('A0');    // NaN, 'A'는 10진수로 해석 불가능
parseInt('22',2);    // NaN, 2는 2진수로 해석 불가능
parseInt('1A0');    // 1, 10진수로 해석할 수 없는 A 이후의 문자는 무시
parseInt('12 23 34 45');    // 12, 공백 이후 무시

• 해당 진수로 해석할 수 없는 문자와 그 이후의 문자는 모두 무시된 채 해석된 정수값만 반환
• 첫 번째 인수 문자열에 공백이 있다면 공백 이전의 문자열만 반환, 첫 번째 문자열을 숫자로 해석할 수 없는 경우 NaN 반황

encodeURI / decodeURI

ecodeURI

완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩

• 이스케이프 처리: 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환
  UTF-8 특수 문자의 경우 1문자당 1~3바이트, UTF-8 한글 표현의 경우 1문자당 3바이트
• URI: 인터넷에 있는 자원을 나타내는 유일한 주소(URL + URN)
  - URL: scheme + host + Port + Path, 아스키 문자 셋으로만 구성
  => 아스키 문자 셋에 정의되지 않는 언어와 문자는 URL에 포함 불가능
  => URL에 올 수 없는 문자를 이스케이프 처리하여 야기될 수 있는 문제를 예방
  - URN: Query + Fragment
  
• 매개변수로 전달된 문자열을 완전한 URI 전체라고 간주 => 쿼리 스트링 구분자로 사용되는 =, ?, &은 인코딩 X

decodeURI

인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩

encodeURIComponent / decodeURIComponent

encodeURIComponent

URI 구성 요소를 인수로 전달받아 인코딩
인수로 전달된 문자열을 URI의 구성요소인 쿼리스트링의 일부로 간주 => 쿼리스트링 구분자로 사용되는 =, ?, &까지 인코딩

decodeURIComponent

매개변수로 전달된 URI 구성요소를 디코딩

 

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!