[JavaScript] 내장함수

1) 타이머 함수

시간 경과에 따른 명령 실행 함수

 

setTimeout(callback, ms) : 시간(ms) 경과 후 콜백함수를 한번만 호출하여 콜백함수의 명령을 실행하는 함수

→ timeoutId(setTimeout 함수를 구분하기 위한 식별자) 반환

clearTimeout(timeoutId)  : timeoutId의 setTimeout 함수의 실행을 취소하는 함수

 

setInterval(callback, ms) : 시간(ms) 경과마다 콜백함수를 반복적으로 호출하여 콜백함수의 명령을 실행하는 함수

→ intervalId(setInterval 함수를 구분하기 위한 식별자) 반환

clearInterval(intervalId)  : intervalId의 setInterval 함수의 실행을 취소하는 함수

 

---

setInterval 함수 예시)

 

setInterval 함수를 이용해 콜백함수에 익명함수를 전달하여 익명함수의 명령을 1초마다 반복 실행할 수 있다.

var id=setInterval(function() {
	alert("setInterval 함수에 의해 반복 실행되는 명령");
}, 1000);

 

콜백함수에 화살표함수를 전달하여 화살표함수의 명령을 1초마다 반복 실행 후,

5초 경과 후 콜백함수를 호출하여 setInterval 함수의 실행을 취소

//콜백함수에 화살표함수를 전달하여 화살표함수의 명령을 반복 실행
var id=setInterval(() => alert("setInterval 함수에 의해 반복 실행되는 명령"), 1000);

//5초 경과 후 콜백함수를 호출하여 setInterval 함수의 실행을 취소
setTimeout(function() {
	clearInterval(id); 
},5000);

 

---

2) 인코딩, 디코딩 함수

부호화(복호화) 관련 함수

 

encodeURI(string) 함수 또는 encodeURIComponent(string) 함수 

: 매개변수로 일반 문자값을 전달받아 부호화된 문자값으로 변환하여 반환하는 함수 - 부호화 처리 함수
decodeURI(string) 함수 또는 decodeURIComponent(string) 함수 
: 매개변수로 부호화 처리된 문자값을 전달받아 일반 문자값으로 변환하여 반환하는 함수 - 복호화 처리 함수

---

 

URL 주소는 영문자, 숫자, 일부 특수문자로만 표현이 가능하다.
→ URI(웹자원의 식별자) = URL(웹자원의 위치) + QueryString(전달값)

URI 주소의 질의문자열(QueryString)을 이용하여 웹프로그램에게 필요한 값을 전달할 수 있다.
하지만 질의문자열에 URI 주소로 사용이 불가능한 문자가 포함될 수 있다는 문제점이 발생할 수 있다. 사용이 불가능한 문자가 포함되면 값이 비정상적으로 전달된다.

<a href="15 encode.html?name=홍길동">링크</a>

 

이를 해결하기 위해서는 질의문자열에 URI 주소로 사용 불가능한 문자가 포함된 경우, 부호화 처리하여 전달하면 된다.

- 부호화(Encode) : URI 주소로 사용 불가능한 문자를 URI 주소로 사용 가능한 문자(유니코드)로 변환

 

var name="홍길동";
alert("name = "+name);//name = 홍길동

//부호화 처리
var encodeName=encodeURIComponent(name);
alert("encodeName = "+encodeName);//encodeName = %ED%99%8D%EA%B8%B8%EB%8F%99

//복호화 처리
var decodeName=decodeURIComponent(encodeName);
alert("decodeName = "+decodeName);//decodeName = 홍길동

 

---

3) eval 함수

 

eval(string) : 매개변수로 문자값을 전달받아 자바스크립트 명령으로 변환하여 실행하는 함수

 

---

 

eval 함수를 사용하면 변수에 저장된 문자값이 명령으로 변환되어 실행된다.

var text="20 + 10";
alert(text);//20 + 10 - 변수에 저장된 문자값 출력
alert(eval(text));//30 - 변수에 저장된 문자값이 명령으로 변환되어 실행

---

사용자가 입력한 문자값이 명령으로 변환되어 실행된다.

var operation=prompt("연산식을 입력해 주세요.");
alert("연산결과 = "+eval(operation));

 

ex)

 

---

변수에 저장된 값이 함수가 아닐때는 함수 호출이 불가능하다.

var display="function() { alert('함수의 명령 실행'); }";
alert("변수의 자료형 = "+typeof(display));//변수의 자료형 = string
display();//에러발생

 

이런 경우 eval 함수를 사용하여 변수에 저장된 문자값을 실행할 수 있다.

→ 함수가 저장된 문자값을 자바스트립트 명령으로 변환되어 함수가 먼저 선언되므로 앞과뒤에 ( ) 기호를 사용하여 우선 처리해주어야 한다.

var display="function() { alert('함수의 명령 실행'); }";
alert("변수의 자료형 = "+typeof(eval("("+display+")")));
eval("("+display+")")();//문자값으로 저장된 함수를 eval 함수를 사용하여 선언한 후 직접 호출

 

---

4) isNaN 함수

 

isNaN(value) : 매개변수로 전달받는 값이 숫자로만 구성된 경우 [false]를 반환하고 숫자로만 구성되지 않은 경우 [true]를 반환하는 함수

---

 

예시)

var value="123abc";
	
if(isNaN(value)) {
	alert("숫자로만 구성된 값이 아닙니다.")
} else {
	alert("숫자로만 구성된 값입니다.");
}
//숫자로만 구성된 값이 아닙니다.

---

5) isFinite 함수

 

isFinite(value) : 매개변수로 전달받은 값이 무한수인 경우 [false]를 반환하고 유한수인 경우 [true]를 반환하는 함수

---

 

자바스크립트는 모든 숫자값이 유한수로 표현되지만 유일하게 무한수를 반환하는 경우는 숫자를 0으로 나누었을 때이다.

alert(10/4);//2.5
alert(10/3);//3.3333333333333335
alert(10/0);//Infinity - 무한수

 

isFinite 함수 사용 예시

var num1=10, num2=0;
	
if(isFinite(num1/num2)) {
	alert(num1/num2);
} else {
	alert("0으로 나눌 수 없습니다.");
}
//0으로 나눌 수 없습니다.

 

---

6) 숫자값 변환 함수 

 

parseInt(value) : 매개변수로 전달받은 값을 정수값으로 변환하여 반환하는 함수
parseFloat(value) : 매개변수로 전달받은 값을 실수값으로 변환하여 반환하는 함수

 

---

 

parseInt(value) : 매개변수로 전달받은 값을 정수값으로 변환하여 반환해준다.

var result=50/3;
alert("결과 = "+result);//결과 = 16.666666666666668
alert("결과 = "+parseInt(result));//결과 = 16

---

parseInt(string, radix) : 매개변수를 전달받은 특정 진수의 문자값을 10진수의 정수값을 변환하여 반환해준다.

alert("16진수 : 123 = 10진수 : "+parseInt("123", 16))//16진수 : 123 = 10진수 : 291
alert("16진수 : abc = 10진수 : "+parseInt("abc", 16))//16진수 : abc = 10진수 : 2748
alert("8진수 : 123 = 10진수 : "+parseInt("123", 8))//8진수 : 123 = 10진수 : 83

---

문자값을 숫자값으로 바꿔 처리하고자 할 때도 parseInt(),parseFloat()를 사용한다. 

var num="100";
alert(num+200);//100200 - 문자값 결합 

//매개변수로 문자값을 전달받아 정수값으로 변환하여 반환
alert(parseInt(num)+200);//300 - 산술 연산 

var num="10.5";
alert(num+20);//10.520 - 문자값 결합 

//매개변수로 전달받은 문자값을 실수값으로 변환하여 반환
alert(parseFloat(num)+20);//30.5 - 산술 연산

---

Number 함수를 사용해도 parseInt 함수와 마찬가지로  문자값을 숫자값(정수값)으로 변환할 수 있다.

var num="100";
alert(parseInt(num)+200);//300 - parseInt 함수를 사용하여 문자값을 숫자값(정수값)으로 변환
alert(Number(num)+200);//300 - Number 함수를 사용하여 문자값을 숫자값(정수값)으로 변환

---

parseInt 함수와 Number 함수의 차이점

 

parseInt 함수를 사용하면 매개변수로 전달받은 문자값의 앞부분의 숫자만 잘라내어 정수값으로 변환하여 반환한다.

var num="100abc";
alert(parseInt(num)+200);//300

 

Number 함수를 사용하면 매개변수에 전달받은 문자값에 숫자 외 문자가 존재할 경우 NaN가 발생한다.

var num="100abc";
alert(Number(num)+200);//NaN