Javascript 함수 선언, 익명함수

함수?

프로그래밍 언어에서의 함수는 어떠한 값을 도출해내기 위해 수행하는 코드들의 집합이다.

함수를 사용하는 이유는, 코드의 단순 반복을 줄임으로써 가독성을 높이고 유지보수하기 쉬워지려고 사용한다.

Javascript에서 함수

자바스크립트에서의 함수 선언법은 아래와 같다.

함수 선언문 방식

function Study(){
	console.log('Javascript!');
}

Study(); // Javascript!

익명 함수

let Study = function(){
	console.log('Javascript!');
};

Study(); // Javascript!

함수 선언문 방식은 여타 프로그래밍 언어처럼 function 함수명(){...}으로 선언되었다.

익명 함수를 보면 변수를 생성하고 함수를 변수의 값으로 넣는것 처럼 보인다.

이와 같이 자바스크립트에서의 함수는 값으로 취급이 되기에 변수에 값을 할당하듯이 변수에 함수를 할당 할 수 있으며,

어떤 함수의 인자 값으로도 함수가 들어갈 수 있다.

또한 값으로 취급 되기 때문에 값을 이용하여 할수 있는 일들을 할 수 있다.

함수 복사

let Study = function(){
	console.log('Javascript!');
}; // 함수 선언문 방식으로 바꿔도 똑같이 동작한다.

let language = Study;

Study(); // Javascript!
language(); // Javascript!

 

함수 출력

let Study = function(){
	console.log('Javascript!');
};

console.log(Study); // [Function: Study]
/* 
   원래 함수 코드 전문이 보여야 하지만
   nodejs 환경을 사용하면 위와 같은 결과로
   나오게 된다.
*/

 

 

함수 선언문 방식과 익명 함수의 차이점

1. 함수를 선언하는 방식이 다르다.

함수 선언문 방식은 함수명을 이용하여 독자적인 구문 형태로 나타난다.

function add(a, b){
	return a + b;
}

console.log(add(10, 20)); // 30

        

익명 함수는 변수명이 곧 함수명이 되며 변수에 할당 연산자 =를 통해 변수에 할당되는 방식이다.

let add = function(a, b){
	return a + b;
};

console.log(add(20, 10)); // 30

 

2. 자바스크립트가 함수를 생성하는 순서

함수 선언문 방식은 코드가 실행되기 이전에 자바스크립트에서 함수 선언문 방식을 확인하여 먼저 함수를 생성하기 때문에 함수를 호출하고 정의해도 실행이 된다.

console.log(add(10, 20)); // 30

function add(a, b){
	return a + b;
}

 

익명 함수 방식은 코드가 실행되면서 변수가 생성됨과 동시에 함수가 생성되기 때문에 함수를 호출하고 정의하면 실행되지 않는다.

console.log(add(20, 10)); // Error!

let add = function(a, b){
	return a + b;
};

 

3. 스코프 차이점

엄격 모드 기준으로 함수 선언문 방식은 지정된 범위 외부에서 호출할 수 없다.

'use strict'

let num = 10;

if (num > 10) 
{
  function sub(num) {
    console.log(num - 5);
    } 
} 
else 
{
  function sum(num) {
    console.log(num + 5);
	}
}

sum(num); // Error!

 

변수를 지정된 범위 외부에 선언하고 변수에 함수를 담게 하면(익명 함수) 외부에서도 함수 사용이 가능해진다.

 

'use strict'

let num = 10;
let func;

if (num > 10) 
{
	func = function(num){
		console.log(num - 5);
	}
} 
else 
{
	func = function(num){
		console.log(num + 5);
	}
}

func(num);