자바스크립트 화살표 함수

자바스크립트 화살표 함수

 

 

 

 

오늘은 화살표 함수를 정리해보려고 합니다.

기본적인 함수들은 이제 외워서 눈에 들어오긴 하는데

 

기본함수를 쓰고 화살표 함수로 바꿀 순 있는데

딱 화살표 함수로만 나와있으면 알아보기 쉽지 않더라구요

그래서 정리해보면서 익히려고 합니다!

 

일단 함수의 종류를 다시 한번 정리해볼게요!

 

 

 

 

선언적 함수

함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능

function func(){
	document.write("실행되었습니다.")
}
func();

익명 함수

변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 준다

변수 선언 이후에 호출

cosnt func = funtion(){
	document.write("실행되었습니다.")
}
func();

매개변수 함수

함수를 호출할 때 전달하는 변수를 '매개변수'라고 한다.

function func(str){
	document.wirte(str)
}
func("실행되었습니다.");

리턴 함수

함수를 통해 처리된 결과를 반환시켜주는 명령어

function func(){
	const str = "실행되었습니다."
    return str;
}
document.write(func());

 

 

 

 

 

자 이제 이것들을 화살표 함수로 바꿔줄건데요

화살표함수는 =>를 이용해 함수를 간결하게 표현할 때 사용하고

단일 명령문일 경우 함수의 중괄호 { }와 return을 생략할 수 있습니다.

 

화살표 함수로 바꿔주는 법은 간단합니다

함수 function을 지우고 =>를 추가해주면 됩니다.

 

 

 

화살표 함수 :  선언적 함수

func = () => {
    document.write("실행되었습니다.");
}
func();

화살표 함수 : 익명 함수

const func = () => {                                      
    document.write("실행되었습니다.");
}
func();

화살표 함수 : 매개변수 함수

func = (str) => {
    document.write(str);
}
func("실행되었습니다.");

화살표 함수 : 리턴 함수

func = () => {
    const str = "실행되었습니다.";
    return str;
}
document.write(func());

화살표함수로 익명함수와 매개변수, 리턴값을 같이 사용할수도 있다

const func = (str) => {
    return str;                                                        
}
document.write(func("실행되었습니다."));

화살표 함수로 익명함수와 매개변수, 리턴값을 같이 사용하고 괄호를 생략할수도 있다.

const func = str => {                                 
    return str;
}
document.write(func("실행되었습니다."));

화살표 함수로 익명함수와 매개변수, 리턴값을 같이 사용하고 괄호와 리턴도 생략할 수 있다.

const func = str => str;                                  

document.write(func("실행되었습니다."));

화살표 함수를 통해 선언적 함수와 매개변수, 리턴값을 같이 사용하고 괄호를 생략할 수 있다.

func = str => str;                                  

document.write(func("실행되었습니다."));

 

forEach 문도 화살표함수로 괄호와 중괄호를 생략할 수 있다.

const num = [100, 200, 300, 400, 500];

//forEach문을 사용해 불러오기
num.forEach(function(el){
    document.write(el, "<br>");
});

//forEach 화살표 함수
num.forEach((el) => {
    document.write(el, "<br>");
});

//forEach : 화살표 함수 : 괄호생략
num.forEach(el => {
    document.write(el, "<br>");
});

//forEach : 화살표 함수 : 중괄호 생략
num.forEach(el =>  document.write(el, "<br>"));

 

이렇게 생략할 수 있는것들이 많습니다.

익숙해 진다면

더욱 깔끔하고 보기좋게 코딩을 할 수 있겠죠?