자바스크립트의 함수(function)
자바 스크립트의 함수 (function)
자바 스크립트의 함수란 하나의 특별한 목적을 수행하도록 만들어진 독립적인 블록을 말한다.
한번 지정해놓으면 필요할때마다 불러서 사용할 수 있어 코드 절약에 큰 도움이 된다.
그리고 이러한 자바스크립트의 함수는 자바, C언어의 그것보다 훨씬 더 발전된 형태를 가진다.
그리고 이러한 기능 덕분에 함수를 여러 면에서 활용할 수 있다.
함수의 선언
함수 선언의 가장 기본 형태는 'function'을 이용하는 것이다.
참고로 이러한 함수를 만들때는 가급적 한 가지 함수는 한 가지 기능만 하도록 만든다.
함수 하나로 여러개를 한 번에 처리할 경우 유지보수에 문제가 생길 수 있다.
|
function 함수명 ( 파라미터 삽입 ) { 함수 실행부 } |
<body>
<script>
function func1(){};
function func2(){
console.log("테스트") // 해당 문장을 출력하는 함수
};
function func3(a,b){
return a+b; // a,b를 파라미터로 받아서 더한 후 반환하는 함수
};
</script>
</body>
변수에 함수 저장
자바스크립트에서는 함수를 일종의 자료형으로 취급한다.
함수를 Object(객체)로 다룬다. 그래서 다음과 같이 함수 활용이 가능하다.
- 변수나 배열의 요소, 객체의 프로퍼티에 할당 가능.
- 함수의 인자(파라미터)로서 전달 가능
- 함수의 리턴값으로 리턴 가능
그리고 이런 기능이 모두 가능한 객체를 일급객체(first-class object)라고 부른다.
그래서 자바스크립트이 함수는 변수에도 저장되고 함수의 인자 또는 리턴값 등으로 사용이 가능하다.
<body>
<script>
let test = function func1(a,b){
return a+b;
};
console.log(test(3,4)); // 7이 출력됨
</script>
</body>
위와 같이 변수에 함수를 저장해서 함수로 이용할 수 있다.
단, 이때 변수에 함수를 저장하여 사용할 경우 호이스팅 적용 대상이 아니다.
자바스크립트는 호이스팅(hoisting)이란 기능을 지원한다.
이는 문서 내에서 함수를 선언했을 경우 그 선언을 문서의 최상단에서부터 실행할 수 있게 만든다.
그 다음 실제 함수 선언된 부분보다 위에서 문서를 실행되도 함수가 실행되도록 만든 기능이다.
<body>
<script>
test(2) // 2 출력
function test(x){
console.log(x);
}
test(1) // 1출력
</script>
</body>
위와 같이 함수 선언을 한 경우 선언한 함수의 위치보다 더 빠른 위치에서 함수를 실행해도 오류가 없다.
하지만 아래와 같이 함수를 변수에 할당할 경우 호이스팅이 되지 않는다.
그래서 실제 함수가 있는 위치보다 더 빠른 위치에서 함수를 실행하면 오류가 난다.
<body>
<script>
test2(3); // 오류남
let test2 = function test(x){
console.log(x);
}
test2(1); // 1 출력
</script>
</body>
함수의 축약 표현
위와 같이 긴 함수 표현은 아래와 같이 간략하게 나타낼 수 있다.
함수명도 필요없고 그냥 파라미터와 화살표 그리고 바로 실행부를 표현하면 끝이다.
게다가 실행부가 길지 않고 한 줄로 끝낼 수 있다면 중괄호도 필요 없고 실행부만 써주면 된다.
실행부가 길지 않고 바로 리턴이 가능하다면 return 명령어로 생략이 가능하다.
실행부가 길어지면 { } 중괄호를 넣어서 그 안에서 처리해야 하고 return 명령어 생략이 불가하다.
|
( 파라미터들 ) => { 실행부 } |
<body>
<script>
var test = function func1(a,b){ return a+b };
var test = (a,b) => a+b; // a+b를 return
var test = (a,b) => { return a-b }; // a-b를 return
console.log(test(3,4));
</script>
</body>
이러한 함수 표현을 화살표 함수 표현(arrow function expression)이라고 한다.