봉봉의 개인 블로그

2017-11-30(자바스크립트의 다양한 함수 사용법) 본문

입사후 공부한내용

2017-11-30(자바스크립트의 다양한 함수 사용법)

봉봉이네 2017. 11. 30. 21:14

자바스크립트에는 다양한 함수 선언 방법들이 있다.

1
2
3
4
5
6
7
8
var functionName = function(){
    return Number * Number;
}
 
 
function functionName(Number){
    return Number * Number;
}
cs

자바스크립트에서 가장 기본적으로 함수를 선언하는 방법 2가지 이다. 위에 두 함수는 같은 결과값을 낸다.
첫번째는 자바스크립트에서 가장 기본적인 함수 선언 방식이다. 두번째 함수 선언 방식은 첫번째 함수 선언 방식에 비해 더 간단하다. 두 가지 중 무엇을 사용해도 상관은 없다.


1
functionName(5); // 25
cs

위에 코드는 자바사크립트의 함수를 사용(호출)할때의 코드이다. 모든 함수를 선언했으면 함수를 사용해야하는데 자바스크립트에서는 함수를 사용하는 법은 하나뿐이다.

1
function(){return 'return'}
cs

위는 익명 함수다. 함수를 이름없이 바로 사용한다.

1
2
3
4
5
6
var functionName = function(Number){
    var numberResult = function(){
        return Number * Number;
    }
    return numberResult;
}
cs

이러한 자바스크립트의 함수 정의는 클러저(closures)라고 한다. 하나의 기능을 하는 함수에 외부 함수 내부 함수를 구분하여 나타낸다.클러저를 사용하면 내부 함수를 closure를 한다. 그래서 외부에서는 외부 함수만 접근하여 내부 함수를 캡슐화를 한다. 그리고 내부 함수는 외부 함수까지 유효범위가 생긴다. 내부 함수에서 외부함수의 변수를 사용할 수 있다.그래서 외부 함수가 실행 후에도 외부 함수의 내용들은 내부함수가 실행을 마칠때까지 유지가 된다. 사용방법은 내부함수는 외부함수의 정보들을 사용하여 return 하고 외부함수에서는 내부 함수를 반환해야 외부에서 접근이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var User = function(id,pw){
    return{
        setId:function(updateId){
            id = updateId;
        },
        setPw:function(updatePw){
            pw = updatePw;
        },
        getId:function(){
            return id;
        },
        getPw:function(){
            return pw;
        }
    };    
};
 
var  = User();
kimminsu.setId('packminsu');
kimminsu.setPw('pw01');
kimminsu.getId(); //packminsu
kimminsu.getPw(); //pw01
cs
Set으로 시작하는 메서드들은 값을 입력받을때 사용하는 메서드고 get으로 시작하는 함수들은 현재 해당하는 함수의 값을 나타내는 메서드들입니다. 만약 내부 변수에도 외부에 인자 값이 필요하다면 User()(5);으로 괄호를 두개를 생성하여 내부함수에 전달한다는 의미를 부여한다.

1
var functionName = ((Number=> {return Number * Number;});
cs
위에 방식들과는 많이 다르다. 이렇게 표현되는 함수를 화살표함수 또는 람다식으로 표현되는 방식이다. 자바스크립트에서는 화살표함수(arrow function)라고 표현한다. 화살표 함수는 다른 자바스크립트 함수 정의들 중 가장 짧고 가장 현대적인 방식이다. 그리고 다양한 언어에서는 "람다"라는 이러한 표현방식을 사용하고있다.

1
var 함수명 = (매개변수) => {실행할}
cs

화살표 함수는 일반함수들의 표현 법과 다른점은 "function" 이라는 키워드가 필요 없어지고 "=>"이란 표현이 생겼다.

1
2
3
4
5
6
7
8
9
10
11
var ramdafunction1 = () => {return 'Hi'};
var ramdafunction2 = one => {return one};
 
setInterval(three => {
 
}, 1000);
 
((one,tow)=>{return one+tow})(20,30); // 50  익명함수
 
ramdafunction1(); // Hi
ramdafunction2(3); // 3
cs

화살표 함수에는 다양한 규칙들이 있는데 기본적으로 변수로 선언하여 매개변수가 하나면 괄호를 사용 안해도 된다. 만약 없거나 여러개의 매개변수면 괄호를 표현해야 한다. 그리고 내장되어있는 함수나 익명함수를 사용할 때는 괄호가 필요하다. 그리고 일반 함수처럼 객체에는 사용을 못한다.
1
2
3
function(){
    a1:function(){...}
}
cs

화살표 함수는 사용하기 편리하지만 규칙이나 제약이 있어서 꼭 화살표 함수만 고집하는 것보단 일반적인 함수 선언 방식과 같이 사용하는 것이 바람직하다.

1
2
3
function(){
    a1:() => {...}
}

cs

위와 같은 방식은 없다.


Comments