JavaScript - 자바스크립트 내장 함수

타이머 함수

메서드 이름	설명
setTimeout(function(){}, millisecond)	일정 시간 후 함수를 한 번 실행한다.
setInterval(function(){}, millisecond)	일정 시간마다 함수를 반복해서 실행한다.
clearTimeout(id)	일정 시간 후 함수를 한 번 실행하는 것을 중지한다.
clearInterval(id)	일정 시간마다 함수를 반복하는 것을 중단한다.

setTimeout()은 특정한 시간 후에 함수를 한 번 실행하고, setInterval()은 특정한 시간마다 함수를 실행한다.

alert("시작되었습니다."); setTimeout(function(){         alert("3초가 지났다."); }, 3000);

위의 코드를 실행하면 alert("시작되었습니다.")가 먼저 팝업이 되고 3초뒤에 alert("3초가 지났다.")가 팝업이 된다. setTimeout과 setInterval의 뒤에 millisecond는 1000이 1초이다. 3초면 3000이라는 뜻이다.

setInterval(function(){         alert("3초 간격으로 호출한다.") }, 3000);

코드를 실행하면 alert("3초 간격으로 호출한다.")라는 팝업이 3초마다 실행이 된다. setTimeout은 한 번만 실행이 되고 멈추지만 setInterval은 지정한 시간마다 지속적으로 실행이 되는데 이걸 멈추기 위해서는 clearInterval(id)메서드를 사용한다. clearTimeout(id)도 마찬가지다. 

alert("시작되었습니다."); let a = setTimeout(function(){     alert("3초가 지났다."); }, 3000); clearTimeout(a);

let b = setInterval(function(){     alert("3초 간격으로 호출한다.") }, 3000); clearInterval(b);

id를 찾는 법은 setTimeout을 변수로 선언하고 alert나 console.log를 이용해 setTimeout과 setInterval의 고유한 아이디를 찾을 수도 있지만 단순히 변수로 지정하고 clearTimeout과 clearInterval에 변수를 지정해서 멈추게 하는 방법도 있다.

//변수 a로 지정된 setInterval으로 1초 간격으로 호출 let a = setInterval(function(){     alert("1초 간격으로 호출한다.") }, 1000);   //setTimeout으로 clearInterval에 아까 변수 a로 지정한 setInterval을 넣는다. setTimeout(function(){     clearInterval(a) },3000);

위와 같이 setInterval을 setTimeout과 clearInterval을 이용해서 몇초뒤에 꺼지게 할 수도 있다.

setTimeout, clearTimeout, setInterval, clearInterval.html

0.00MB

인코딩과 디코딩 함수

함수 이름	설명
escape()	적절한 정도로 인코딩한다.
unescape()	적정한 정도로 디코딩한다.
encodeURI(uri)	최소한의 문자만 인코딩한다.
decodeURI(encodedURI)	최소한의 문자만 디코딩한다.
encodeURIComponent(uriComponent)	문자 대부분을 모두 인코딩한다.
decodeURIComponent(encodedURI)	문자 대부분을 모두 디코딩한다.

let a = escape("초콜릿"); let b = unescape(a);   // %uCD08%uCF5C%uB9BF 출력 alert(a); // 초콜릿 출력 alert(b);

영어는 인코딩을 하게되면 그대로 출력이 되지만 영어가 아닌 문자는 부호화가 되어버린다. 문자를 부호화 하는 것을 인코딩이고 인코딩한 문자를 반대로 되돌리는 것을 디코딩이라고 한다.

 

'적절한'과 '최소한'과 '대부분'의 차이는 아래와 같다.

1. escape()

-영문 알파벳과 숫자, 일부 특수 문자를 제외하고 모두 인코딩 한다.

-1바이트 문자는 %XX의 형태로 2바이트 문자는 %uXXXX의 형태로 변환한다.

 

2. encodeURI()

-escape() 함수에서 인터넷 주소에 사용되는 일부 특수 문자는 변환하지 않는다.

 

3. encodeURIComponent()

-알파벳과 숫자를 제외한 모든 문자를 인코딩한다.

-UTF-8 인코딩과 같다.

 

초기에는 escape() 함수만 존재했지만 현재에는 encodeURIComponent() 함수를 많이 사용한다.

encoding, decoding.html

0.00MB

코드 실행 함수

함수 이름	설명
eval(string)	string을 자바스크립트 코드로 실행한다.

eval() 함수를 사용하면 string 형태의 JavaScript 소스 코드를 동적으로 실행할 수 있다. 쉽게 설명하면 eval() 함수에 들어간 문자 또는 문자열이 자바스크립의 코드일 때 그것을 자바스크립트 코드로 인식 시킨다.

let a=''; a+='var b=55;'; a+='alert(b);';   eval(a); alert(b);

let a=''; a+='let b=55;'; a+='alert(b);';   eval(a); // let b=55는 alert로 실행이 되지 않는다. alert(b);

eval() 함수는 문자열을 자바스크립트 코드로 실행하는 함수이므로 eval() 함수로 실행된 코드에서 정의한 변수도 활용할 수 있다. 또한 위의 경우에서 willEval+='var number=10;';을 willEval+='let number=10;';로 바꾸었을시 alert(number);가 출력이 안되는데 이유는 var로 변수를 선언하면 함수 밖에서도 인식이 되지만 let은 간섭을 받지 않기 때문에 alert()가 let number=10을 인식을 하지 못해서 출력이 되지 않는다.

코드 실행 함수.html

0.00MB

숫자 확인 함수

함수 이름	설명
isFinite()	number가 유한한 값인지 확인한다.
isNaN()	number가 NaN(Not a Number)인지 확인한다.

각각의 설명에 나와있는 것을 boolean(true or false)으로 알려준다. isFinite는 값이 무한대(infinity)면 false를 그게 아니라면 true를 반환한다.

let a = 10/0; // false 출력 alert(isFinite(a));

let b = 3+27; // true 출력 alert(isFinite(b));

inFinite() 함수 말고 Infinity(무한)와 비교해서 조건문과 연산자로 number==Infinity 처럼 무한대인지 유한대인지 확인 할 수도 있지만 -Infinity는 Infinity와 다른 것이다.

function infinity(m){       if(m==Infinity){             return alert("Infinity");       }       else{             return alert("Not Infinity");       } } // -10/0은 -Infinity라서 Infinity가 아니다.         infinity(-10/0);

-10/0은 Infinity가 아니라 -Infinity 이기 때문에 Infinity를 사용해 무한대인지 유한대인지 확인중 오류가 발생할 수 있기 때문에 무한대인지 유한대인지 확인을 하려면 isFinite() 함수를 사용하는 것이 권장된다.

 

isNaN은 숫자가 아닌지 또는 숫자인지를 판단하는 함수이다. 문자열을 isNaN에 넣으면 true가 반환되며 숫자를 넣으면 false가 반환이 된다.

let c = "안녕하세요."; // true 출력 alert(isNaN(c));

let d = 10; // false 출력 alert(isNaN(d));

let e = 10/0; // false 출력 alert(isNaN(e));

isNaN도 isFinite처럼 NaN(Not a Number) 연산자로 Number(or String)==NaN처럼 할 수 없다. NaN는 자신은 비교할 수 없기 때문이다.

function notanumber(G){     if(G==NaN){         return "NaN==NaN";     }     else {         return "NaN!=NaN";     } } // NaN==NaN가 아니기 때문에 NaN!=NaN이 출력된다. alert(notanumber(NaN));

그렇기 때문에 NaN인 것을 확인 할 때는 isNaN() 함수를 이용해야 한다.

function notanumber(a){     if(isNaN(a)==true){         return true;     }     else{         return false;     } } // 'JavaScript'는 문자열이라 NaN이기 때문에 true가 출력된다. alert(notanumber('JavaScript'));

숫자 변환 함수

함수 이름	설명
parseInt(string)	string(문자열)을 정수로 바꾼다.
parseFloat(string)	string(문자열)을 실수로 바꾼다.

Number() 함수를 보완하기 위해 있는 함수이다. Number() 함수는 숫자로 바꿀수가 없으면 NaN으로 출력이 되는 단점이 있다.

let won='1500원'; let dollar='1.5$'; // 숫자가 아닌 문자열(문자)이 들어가 있으면 Number() 함수는 사용 못한다.  alert(Number(won)+':'+Number(dollar)); // NaN : NaN 출력

이런 Number() 함수의 단점으로 인해 parsInt() 함수와 parseFloat() 함수를 사용한다.

parseInt() 함수 사용	parseFloat() 함수 사용
let KRW='100000원'; let USD='100.50$'; // 100000:100 출력 alert(parseInt(KRW)+':'+parseInt(USD));	let KRW='100000원'; let USD='100.50$'; // 100000:100.5 출력 alert(parseFloat(KRW)+':'+parseFloat(USD));

parseInt() 함수의 다른 기능으로는 parseInt('a',b)의 매개변수 b에 값을 입력해 진법을 바꿀 수 있다. 또 parseFloat()에는 중간에 e가 들어가면 e의 앞부분에서 끊어지지 않고 자릿수로 인식한다.

parseInt() 함수로 진법 변경	parseFloat() 함수는 e를 자릿수로 인식
// 273을 8진법으로 변경 -> 187 출력 console.log(parseInt('273',8)); // 273을 16진법으로 변경 -> 627 출력 console.log(parseInt('273',16)); // 273을 10진법으로 변경 -> 273 출력 console.log(parseInt('273',10));	// 7230000 출력 console.log(parseFloat('72.3e5')); // 9930 출력 console.log(parseFloat('9.93e3')); // 30000 출력 console.log(parseFloat('0.3e5'));

숫자 변환 함수.html

0.00MB