[JavaScript] 표준 내장 객체. 전역 함수 속성 정리

안녕하세요. 성조입니다.

 

이번 포스팅은 개발하다 보면 언제든 내장함수를 활용하게 되는데 자바스크립트 관련해서 자주 다룰 일이 생기다 보니 개인적으로 학습 후. 정리하는 포스팅을 작성하게 됐습니다.

 

표준 내장 객체에서 함수 속성을 정리하는 포스팅입니다.

 

혹여나 잘못된 지식 전달이 있다면 언제든지 댓글로 얘기 주시면 감사드리겠습니다.

---

표준 내장 객체란?

자바스크립트 언어 자체에 내장되어 있어 사용자가 별도로 설치하거나 가져오지 않아도 사용할 수 있는 객체를 의미한다. 이러한 표준 내장 객체들은 자바스크립트에서 기본적으로 제공되는 기능을 수행하며, 개발자들은 이러한 객체들을 활용하여 편리하게 웹 또는 애플리케이션을 개발하고 확장할 수 있다.

 

 

eval()

let x = 2;
let y = 3;
let code = 'x * y';
console.log(eval(code)); // 6

'x * y'를 코드로서 실행하며, 변수 x와 y의 곱인 6을 반환해 준다.

eval()은 인자로부터 받은 코드를 caller의 권한으로 수행하는 위험한 함수이다. 콜백 함수라고 생각하면 된다.

caller 속성은 ES5에서는 표준이었지만 ES6부터 사라졌다.

 

문자열을 활용하여 eval()를 활용하는 경우. 해커에게 노출될 가능성이 크기 때문에 가급적 주의해야 한다. 공식 홈페이지에 나와있는 나쁜 코드와 사용해도 무관한 코드에 대해 참고해 보자.

 

[무관한 코드]

function looseJsonParse(obj){
    return Function('"use strict";return (' + obj + ')')();
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

 

[나쁜 코드]

function looseJsonParse(obj){
    return eval(obj);
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))

 

무관한 코드

function 생성자를 사용하여 JSON 문자열을 함수로 감싸고 실행하는 방식으로 JSON을 파싱 한 코드이다.

eval을 대체하기 위해 일반적으로 사용되는 방법이다. Function 생성자를 사용하여 함수를 동적으로 생성하고, 생성된 함수가 다른 곳에서 호출되지 않게 즉시 실행하여 결과를 반환시키는 방법이다. 또한, 'use strict'를 사용하여 엄격한 모드로 실행하도록 설정하여 코드 실행에 대한 추가적인 제어를 할 수 있다.

 

나쁜 코드

eval을 사용하여 문자열을 직접 실행하는 방식으로 JSON을 파싱 한다. eval 메서드가 문자열을 JavaScript 코드로 실행하는 강력한 기능을 제공해 주지만 보안 문제와 코드 실행에 대한 제어가 부족해서 사용을 권장하지 않는다.

 

중요 point

첫 번째 Function 생성자를 사용하는 코드는 보안적인 측면에서 엄격한 모드를 적용하기 때문에 제어하는데 적합하다.

eval을 사용하는 두 번째 코드는 임의의 코드 실행에 대한 보안 위험이 있고, 코드에 대한 제어가 제한적이다.

 

 

isFinite()

console.log(isFinite(1000)); // true
console.log(isFinite(Infinity)); // false

숫자 값이 유효한 숫자인지 무한한 값인지 확인하는 함수이다.

 

ifNaN()

console.log(isNaN('Hello')); // true
console.log(isNaN(100)); // false

제공되는 값이 NaN인지 확인하는 함수이다.

console.log(isNaN(NaN));       // 참 true
console.log(isNaN(undefined)); // 참 true
console.log(isNaN({}));        // 참 true

console.log(isNaN(true));      // 거짓 false
console.log(isNaN(null));      // 거짓 false
console.log(isNaN(12));        // 거짓 false

// 문자열
console.log(isNaN("10"));      // 거짓(false): "10"은 NaN이 아닌 숫자 37로 변환된다.
console.log(isNaN("10.11"));   // 거짓(false): "10.11"은 NaN이 아닌 숫자 37.37로 변환된다.
console.log(isNaN("ABC123"));  // 참(true): parseInt("ABC123")는 123이지만 Number("ABC123")는 NaN이 나온다.
console.log(isNaN(""));        // 거짓(false): 빈 문자열은 NaN이 아닌 0으로 변환된다.
console.log(isNaN(" "));       // 거짓(false): 공백이 있는 문자열은 NaN이 아닌 0으로 변환된다.

// dates 숫자에 toString을 했다고 참이 되는것은 허위 양성이고, isNaN이 완전히 신뢰할 수 없는 이유이다.
console.log(isNaN(new Date()));                // 거짓 (false)
console.log(isNaN(new Date().toString()));     // 참 (true)


console.log(isNaN("blabla"));   // 참(true): "blabla"는 숫자로 변환된다.

 

 

parseFloat()

console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('years 2.06')); // NaN
console.log(parseFloat('20.6 years ')); // 20.6

문자열에 유효하게 있는 부동 소수점을 반환한다.

문자열에서 실수형 데이터를 받아오는 것이다.

 

parseInt()

console.log(parseInt('21')); // 21
console.log(parseInt('22 years')); // 22
console.log(parseInt('years 22')); // NaN

첫 번째 정수를 반환한다. 문자열에서 정수형 값을 가져온다.

 

encodeURI(), encodeURIComponent()

let uri = 'https://www.example.com/오늘 먹고싶은 음식은 치킨이다.?query=test';
let encodedURI = encodeURI(uri);
console.log(encodedURI); 
// "https://www.example.com/%EC%98%A4%EB%8A%98%20%EB%A8%B9%EA%B3%A0%EC%8B%B6%EC%9D%80%20%EC%9D%8C%EC%8B%9D%EC%9D%80%20%EC%B9%98%ED%82%A8%EC%9D%B4%EB%8B%A4.?query=test"

let uriComponent = '오늘 먹고싶은 음식은 치킨이다.?query=test';
let encodedURIComponent = encodeURIComponent(uriComponent);
console.log(encodedURIComponent); 
// "%EC%98%A4%EB%8A%98%20%EB%A8%B9%EA%B3%A0%EC%8B%B6%EC%9D%80%20%EC%9D%8C%EC%8B%9D%EC%9D%80%20%EC%B9%98%ED%82%A8%EC%9D%B4%EB%8B%A4.%3Fquery%3Dtest"

 

 

 

decodeURI(), decodeURIComponent()

let encodedURI = "https://www.example.com/%ec%98%a4%eb%8a%98+%eb%a8%b9%ea%b3%a0%ec%8b%b6%ec%9d%80+%ec%9d%8c%ec%8b%9d%ec%9d%80+%ec%b9%98%ed%82%a8%ec%9d%b4%eb%8b%a4.%3fquery%3dtest";
console.log(decodeURI(encodedURI)); 
// "https://www.example.com/오늘+먹고싶은+음식은+치킨이다.%3fquery%3dtest"

let encodedURIComponent = "%ec%98%a4%eb%8a%98+%eb%a8%b9%ea%b3%a0%ec%8b%b6%ec%9d%80+%ec%9d%8c%ec%8b%9d%ec%9d%80+%ec%b9%98%ed%82%a8%ec%9d%b4%eb%8b%a4.%3fquery%3dtest";
console.log(decodeURIComponent(encodedURIComponent)); 
// "오늘+먹고싶은+음식은+치킨이다.?query=test"

decodeURI() 함수와 decodeURIComponent() 함수는 encodeURI() 함수와 encodeURIComponet() 함수에 의해 인코딩 된 URI 또는 URI 구성 요소를 디코딩할 때 사용된다.

 

 

 

---

오타나 궁금한 부분이 있다면 언제든지 댓글 달아주시면 최대한 답변드릴 수 있도록 하겠습니다.

 

다음 포스팅 때 뵙겠습니다. 감사합니다!

 

 

- 참조 -

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN