[Javascript] Javascript에서 함수(function)란? 함수 선언식과 함수 표현식

 
자바스크립트를 배울 때 변수, 함수, 지역변수, 전역변수라는 단어를 많이 들어봤을 것이다.
단어만 들어도 어려울 것 같아 손도 대지 않았는데.. 먼저 함수에 대해서  알아보고자 한다!
 

---

 Javascript에서 함수(function)란?

자바스크립트에서 함수란, 다른 객체처럼 속성 및 method를 가질 수 있는 일급 객체이며, 인자를 가질 수 있는 코드 블록이다. 자바스크립트에서 함수는 프로그램에서 매우 중요하고, 부모 함수의 지역 변수에 접근할 수 있다. (closure)
 
즉, 일련된 공통의 작업을 처리하기 위해 연관된 코드들을 모아 놓은 자료형이다. 
 
메소드(method) 더보기👇

메서드(method)란? 때로는 메소드라고 불리기도 하는 메서드는 어떤 객체가 가지고 있는 어떤 동작을 말한다. 언어마다 조금씩 의미가 다르긴 하지만 자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부른다.

 

 

함수를 사용하는 이유?

-코드를 한번 정의하면 재사용이 가능하다.
-다른 인자를 사용하여 동일한 코드를 사용할 수 있으며, 다른 결과를 탄생시킬 수 있다. 
 

함수의 특징

-변수안에 담길 수 있다.
-객체의 속성안에 method로 담길 수 있다.
-다른 함수의 인자값 전달이 가능하다.
-함수의 reture값으로도 사용이 가능하며, 배열의 값으로도 사용이 가능하다.
 
리턴(reture) 더보기👇

 

return 문은 함수에서 결과값을 반환할 때 사용한다. 또한 함수에서 return 문이 실행되면 반복문의 break문과 비슷하게 코드가 강제 종료된다. 즉, 함수 정의문에 return 문이 사용되면 함수를 호출했을 때 결과값(data)를 반환한다.

 

 

---

함수의 선언

자바스크립트는 '함수를 실행한다' 라는 것을 '함수를 호출한다'라고 불린다.
 

함수 선언식(function Declarations)

쓰는 방법 ) 
함수의 이름은 변수의 규칙과 동일하다. 

function [함수명](){
	//code
}

 
예시 )

function hello(){
	console.log("hello");
}

 
실제로 어떻게 활용될까? )
반복되는 구문을 돌릴 때 많이 사용한다. 예로 들어 구구단을 출력한다고 하자.

console.log("4 * 1 = 4")
console.log("4 * 2 = 8")
console.log("4 * 3 = 12")
console.log("4 * 4 = 16")
console.log("4 * 5 = 20")

console.log("4 * 1 = 4")
console.log("4 * 2 = 8")
console.log("4 * 3 = 12")
console.log("4 * 4 = 16")
console.log("4 * 5 = 20")

console.log("4 * 1 = 4")
console.log("4 * 2 = 8")
console.log("4 * 3 = 12")
console.log("4 * 4 = 16")
console.log("4 * 5 = 20")

 내가 4*1부터 4*5까지 연속 세번을 출력하고 싶은데, 이걸 굳이 하나씩 다 써야한다고?
불필요한 작업이 많다. 그래서 함수를 사용하는것이다.
 
구구단을 함수로 표현해보자.

function gugudan(){
    console.log("4 * 1 = 4");
    console.log("4 * 2 = 8");
    console.log("4 * 3 = 12");
    console.log("4 * 4 = 16");
    console.log("4 * 5 = 20");
 }
gugudan();
gugudan();
gugudan();

 
이 내용을 개발자도구에서 확인해보면 구구단 4단이 총 3번 출력된 것을 확인할 수 있다.

 
안에 내용을 수정해도 함수가 자동으로 변환을 해주기 때문에, 유지보수 측면에서도 좋으며 코드를 반복해서 작성하지 않기 때문에 효율성에서도 뛰어나다.
 
 

함수 표현식(function expressinon)

쓰는 방법 ) 
변수에 함수를 할당하는 형식으로 선언하는 방식이며 변경할 일이 많지 않다.
따라서 함수 표현식은 주로 var, let, const 키워드 중에서 const 키워드로 변수를 생성한다. 

(const는 중복선언과 재할당이 불가능하다.)

 
함수를 자료형과 별도로 생각하는 사람들이 많은데 반대로 변수에 할당이 가능하다.

const [변수명] = function [함수명]() {
	//code
}

 
예시 )

const hello = function hello() {
	console.log("hello");
}

 
실제로 어떻게 활용될까? )

const gugudan = function gugudan(){
    console.log("4 * 1 = 4");
    console.log("4 * 2 = 8");
    console.log("4 * 3 = 12");
    console.log("4 * 4 = 16");
    console.log("4 * 5 = 20");
 };
 gugudan();

주의해야할 점은 변수에 함수를 할당하는 형태이기 때문에 일관되게끔 } 맨 마지막에 세미클론을 찍어줘야한다.
물론 찍지않아도 정상적으로 실행되긴 하지만, 일관된 코드를 위해서 세미클론을 반드시 찍어줘야한다.
 
또 하나 기억해야 할 것은
gugudan()이라는 함수를 썼는데 변수명과 같다. 
이럴 때 함수가 호출된건지 변수가 호출된건지 알 수가 없다.
 
함수 표현식은 변수의 이름으로만 호출할 수 있다. 
 
한번 함수명을 zzz()로 바꿔보자

const gugudan = function zzz(){
    console.log("4 * 1 = 4");
    console.log("4 * 2 = 8");
    console.log("4 * 3 = 12");
    console.log("4 * 4 = 16");
    console.log("4 * 5 = 20");
 };
 gugudan();

코드를 실행해보면 실행이 되는 것을 확인할 수 있다.
함수의 이름이 중요하지않고, 함수가 할당 되어있는 변수의 이름이 중요하다. 변수의 이름으로 함수를 호출할 수 있다.
 
변수명 호출한걸 함수명으로 바꿔보면 zzz() 함수의 이름은 정의되지 않았다는 에러메시지가 뜬다.

const gugudan = function zzz(){
    console.log("4 * 1 = 4");
    console.log("4 * 2 = 8");
    console.log("4 * 3 = 12");
    console.log("4 * 4 = 16");
    console.log("4 * 5 = 20");
 };
zzz();

 
 
함수 표현식은 특이하게도 함수명이 표현될 때가 거의 없다. 
그래서 보통 함수명을 제외하고 function()만 쓸 때가 많다. 함수명이 없어도 정상작동을 한다.
함수의 이름이 없는 형태를 익명 함수(Anonymous function)라고 불린다.

const gugudan = function(){
    console.log("4 * 1 = 4");
    console.log("4 * 2 = 8");
    console.log("4 * 3 = 12");
    console.log("4 * 4 = 16");
    console.log("4 * 5 = 20");
 };
gugudan();

함수명이 없는 상태로 표현

 
 

출처: 유튜브(수코딩 / https://www.youtube.com/watch?v=NcHBFk1Yn-8)