[JS] 함수 선언문 / 함수 표현식

- 함수는 값으로 취급된다.

- 함수의 자료형은 호출이 가능한 객체이다.

- 함수는 객체처럼 함수에 프로퍼티를 추가·제거하거나 참조를 통해 전달할 수도 있다.

---

함수 선언문

function name(parameters){
 code block
}

• function: 키워드
• name: 함수 이름
• parameters: 매개변수(매개변수가 여러 개 있다면, 콤마로 구분)

* parameter와 argument의 차이

---

함수 표현식

익명 함수 표현식

let funcName = function(){ ... };

함수를 만들고, 그 함수를 변수에 할당한다.

 

기명 함수 표현식

let funcName = function func(){ ... };

function 뒤에 이름을 붙인다.

 

Q. 기명 함수 표현식과 익명 함수 표현식의 차이는?

1. 기명 함수 표현식은 함수에 이름을 사용해서 함수 표현식 내부의 자기 자신을 참조할 수 있다.
2. 기명 함수 표현식의 함수의 이름은 외부에서 사용할 수 없다.

// 기명 함수 표현식
let namedFun = function fun(who){
  if(who){
    console.log(who + '님, 환영합니다.');
  } else {
    fun('손'); // ----------------------------- 기명 함수 사용
  }
};

// 익명 함수 표현식
let anonymousFun = function(who){
  if(who){
    console.log(who + '님, 환영합니다.');
  } else {
    anonymousFun('손'); // --------------------- 자신의 함수 사용
  }
};

// 새로운 변수에 할당
let copy_namedFun = namedFun;
let copy_anonymousFun = anonymousFun;

// 기본의 변수에 null 할당
namedFun = null;
anonymousFun = null;

---

함수 선언문과 함수 표현식의 세미콜론 유무

함수 선언문에는 세미콜론이 없지만, 함수 표현식에는 세미콜론이 붙어있다.

function name(){ ... }
let name = function(){ ... };

if문, for문, 함수 선언문과 같이 중괄호로 만든 코드 블록(statement) 끝에는 세미콜론이 없어도 된다.
하지만 함수 표현식은 값(value)의 역할을 하기 때문에 세미콜론을 붙이는게 좋다.

---

함수를 호출하는 방법

name();

함수 이름 오른쪽에 "실행 연산자"를 사용해서 호출할 수 있다.

 

[실행 연산자를 사용하지 않았을 경우]

name

함수 소스 코드가 문자형으로 바뀌어 출력된다.

---

함수를 복사하는 방법

let user;
user = age //함수의 소스 코드가 복사되면서 user()을 사용할 수 있게 된다.
user = age() //함수의 값이 복사된다.

---

함수의 값을 반환(return)하는 방법

function name(){
  return 'mill';
}

- "지시자 return"을 사용한다.

- return은 함수 내 어디서든 사용할 수 있다.
- 실행 흐름이 return을 만나면 함수 실행은 즉시 중단되고, 함수를 호출한 곳에 값을 반환한다.

- return문이 없거나, return 지시자만 있으면 undefined를 반환한다.

 

[주의사항]

return과 값 사이에 새 줄을 넣어 코드를 작성하면 아무것도 반환하지 않는다.

function sum(one, two){
  return
  one + two
}
sum(3, 7) //undefined

여러 줄에 걸쳐 작성하고 싶다면 괄호를 사용해야 한다.

function sum(one, two){
	return (
        one + two
    )
}
sum(3, 7) //10

---

[공부 좌표]

함수

함수 표현식

 

[참고]

Q. 함수 선언문과 함수 표현식의 차이는?