[JavaScript (7)] Javascript 함수2 - 기본 내장함수(eval, parseInt, encodeURI, encodeURIComponent 등)

[JavaScript (7)] Javascript 함수2 - 기본 내장함수(eval, parseInt, encodeURI, encodeURIComponent 등)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 함수 - 기본 내장함수 ] 입니다. : ) 

 

0. 들어가기 앞서

 

앞서 함수의 정의, 호출방법, 그리고 활용 방법 등을 간단히 알아 보았다.

 

자바스크립트는 사용자의 편의를 위해 몇가지 내장함수를 제공한다.

이중 사용시 유의해야할 함수, 그리고 매우 유용한 함수들이 있으니 알아보도록 하자.

 

1. 내장 함수

▶ 1. eval() - 문자열을 코드로 인식하게 하는 함수.

 - eval("문자열")
ex)

var a = "1+1";
console.log(a); // 1+1
console.log(eval(a)); // 2

※ 주의할점 
 - eval이 빠르고 편리하여 jsonParse와 같은 기능으로 많이 사용하곤 하였다.
   다만 eval은 보안 이슈가 발생할 수 있으므로 다른 편리한 라이브러리가 많으므로 사용을 지양하는 것이 좋다고 생각한다.
 - 참고 : https://goddaehee.tistory.com/36
ex)

var jsonStr = '{"no":1, "name":"갓댐"}';
eval("var obj1 = ("+ jsonStr +")" ); // eval 사용
var obj2 = JSON.parse(jsonStr); // 최신브라우저는 javascript 엔진이 JSON을 객체로 채택하여 사용 가능하다.

// obj1, obj2 동일한 결과
console.log(obj1);
console.log(obj2); // String => JSON Object

console.log(JSON.stringify(obj2)); // JSON Object => String

▶ 2. String() - 객체를 문자열로 변환하는 함수.

 - String(객체)
ex)

String(null);       // null
String(true);       // true
String(false);      // false
String(123);        // 123
String(123.456);    // 123.456
String(new Date()); // Mon Mar 23 2020 14:08:01 GMT+0900 (대한민국 표준시)

▶ 3. 문자를 숫자로 변환하는 함수

1) parseInt() - 문자열을 파싱하여 정수로 반환 한다. (숫자가 아닌 문자(공백을 제외한) 포함시 무조건 NaN)
2) parseFloat() - 문자열을 파싱하여 부동 소수점 수로 반환 한다. 
  (첫자리 문자 : NaN, 첫자리가 문자가 아니며, 숫자 뒤에 문자 : 숫자 뒤 문자 제외 후 숫자로 변환)
3) Number() - 전달받은 객체의 값을 숫자로 반환 한다.
  (첫자리 문자 : NaN, 첫자리가 문자가 아니며, 숫자 뒤에 문자 : 숫자 뒤 문자 제외 후 숫자로 변환)

ex)

parseInt("777");        // 777
parseInt("777.000");    // 777
parseInt("777.001");    // 777

parseFloat("777");        // 777
parseFloat("777.000");    // 777
parseFloat("777.001");    // 777.001

Number("777");        // 777
Number("777.000");    // 777
Number("777.001");    // 777

parseInt("777 ");   // 777
parseInt(" 777 ");      // 777
parseInt("777 잘못들어간문자열"); // 777
parseInt("잘못들어간문자열 777"); // NaN

parseFloat("777 ");   // 777
parseFloat(" 777 ");      // 777
parseFloat("777 잘못들어간문자열"); // 777
parseFloat("잘못들어간문자열 777"); // NaN

Number("777 ");   // 777
Number(" 777 ");      // 777
Number("777 잘못들어간문자열"); // NaN	
Number("잘못들어간문자열 777"); // NaN	

▶ 4. 인코딩을 위한 내장 함수,  5. 디코딩을 위한 내장함수

1) escape(), unescape() => deprecated
   참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape
2) encodeURI(), decodeURI()
 - encodeURI() : URI에서 주소를 표시하는 특수문자(: ; / = ? &)를 제외하고, 모든 문자를 이스케이프 시퀀스(escape sequences) 처리하여 부호화
   즉 URI 전체를 인코딩 할때 사용.
 - decodeURI() : encodeURI의 반대의 경우 사용, URI 전체를 디코딩 할때 사용.
3) encodeURIComponent(), decodeURIComponent()
 - encodeURIComponent() : 모든 문자를 이스케이프 시퀀스(escape sequences) 처리하여 부호화
   URI의 특정 파라미터만 인코딩 할때 사용 하거나 인터넷 주소를 하나의 변수에 넣을때 쓸 수 있다.
 - decodeURIComponent() : encodeURIComponent() 반대의 경우 사용

ex)

var uri = "https://goddaehee.tistory.com/category/3. 웹개발";

var ecnUri1 = encodeURI(uri);
var ecnUri2 = encodeURIComponent(uri);
console.log(ecnUri1); // https://goddaehee.tistory.com/category/3.%20%EC%9B%B9%EA%B0%9C%EB%B0%9C
console.log(ecnUri2); // https%3A%2F%2Fgoddaehee.tistory.com%2Fcategory%2F3.%20%EC%9B%B9%EA%B0%9C%EB%B0%9C

console.log(decodeURI(ecnUri1)); // https://goddaehee.tistory.com/category/3. 웹개발
console.log(decodeURIComponent(ecnUri2)); // https://goddaehee.tistory.com/category/3. 웹개발

▶ 6. 이외 내장 함수

 - 인수로 전달된 값이 숫자가 아니라면, 숫자로 변환하여 검사 한다. 형변환을 하여 검사하기 때문에 사실 의도에 벗어난 결과가 나올 수 있으므로 주의 한다.
1) isFinite() - 전달된 값이 유한한 수인지 불린으로 리턴
2) isNaN() - 전달된 값이 NaN인지를 불린으로 리턴 (ECMAScript 6부터는 Number.isNaN() 메소드의 사용을 권장, typeof를 사용할 수 도 있다)

ex)

isFinite(0);         // true
isFinite(true);      // true
isFinite(null);      // true
isFinite("777");     // true
isFinite("");        // true
isFinite("test");    // false
isFinite(undefined); // false

isNaN(0);         // false
isNaN(true);      // false
isNaN(null);      // false
isNaN("777");     // false
isNaN("");        // false
isNaN("test");    // true
isNaN(undefined); // true