“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
함수(Function)
함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다.
함수는 JavaScript에서 기본 구성 요소 중 하나입니다.
JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 프로시저(procedure)와 비슷하지만,
프로시저가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 합니다.
JavaScript 함수의 특징
- 함수는 Function 객체이다.
- 함수도 하나의 데이터타입이다. 따라서 함수를 변수에 대입하거나 프로퍼티 지정하는 것이 가능하다.
- 기본적으로 함수는 undefined를 반환한다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 return 문이 있어야 한다.
- 다른 함수 내에 중첩되어 정의될 수 있다.
함수가 필요한 이유
- 재사용성 : 같은 작업을 여러 곳에서 반복해야 할 때 함수로 만들어 필요할 때마다 호출하여 사용하면 편리하다.
- 가독성 : 함수의 이름만 보고도 어떤 기능을 수행하는지 유추할 수 있다.
- 모듈화 : 유지보수나 버그 발생 시 편리하다.
01. 선언적 함수
- 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다.
- 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름을 호출하면 된다.
- '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.
{
function func(){
document.write("실행되었습니다."); // 실행문
}
func();
}
// 결과 : 실행되었습니다.참고!
선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.
변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만,
var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다.
이러한 자바스크립트 성질을 '끌어올리기' 호이스팅(Hoisting)이라고 합니다.
02. 익명 함수
- 익명 함수는 이름이 없는 함수를 말합니다.
- 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
- 익명 함수는 변수 선언 이후에 호출해야 합니다.
{
const func = function(){
document.write("실행되었습니다.");
}
func();
}
// 결과 : 실행되었습니다.
03. 매개변수 함수
- 매개변수는 함수 호출시 데이터를 입력 받는 기능을 말합니다.
- 함수를 호출할 때 전달하는 변수를 '매개변수' 라고 합니다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.");
}
// 결과 : 실행되었습니다.
04. 리턴값(결과/끝) 함수
- return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.
- 함수 내부에서 return 명령문이 실행될 경우, 해당 함수가 종료된다.
- 즉, return은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 해준다.
{
function func(){
const str = "실행되었습니다.";
return str;
}
document.write(func());
}
// 결과 : 실행되었습니다.return 함수를 쓰는 이유
리턴 함수를 사용하든 안 하든 값은 출력이 되지만,
리턴 함수를 사용하면 함수 외부에서도 결과값이 유효하다.
(함수 안에서 계산한 결과값을 리턴을 통해 함수 호출한 쪽으로 되돌려줌)
리턴 함수를 안 쓰면 그 결과값은 함수 안에서 끝나고 종료된다.
05. 화살표 함수
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다.
본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.
중괄호 없이 작성 : (...args) => expression - 화살표 오른쪽에 표현식을 둡니다.
함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
다음은 위에 나온 함수들에 화살표 함수를 적용해 보겠습니다.
// 01. 화살표 함수 : 선언적 함수
{
func = () => {
document.write("실행되었습니다.");
}
func();
}
// 02. 화살표 함수 : 익명 함수
{
const func = () => {
document.write("실행되었습니다.");
}
func();
}
// 03. 화살표 함수 : 매개변수 함수
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}
// 04. 화살표 함수 : 리턴값(결과/끝) 함수
{
func = () => {
const str = "실행되었습니다.";
return str;
}
document.write(func());
}