#19 자바스크립트(JavaScript) - 화살표 함수(ES6)

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 화살표 함수에 대해 알아볼 거예요!

 

ES6 버전부터는 화살표(=>)를 사용하여 함수 선언을 간단하게 작성할 수 있게 되었는데요, 이 방법은 익명 함수를 변수에 지정할 때 많이 사용합니다.

function은 사용하지 않고, 매개변수를 지정하지 않을 때는 소괄호()만 작성하고요, 함수를 선언할 때 매개변수가 하나만 필요할 때는 소괄호 없이 매개 변수만 작성해 주시면 됩니다.

매개변수가 두 개 이상일 경우에는 기존 매개변수의 표기법과 같이 소괄호 안에 매개변수를 넣어 주시면 됩니다.

 

코드를 통해 기존 함수의 선언방식과 화살표 함수의 선언 방식에 대해 알아볼게요!

 

먼저 기존의 함수 선언 방식입니다.

var introduce = function() {
    console.log("안녕하세요.");
}

introduce();

먼저 introduce라는 변수에 익명 함수를 선언하여 실행을 시키면 "안녕하세요."를 출력시키는 코드입니다.

 

이 코드를 화살표 함수로 작성해 볼게요!

var arrowIntroduce = () => console.log("안녕하세요.");

arrowIntroduce();

arrowIntroduce라는 변수에 화살표 함수로 선언하여 실행을 시키면 "안녕하세요."를 출력시키게 만든 코드입니다.

조금은 더 간단해진 느낌이 드시나요?

 

두 코드를 실행하여 같은 값을 출력하는지 실행해 보도록 하겠습니다.

 

 

똑같이 "안녕하세요."를 출력하는 것을 확인할 수 있습니다.

 

그럼 매개변수가 하나일 경우에는 화살표 함수를 어떻게 사용하는지 살펴볼까요?

위의 코드에서 매개변수 name을 추가하여 자기 이름까지 소개하는 코드를 작성해 보도록 하겠습니다.

 

먼저 기존의 함수 선언 방식입니다.

var introduce = function(name) {
    console.log("안녕하세요 제 이름은 "+ name +" 입니다.");
}

introduce("제이든");

이번엔 화살표 함수 선언 방식입니다.

var arrowIntroduce = name => console.log("안녕하세요 제 이름은 "+ name +" 입니다.");

arrowIntroduce("제이든");

매개변수가 하나여서 소괄호 안에 매개변수를 넣지 않고 소괄호 없이 매개변수 name을 작성한 것 보이시나요?

 

그럼 두 코드가 동일한 결괏값을 출력하는지 확인해 보도록 하겠습니다!

 

 

동일하게 매개변수 name에 인수값 "제이든"을 받아 "안녕하세요 제 이름은 제이든입니다."를 출력하는 걸 확인할 수 있습니다.

 

마지막으로 매개변수가 2개 이상일 때 사용하는 방법에 대해 알아볼게요!

이번에는 이름과 나이를 받아 자기소개를 하는 코드를 작성해 볼게요!

 

먼저 기존의 함수 선언 방식입니다.

var introduce = function(name, age) {
    console.log("안녕하세요 제 이름은 " + name + "이고, 나이는 " + age + "세 입니다.");
}

introduce("제이든", 18);

다음은 화살표 함수 선언방식입니다.

var arrowIntroduce = (name, age) => console.log("안녕하세요 제 이름은 " + name + "이고, 나이는 " + age + "세 입니다.");

arrowIntroduce("제이든", 18);

이번에는 소괄호 안에 매개변수 name과 age를 작성해 주었습니다!

 

그럼 두 코드를 실행시켜 봐야겠죠?

 

 

두 코드 모두 매개변수 name과 age에 인수값 "제이든"과 '18'을 받아 "안녕하세요 제 이름은 제이든이고, 나이는 18세입니다."를 출력하는 걸 확인할 수 있습니다.

 

오늘은 화살표 함수에 대해 알아보았습니다!

 

유익하셨다면 구독과 댓글 부탁드리며, 다음 시간에 또 만나요!