본문 바로가기
IT/JavaScript

함수

by 봉즙 2019. 6. 11.

함수의 선언 방법 2가지

  • function 함수이름 (){};
  • var 함수이름 = function(){};
1
2
3
4
>function add(x,y){ return x+y;}
<undefined
>add(3,5);
<8

 

1
2
3
4
var add = function(x,y) {return x+y;}
undefined
add(3,5);
8
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

함수의 이름이 들어가야할 위치가 비어있기에 익명함수를 사용한것이다. 

Array 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
>var arr = [];
<undefined
>var arr= [1,2,3,4,5];
<undefined
>var arr = new Array(100);
<undefined
>arr.length;
<100
>var arr = new Array(100,200);
<undefined
>arr.length;
<2
>arr
<(2) [100200]

Array함수는 배열이기에 변수의 갯수에 따라 길이가 달라진다.

1
2
3
4
5
>function sumAll(){
    alert(typeof (arguments) + ' : ' + arguments.length);}
<undefined
>sumAll(1,2,3,4,5,6,7,8,9);
<undefined

object를 출력하게 되며 9개의 매개변수를 입력하였기에 9가 출력된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
>function sumAll(){
    alert(typeof (arguments) + ' : ' + arguments.length);}
<undefined
>sumAll(1,2,3,4,5,6,7,8,9);
<undefined
>function sumAll(){
    var output =0
    for(var i =0; i < arguments.length; i++){
        output += arguments[i];
    }
    return output;
}
<undefined
>alert(sumAll(1,2,3,4,5,6,7,8,9));
<undefined

arguments 배열 내의 모든 요소를 더한 후 출력하기에 45가 나오게 된다. 자바스크립트에서는 오버로딩이 불가능하기에 arguments의 조건문을 통해 오버로딩과 같은 효과를 낸다. 

arguments 객체는 모든 함수내에서 이용가능한 LV이며 함수내에서 모든 인수를 참조 가능하다. 배열과 같이 index를 가지고 있어 length를 가능하지만 배열의 기능은 가지고 있지않다. 그러나 배열로의 변환이 가능하다.

리턴값 : return문 사용시 return에 관한 부분은 같은줄에서 사용하지 않으면 두줄로 인식하게된다.

내부함수 : 프로그램의 규모가 커지게 되어 충돌이 발생하는 것을 막기위에 함수 안에 함수를 넣는 내부함수를 사용 가능하다. 함수의 이름충돌을 막기 위해서는 아래와 같이 일종의 캡슐화를 진행한다.

1
2
3
4
5
>function pythagoras(whit, heigth){
    function square(x) {
        return x*x;
    }
    return Math.sqrt(sqare(width) + square(height));}

 

콜백함수 : 매개변수로 전달하는 함수

1
2
3
4
5
6
7
8
>var myFunc = function(){alert("Hello");};
<undefined
>myFunc();
<undefined
>(myFunc)();
<undefined
>(function(){alert("Hello");})();
<undefined

 

eval(string) : String을 해석하여 자바스크립트 코드로 실행한다. 위험함수로 분류되어 잘 사용하지 않는다.

isFinite() : number가 무한한 값인지 확인

isNaN() : number가 NaN인지 확인

Number()와 parseInt()의 차이

  • Number()의 경우 해석이 불가능한 문자를 가지고 있다면 NaN을 출력한다.  그러나 parseInt()의 경우 해석이 불가능한 문자 전까지 해석을 하고 진행된 부분까지 출력을 한다.
1
2
3
4
>Number("100px");
<NaN
>parseInt("100px");
<100

 

함수 코드 함

1
2
3
4
5
6
7
8
9
10
>function test(a,b,c){
    if(!b){
        b=52;
    }
    if(!c){
        c=273;
    }
    alert("a="+a+",b="+b+",c="+c);
}
<undefined

위와 같은 코드를 if(!b)는 b = b||52를 사용해서 줄일수도 있지만 아래와 같이 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
>function test(a,b,c){
    if(!b){
        b=52;
    }
    if(!c){
        c=273;
    }
    alert("a="+a+",b="+b+",c="+c);
}
<undefined
>function test(a,b=52,c=273){
    alert("a"+a+",b="+b+",c="+c);}
<undefined
>test(1);
<undefined

 

화살표 함수 : 람다식을 의미  () => {}

1
2
3
4
5
6
>const multiply = (a,b) => a*b;
<Mundefined
>multiply(2,5)
<10
>((a,b)=>a*b)(2,5)
<10

 

전개 연산자 : ... 3개를 찍어 표기, 가변 매개변수 함수를 만들때 사용, 내부함수에서 매개변수를 배열로 사용가능.

1
2
3
4
5
>Function test(...aruguments) { 
alert(aruguments[0]);
alert(aruguments[1]); 
alert(aruguments[2]); 
}

 

1
2
3
4
5
6
7
8
9
10
>function test(a,b,c,d){alert (`${a}:${b}:${c}:${d}`);}
<undefined
>test(1,2,3,4);
<undefined
>var arr= [1,2,3,4];
<undefined
>test(...arr);
<undefined
>test(arr);
<undefined
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

test(...arr)은 배열이 하나하나 들어가며, test(arr)은 배열하나에 통째로 들어간다.

 

 

 

 

 

 

 

 

'IT > JavaScript' 카테고리의 다른 글

Event  (0) 2019.06.12
DOM(Document Object Model)  (0) 2019.06.12
반복문  (0) 2019.06.11
조건문  (0) 2019.06.11
기본 문법  (0) 2019.06.11

댓글