[J.S] 9. 함수를 정의하는 방법

9.0 함수 정의 방법

함수는 여러가지 방식으로 정의가 가능

• 함수 선언문(functio declarartion statement) 
• 함수 표현식(fuction expression)
• 화살표 함수(arrow function)

9.1 함수 선언문으로 함수 정의하기

• function 키워드와 함수 이름을 사용해 함수를 선언 하는 방법
• 호이스팅 덕분에 함수 선언전에 호출 가능

형식

fucntion 식별자(){}

식별자()

또는 

식별자()

fucntion 식별자(){}

function greet() {

  console.log("안녕하세요!");

}

greet()

greet()

function greet() {

  console.log("안녕하세요!");

}

9.2 함수 표현식으로 함수 정의하기

자바스크립트에서 함수는 객체에서 파생된 자료형

함수도 변수에 할당할 수 있는 값으로 취급

 

함수표현식은 함수를 변수에 할당 하는 방식으로 함수를 정의 

 

1) 익명 함수 (anonymous fucntion)

const greet = function () {

  console.log("안녕하세요! 함수입니다.");

};

greet(); // 함수 호출 문제 없음

• function키워드 뒤에 이름이 없음
• 변수 greet에 바로 할당된 함수
• 변수 greet를 통해서만 호출이 가능,
• 함수 내부서 자신을 참조 시 다른 방법을 사용해야 함

2) 네이밍 함수 (naming function)

const greet = function greet() {

  console.log("안녕하세요! 네이밍 함수입니다.");

};

greet(); // 함수 호출

• function키워드 뒤에 이름이 있음
• 함수 이름과 변수 이름이 같음
• 함수 이름은 함수 내부에서 자기 자신을 참조할 때 주로 사용
• 변수 greet에 함수가 할당되어 있어 greet() 호출시 함수 실행
• 함수 이름은 내부에서만 유효, 함수 외부에서 사용 불가

3) 네이밍 함수 표현식 : 변수 이름과 함수 이름 다름

const greet = function greetnaming() {

  console.log("안녕하세요! 네이밍 함수입니다.");

};

greetnaming(); // 함수 호출 오류발생

• 변수 이름은 greet이지만 함수 이름이greetnaming
• 함수 이름 greetnaming은 함수 내부에서만 유효한 식별자 이기 에 외부에서 호출시 오류발생
• 외부에서는 greet 변수만 접근이 가능하기에 호출은 greet()로 해야 

9.2.1 특징

• 함수 표현식을 정의한 함수는 호이스팅이 되지 않음
• 변수에 할당된 함수가 실행 시점에 결정됨
• 함수 정의 이후에만 호출 가능

9.3 화살표 함수로 정의하기

• ES6 에서 추가된 함수 정의 밥식
• 화살표를 사용해 간결하게 함수를 정의 하는 최신 방법
• 특히 짧은 함수나 콜백 함수에 자주 사용

// 변수에 할당하는 방식이라 함수 표현식과 마찬가지로 호이스팅 안됨

// greet(); // ReferenceError 발생

const greet = () => {

  console.log("안녕하세요! 화살표 함수입니다.");

};

greet(); // 정상 실행

 

함수 선언문을 보면 끝에 세미콜론이 없을때가 있음
자바스크립트에서 세미콜론은 하나의 문이 끝났음을 의미 하지만 블록문에서는 생략이 가능
자바에서는 오류가 발생 하나, 자바스크립트에서는 오류가 발생 하질 않는다.

 

호이스팅을 더 자세히 알고싶다면?

https://javakid.tistory.com/146

[개발] 호이스팅이란?

 

 

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한 대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지합니다.)