함수 function
함수는 어떤 값을 받아서 결과를 내보내는 구문입니다. 더 쉽게 말하자면, 특정 기능을 갖는 코드라고도 생각해볼 수 있습니다. 이 함수들은 자바스크립트 내장 객체에 제공하기도 하고(이 경우 메소드라고 부릅니다.) 사용자가 함수를 직접 정의해서 사용할 수도 있습니다.
함수의 선언 방법
자바스크립트에서 함수를 선언하는 방법은 네 가지 방식이 존재합니다.
- function 명령
- Function 생성자
- 함수 리터럴 표현
- 애로우 함수(화살표 함수)
자세한 방법은 각 포스트에서 다루겠습니다. 추가적으로 애로우 함수같은 경우는 함수 리터럴 표현의 간결 문법입니다. 그래서 사실상 리터럴과 합쳐서 세 가지라고 해도 무방하나, 저는 따로 분류했습니다.
함수의 기본 구조
함수는 다음과 같은 구조를 갖습니다.
함수명(인수) {
반환값;
}함수명은 함수를 불러오고 이용하는데, 마치 변수처럼, 사용되는 함수의 이름입니다. 함수의 이름을 명명하는데도 기본 규칙이 있습니다.
- 기본적으로 변수 명명 규칙을 따른다.
- 함수의 이름은 함수의 동작이 쉽게 연상될 수 있도록 짓는다.
- 함수의 이름은
동사 + 명사의 형태로 짓는다. 예) getWidth, getSum, setColor 등
인자(parameter)는 함수가 동작하는데 필요한 변수를 지정합니다. 함수의 인자는 없을 수도 있고 하나 이상일 수도 있습니다. 인자로 사용되는 변수는 해당 함수 블록 내부에서만 유효하다는 점(로컬 스코프)을 주의해서 사용해야합니다.
반환값은 함수의 처리 결과를 외부로 내보내기 위한 값 입니다. return명령을 통해 함수를 종료함과 동시에 값을 돌려줍니다. 그래서 대부분의 함수의 끝은 return명령으로 종료됩니다. 함수의 반환값은 필수요소가 아니기 때문에 반환값(return명령)이 존재하지 않을 수도 있습니다. 이 경우 함수는 자동적으로 undefined를 반환합니다.
return
return명령을 좀 더 자세히 알아보겠습니다. return명령은 함수를 종료시키고 반환값을 돌려주는 역할을 합니다. 그래서 return을 사용할 때는 절대로 도중에 개행을 하지 않습니다.
자바스크립트는 명령의 종료를 세미콜론;으로 구분하는데, 세미콜론을 따로 기입하지 않을 경우 자동적으로 세미콜론을 삽입하여 스크립트를 해석합니다. 그래서 return명령 도중 개행할 경우 다음과 같이 두 개의 별개의 문장으로 분리됩니다.
return
num1 + num2;
//다음과 같이 스크립트가 해석됩니다.
return;
num1 + num2;이런 경우 당연히 return에서 함수가 종료되었기 때문에 아래있는 'num1 + num2'문장은 실행되지 않습니다. 그렇기 때문에 return명령은 개행없이 사용해야합니다.
만일 부득이하게 return에 개행을 해야한다면, 다음과 같이 소괄호()를 사용해서 묶어줍니다.
return (
num1 + num2;
);