9. arrow
- ES6에서 도입된 화살표 함수(arrow function)은 function 키워드 대신 화살표(fat arraw =>)를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.
- 화살표 함수는 익명 함수로 정의한다.
<title>화살표 함수</title>
</head>
<body>
<script type="text/javascript">
let print = (x)=>{ //=>를 인자 뒤에 넣어줌
document.write(x);
}
print(10);
document.write('<br>--------<br>');
let print2 = (x)=>{
return x + 10;
}
document.write(print2(20));
document.write('<br>--------<br>');
//인자가 하나일 경우 () 생략 가능
let print3 = x=>{
return x * 10;
}
document.write(print3(30));
document.write('<br>--------<br>');
let multi = (x,y)=>{return x * y;}
document.write(multi(3,6));
document.write('<br>--------<br>');
//중괄호를 생략하고 아래와 같이 명시하면 (x,y)=>{return x + y};와 동일하게 동작함
let add = (x,y)=> x + y;
document.write(add(2,5));
//{}를 생략할 수 없음. 만약 중괄호를 생략하면 {return let x = 10;}으로 인식하기 때문에 에러 발생
let print4 = ()=>{let x = 10};
//return과 함께 중괄호 생략가능, return문장이 아닌 것은 생략 불가능
</script>
</body>
</html>10. parameter
<title>함수를 매개변수로 받는 함수</title>
</head>
<body>
<script type="text/javascript">
//함수의 매개변수를 통해서 다른 함수를 함수 내부로 전달할 수 있음
//함수 내부로 전달되는 함수를 '콜백 함수'라고 함
//함수를 10번 호출하는 함수
function callFunctionTenTimes(otherFunction){
for(let i=0;i<10;i++){
otherFunction(); //매개변수로 전달된 콜백 함수를 실행
}
}
//콜백 함수 정의(선언적 함수)
function justFunction(){
document.write('Happy Day!!<br>');
}
//아래와 같이 justFunction()로 명시하면 함수의 매개변수에 함수가 전달되는 것이 아니라
//함수를 한 번 실행하기 때문에 함수는 종료되고 전달되는 함수가 없어서 오류 발생
//callFunctionTenTimes(justFunction());
//함수 호출(선언적 함수를 매개 변수에 전달)
callFunctionTenTimes(justFunction);
document.write('--------------------<br>');
//함수 호출(익명함수를 매개변수에 전달)
callFunctionTenTimes(function(){
document.write('Hello World!!<br>');
});
</script>
</body>
</html>11. inner
1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부함수</title>
</head>
<body>
<script type="text/javascript">
function f(){
//내부함수
function g(){
document.write('g is called');
}
//내부함수 호출
g();
}
//함수 호출
f();
</script>
</body>
</html>2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부함수</title>
</head>
<body>
<script type="text/javascript">
function f(){
//변수 선언 및 초기화
let n = 123;
//내부함수 정의
function g(){
document.write('n is ' + n + '<br>');
document.write('g is called');
}
//내부함수 호출
g();
}
//함수 호출
f();
</script>
</body>
</html>3)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부함수</title>
</head>
<body>
<script type="text/javascript">
function f(){
//변수 선언 및 초기화
let n = 123;
function g(){
document.write('n is ' + n + '<br>');
document.write('g is called');
}
return g; //내부함수 반환
}
//함수 호출
let m = f();
document.write(m + '<br>'); //g함수 단순 출력
document.write('------------<br>');
//m에 저장된 g함수 호출
m();
</script>
</body>
</html>4)
- 지역 변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.
- 클로저를 이용하면 지역 변수를 남겨둘 수 있다.
- 지역 변수를 남겨두는 현상을 클로저라고 부름<title>지역변수의 유효범위 - 클로저</title>
</head>
<body>
<script type="text/javascript">
function outerFunction(name){
//지역변수 선언 및 초기화
let output = 'Hello ' + name + '..!';
//내부함수를 정의하고 정의한 내부함수 반환
return function(){
alert(output);
};
}
let m = outerFunction('홍길동');
m(); //지역변수를 남겨두는 클로저 현상
</script>
</body>
</html>12. isFinite
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isFinite함수</title>
</head>
<body>
<script type="text/javascript">
let number1 = 10 / 0;
document.write('number1 = ' + number1 + '<br>');
//양수일 때는 가능하지만 음수일 때는 사용할 수 없음
if(number1 == Infinity){
document.write('무한<br>');
}else{
document.write('유한<br>');
}
document.write('------------<br>');
//양수,음수를 0으로 나눴는지 아닌지 모두 검증 가능
if(isFinite(number1)){ //0이 아닌 수로 나눈 경우
document.write('유한<br>');
}else{ //0으로 나눈 경우
document.write('무한<br>');
}
</script>
</body>
</html>13. isNaN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isNaN함수</title>
</head>
<body>
<script type="text/javascript">
let number = 10 / 'A'; //NaN(Not a Number) 출력
document.write('number = ' + number + '<br>');
if(number == NaN){ //항상 false로 반환하기 때문에 isNaN 함수를 사용해야 함
document.write('숫자가 아님<br>');
}else{
document.write('숫자임<br>');
}
document.write('---------------<br>')
//전달되는 인자의 값이 숫자인지 아닌지 판별
if(isNaN(number)){
document.write('숫자가 아님<br>');
}else{
document.write('숫자임<br>');
}
</script>
</body>
</html>14. parseInt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parseInt(), parseFloat()</title>
</head>
<body>
<script type="text/javascript">
let num = '1234';
let won = '1234원';
let won2 = '원1234';
document.write(Number(num) + '<br>'); //String --> number
document.write(parseInt(num) + '<br>');
document.write('------------<br>');
document.write(Number(won) + '<br>'); //NaN
document.write(parseInt(won) + '<br>'); //앞의 숫자를 추출해서 형변환
document.write('------------<br>');
document.write(Number(won2) + '<br>'); //NaN
document.write(parseInt(won2) + '<br>'); //NaN
document.write('------------<br>');
let num2 = '24.56';
let dollar = '1.56$'; //인정
let dollar = '$1.56'; //불인정
document.write(Number(num2) + '<br>'); //String --> number
document.write(parseFloat(num2) + '<br>');
document.write('------------<br>');
document.write(Number(dollar) + '<br>'); //NaN
document.write(parseFloat(dollar) + '<br>'); //앞의 숫자를 추출해서 형변환
document.write('------------<br>');
document.write(Number(dollar2) + '<br>'); //NaN
document.write(parseFloat(dollar2) + '<br>'); //NaN
document.write('------------<br>');
let no1 = '10';
let no2 = '3.67';
document.write(parseFloat(no1) + '<br>'); //10
document.write(parseInt(no2)); //소수점 이하 자리 절삭
</script>
</body>
</html>15. encoding
[encoding 관련 함수]
함수 이름 설명
escape(url) 적절한 정도로 인코딩함
unescape(url) 적절한 정도로 디코딩함
encodeURI(url) 최소한의 문자만 인코딩함
decodeURI(url) 최소한의 문자만 디코딩함
encodeURIComponent(url) 대부분의 문자를 인코딩함
encodeURIComponent(url) 대부분의 문자를 디코딩함<title>encoding 관련 함수</title>
</head>
<body>
<script type="text/javascript">
let URL = 'http://www.naver.com?test=한글입니다.';
let output = '';
output += '*escape()<br>';
output += escape(URL) + '<br><br>';
output += '*encodeURI()<br>';
output += encodeURI(URL) + '<br><br>';
output += '*encodeURIComponent()<br>'
output += encodeURIComponent(URL);
document.write(output);
</script>
</body>
</html>