“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
자바스크립트 함수(function)
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.
자바스크립트에서는 함수도 하나의 타입(datatype)입니다.
따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다.
또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다.
함수 정의
자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다.
1. 함수의 이름
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
3. 중괄호({})로 둘러싸인 자바스크립트 실행문
자바스크립트에서 함수를 정의하는 문법은 다음과 같습니다.
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}함수 이름(function name)은 함수를 구분하는 식별자(identifier)입니다.
매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.
argument란?
- 함수가 호출될 때 함수로 값을 전달해주는 변수나 상수를 의미합니다.
JavaScript 함수의 특징
- 함수는 Function 객체이다.
- 함수도 하나의 데이터타입이다. 따라서 함수를 변수에 대입하거나 프로퍼티 지정하는 것이 가능하다.
- 기본적으로 함수는 undefined를 반환한다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 return 문이 있어야 한다.
- 다른 함수 내에 중첩되어 정의될 수 있다.
함수가 필요한 이유
- 재사용성 : 같은 작업을 여러 곳에서 반복해야 할 때 함수로 만들어 필요할 때마다 호출하여 사용하면 편리하다.
- 가독성 : 함수의 이름만 보고도 어떤 기능을 수행하는지 유추할 수 있다.
- 모듈화 : 유지보수나 버그 발생 시 편리하다.
01. 선언적 함수
선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다.
따로 변수에 넣어주지 않고 선언할 때 붙여준 이름을 호출하면 된다.
{
function func(){
document.write("실행되었습니다.");
}
func();
}
// 결과 : 실행되었습니다.
02. 익명 함수
익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
{
const func = function(){
document.write("실행되었습니다.");
}
func();
}
// 결과 : 실행되었습니다.
03. 매개변수 함수
매개변수는 함수 호출시 데이터를 입력 받는 기능을 말한다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.");
}
// 결과 : 실행되었습니다.
04. 리턴값(결과/끝) 함수
return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능을 말한다.
{
function func(){
const str = "실행되었습니다.";
return str;
}
document.write(func());
}
// 결과 : 실행되었습니다.
화살표 함수
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.
바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다.
let func = (arg1, arg2, ...argN) => expression이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어집니다.
함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.
아래 함수의 축약 버전이라고 할 수 있죠.
let func = function(arg1, arg2, ...argN) {
return expression;
};
다음은 본문 위쪽에 나온 함수들을 화살표 함수로 바꾼 예시를 보여드리겠습니다.
05. 화살표 함수 : 선언적 함수
- 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다.
- function을 지우고 func() 괄호 사이에 화살표를 넣는 방법이다.
{
func = () => {
document.write("실행되었습니다.");
}
func();
}
// 결과 : 실행되었습니다.
06. 화살표 함수 : 익명 함수
- 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
- function을 지우고 func() 괄호 사이에 화살표를 넣는 방법이다.
{
const func = () => {
document.write("실행되었습니다.");
}
func();
}
// 결과 : 실행되었습니다.
07. 화살표 함수 : 매개변수 함수
- 매개변수는 함수 호출시 데이터를 입력 받는 기능을 말한다.
- function을 지우고 func() 괄호 사이에 화살표를 넣는 방법이다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}
// 결과 : 실행되었습니다.
08. 화살표 함수 : 리턴값(결과/끝) 함수
- return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능을 말한다.
- function을 지우고 func() 괄호 사이에 화살표를 넣는 방법이다.
{
func = () => {
const str = "실행되었습니다.";
return str;
}
document.write(func());
}
// 결과 : 실행되었습니다.
위에 나온 4개의 화살표 함수 방법과는 또 다른 화살표 함수를 알아보겠습니다.
배우면서 굉장히 신기했습니다.
와... 방법들이 굉장히 많구나... 외울 것이 굉장히 많구나...ㅎㅎㅎ
같이 열심히 외워봅시다..!
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
- 화살표 함수를 통해서 익명 함수와 매개변수와 리턴값을 같이 사용할 수 있습니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
// 결과 : 실행되었습니다.
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
- 화살표 함수를 통해서 익명 함수와 매개변수와 리턴값을 같이 사용하면서 괄호를 생략할 수 있습니다.
{
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}
// 결과 : 실행되었습니다.
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
- 화살표 함수를 통해서 익명 함수와 매개변수와 리턴값을 같이 사용하면서 괄호와 리턴을 생략할 수 있습니다.
리액트에서 가장 많이 사용됩니다.
{
const func = str => str;
document.write(func("실행되었습니다."));
}
// 결과 : 실행되었습니다.
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
- 화살표 함수를 통해서 선언적 함수의 형식으로 익명 함수와 매개변수와 리턴값을 같이 사용하면서 괄호와 리턴을 생략할 수 있습니다.
- 익명에서 선언적 함수로 바꿔줌 (단점 : this를 사용할 수 없음)
{
func = str => str;
document.write(func("실행되었습니다."));
}
// 결과 : 실행되었습니다.