[ Javascript ] 자바스크립트의 내장함수들

자바스크립트의 내장함수

자바스크립트는 자체적으로 몇가지 함수를 제공합니다. 이렇게 기본으로 내장된 함수를 내장함수라고 부릅니다.

 

타이머 함수

타이머 함수는 특정 시간에 특정 함수를 실행할 수 있게 하는 함수입니다.

 

타이머 함수

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

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

 

setTimeout()함수 예

setTimeout(function () {
    alert("3초 이후에 실행되는 경고창");
}, 3000);

setTimeout()함수는 한번만 실행하기 때문에 별다른 문제는 없지만, setInterval()함수는 지속적으로 실행하기 때문에 컴퓨터의 자원도 계속해서 소비하게 됩니다.

그렇기 때문에 타이머가 더이상 필요없게 될 때 타이머를 멈춰주어야 합니다.

타이머를 멈출때는 clearTimeout()함수, clearInterval()함수를 사용합니다.

 

setInterval()함수 예

var interval = setInterval(function() {
    console.log("1초마다 실행되는 함수" + new Date());
}, 1000);

setTimeout(function() {
    console.log("10초 뒤에 종료합니다.")
    clearInterval(interval);
}, 10000)

 

---

 

인코딩과 디코딩 함수

인코딩은 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법입니다. 웹에서는 통신할 때 한글 같은 유니코드 문자가 오작동을 일으킬 수 있으므로 인코딩을 해야합니다. 문자를 부호화하는 것이 인코딩이고, 반대로 문자를 원래대로 되돌리는 것이 디코딩입니다.

 

인코딩과 디코딩 함수

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

'적절한'과 '최소한' 그리고 '대부분'의 차이점

 

escape()

• 영문 알파벳과 숫자, 일부 특수문자(@, *, -, _, +, ., /)를 제외하고 모두 인코딩합니다.
• 1바이트 문자는 %XX의 형태로, 2바이트 문자는 %uXXXX형태로 변환합니다.

encodeURI()

• escape()함수에서 인터넷 주소에 사용되는 일부 특수 문자(:, ;, /, =, ?, &)는 변환하지 않습니다.

encodeURIComponent()

• 알파벳과 숫자를 제외한 모든 문자를 인코딩합니다.
• UTF-8인코딩과 같습니다.

 

인코딩과 디코딩 함수 예

var URI = "https://shiro21.tistory.com/100?category=안녕하세요";

var output = "";
output += 
`
escape()
${escape(URI)}

encodeURI()
${encodeURI(URI)}

encodeURIComponent()
${encodeURIComponent(URI)}
`

alert(output);

세가지 함수 모두 비슷한 기능을 수행하기 때문에 어떤 것을 사용해도 무방합니다.

:: encodeURIComponent()함수를 많이 사용합니다.

 

---

 

코드 실행 함수

자바스크립트는 문자열을 코드로 실행할 수 있는 특별한 함수를 제공합니다.

 

코드 실행 함수

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

eval()함수는 문자열을 자바스크립트 코드로 실행하는 함수입니다.

 

코드 실행 함수 예

var willEval = "";
willEval += "var number = 10;";
willEval += "alert(number);";

eval(willEval); // 10

eval()함수는 문자열을 자바스크립트 코드로 실행하는 함수이므로 eval()함수로 실행된 코드에서 정의한 변수도 활용할 수 있습니다.

하지만 그만큼 위험하기 때문에 사용을 자제하라고 하는 함수입니다.

 

---

 

숫자 확인 함수

자바스크립트에는 Infinity와 NaN이라는 숫자가 있습니다. 변수에 있는 숫자가 이런 숫자인지 확인할 때 사용합니다.

 

숫자확인함수

함수	설명
isFinite()	number가 무한한 값인지 확인합니다.
isNaN()	number가 NaN인지 확인합니다.

프로그래밍에서 대부분 0으로 숫자를 누나면 오류가 발생하면서 작동을 멈춥니다. 반면에 자바스크립트는 0으로 숫자를 나누면 infinity라는 값이 들어갑니다.

 

Infinity 예

var number = 1 / 0;
alert(number); // Infinity

 

isFinite()함수는 이러한 값을 구분하는 함수입니다. 함수의 이름 그대로 isFinite(유한한 수)면 true를 리턴합니다.

 

isFinite() 예

var number = 1 / 0;
alert(number + ' : ' + isFinite(number)); // Infinity : false

 

Infinity 값 비교 예

var value = -10 / 0;

if(value == Infinity) {
    alert("인피니티입니다.");
} else {
    alert("인피니티가 아닙니다."); // 실행
}

 

( 자바스크립트에는 Infinity변수가 있습니다. )

Infinity는 -Infinity와 Infinity로 나뉘기 때문에 무한대를 확인할 때는 반드시 isFinite()함수를 사용하는게 좋습니다/

 

NaN 값 비교 예

if(NaN == NaN) {
    alert("NaN은 NaN이다.");
} else {
    alert("NaN은 NaN이 아니다."); // 실행
}

( 자바스크립트에는 NaN변수도 있습니다. )

NaN은 자신을 비교할 수 없습니다. 따라서 NaN을 확인할 때는 반드시 isNaN()함수를 사용해야 합니다.

 

isNaN()함수 예

if(isNaN(NaN)) {
    alert("NaN은 NaN이다."); // 실행
} else {
    alert("NaN은 NaN이 아니다.");
}

이부분은 매우 중요한 내용입니다.

 

---

 

숫자 변환 함수

 

숫자변환함수

함수	설명
parseInt(string)	string을 정수로 바꾸어줍니다.
parseFloat(string)	string을 유리수로 바꾸어줍니다.

 

Number()함수의 단점 예

var won = '1000원';
var dollar = '1.5$';
alert(Number(won) + ' : ' + Number(dollar)); // NaN : NaN

Number()함수는 숫자로 바꿀 수 없으면 NaN으로 변환합니다.

 

parseInt()함수와 parseFloat()함수 예

var won = '1000원';
var dollar = '1.5$';
alert(parseInt(won)  + ' : ' + parseInt(dollar)); // 1000 : 1
alert(parseFloat(won)  + ' : ' + parseFloat(dollar)); // 1000 : 1.5

$1000같은 문자열은 앞에서부터 읽기 때문에 반환할 수 없습니다.