함수(함수의 선언과 표현,화살표 함수 )

함수의 선언(Function delcaration)

기본적인 함수를 정의하고 호출하는 방법이다.

//기본적인 선언방법
function hello(){
	return 'hello';
}
console.log(hello()) // hello

//매개변수를 받을 수 있다.
function hello(name){
	return 'hello'+name;
}
console.log(hello('Kim')) //hello Kim

//매개변수의 기본값 설정 가능
function hello(name='Kim'){
	return 'hello'+name;
}
console.log(hello()); //hello kim

 

함수 표현(Function expression)

1.익명함수

이름이 없는 함수라고 해서 익명함수라고 한다.

자바스크립트에서는 함수를 특별한 종류의 값으로 취급한다. 그래서 변수에 함수를 할당할 수 있다.

//익명함수의 기본구조
function(a,b){
	return a+b;
}

//익명함수의 호출
let sum = function(a,b){
	return a+b;
}
console.log(sum(1,1)) //2

 

2.화살표 함수

ES6에서부터 화살표 표기법을 사용해 간단하게 작성이 가능하다. 익명함수에만 적용 할 수 있다.

 

⚠️매개변수에 따른 화살표 함수 생성방법

1️⃣매개변수가 없는 함수

const introduce = function(){
	return "안녕하세요";
}
//화살표 함수
const introduce = () => {return "안녕하세요"} 

//내용이 한 줄 뿐이라면 중괄호{}와 return를 생략가능
const introcude = () => "안녕하세요";

2️⃣매개변수가 1개인 경우

//익명함수
const introduce = function(name){
	return `안녕하세요 ${name}입니다.`;
}
//화살표 함수
const introduce = name => `안녕하세요 ${name}입니다.`;
**매개변수가 하나면 매개변수 자리의 괄호()를 생략가능

3️⃣매개변수가 2개 이상인 경우

//익명함수
const sum = function(a,b){
	return a+b;
}
//화살표함수
const sum = (a,b) => a+b;

• 함수안의 내용이 한 줄 이라면 return과 중괄호{} 는 생략 가능하다.
• 매개 변수가 하나일 경우 괄호()를 생략 가능하다

3.즉시실행 함수(IIFE)

//기본형태
(function(){
	명령
}());

즉시 실행 함수는 말 그대로 즉 실행되는 함수이다. 선언하고 바로 호출 할 때 사용된다. 

전역변수 사용을 억제하거나,정보 은닉,렉시컬 환경을 공유하는 클로저를 만들기 위해 사용된다.

function count(){
	for(var i = 0; i < 5; i++){
    	setTimeout(()=>{
        	console.log(i)
        },i * 1000);
    }
} //5,5,5,5,5

//클로저 문제 해결위해 즉시실행 함수 실행
function count(){
	for(var i = 0; i < 5; i++){
    	(function(j){
        	setTimeout(()=>{
            	console.log(j)
            }, i * 1000);
        })(i);
    }
}
//매개변수 앞,뒤에 있는 i와 j는 var j = i;의 뜻과 같음
//0,1,2,3,4 출력

 

함수 선언과 표현의 차이

호이스팅의 차이

함수 선언문 : 함수 선언은 호이스팅 되어 정의되기 전에도 호출 할 수 있다.

함수 표현문 : 실제 실행 흐름에서 해당 함수에 도달 했을 때 함수를 호출 하기 때문에 선언하기 전 호출 불가능

//함수 선언문은 호이스팅 되어 선언 전 호출 가능
sayHello('Kim'); // hello, kim

function sayHello(name){
	alert(`hello, ${name}`);
}

//함수 표현식은 선언 전 호출시 에러
sayHello('Kim'); //error

let sayHello = function(name){
	alert(`hello, ${name}`);
}

 

 

이미지 출처

<a href="https://www.flaticon.com/free-icons/box" title="box icons">Box icons created by Freepik - Flaticon</a>