-
자바스크립트의 함수(function)프론트엔드/JavaScript 2020. 9. 10. 01:32
자바 스크립트의 함수 (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)이라고 한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바와 자바스크립트 클래스와 오브젝트 (0) 2020.09.11 자바스크립트 함수와 매개변수, 인수 (0) 2020.09.10 자바스크립트의 배열(Array) (0) 2020.09.10 for...of / for...in 에 대해서 (0) 2020.09.09 자료형 변환(type conversion) (0) 2020.09.09