[javascript][ES6] "화살표 함수란?" | 한 번 보면 쉽게 이해되는 화살표 함수(Arrow Function) 정리 :: 자바스크립트 문법

 

 

 

최신 자바스크립트 코드를 보다보면 낯선 표현식이 등장합니다.

 

var sum = (a, b) => a + b;

 

이와 같이 말이죠. 바로 화살표 함수(Arrow Function)입니다.

 

 

기존에 익숙하던 문법은 아래와 같았습니다.

 

var sum = function(a, b){
  
  return a + b;
  
}

 

 

위의 두 문법을 비교해 보았을 때 차이점이 보이시나요?

차이점은 바로 1.화살표(=>)의 유무와  2. function 코드의 유무 입니다.

 

 

a.

 

function(a, b){}

 

 

b.

 

(a, b) => {}

 

화살표 함수는 a 와 같이 표현하던것을 b 와 같이 축약한 문법이라고 할 수 있겠습니다.

 

 

 

그림으로 표현해 봤는데 도움이 좀 되시나요?

화살표 함수를 사용하면 코드가 간결해지고 괜히 멋있다는 장점이 있습니다.

 

 

화살표 함수 문법은 설명 드릴게 저게 다입니다... 다는 아니고 90%정도..?(죄송합니다.)

 

나머지 10%를 채우기 위해 기본적인 화살표 함수의 몇가지 케이스를 소개해 드리겠습니다.

 

 

1. 인자가 1개인 경우

 

//인자(arg) => x

var double = x => x * 2;

 

인자가 1개인경우 괄호를 생략할 수 있습니다.

 

 

2. 인자가 없을 경우 

 

var a = () => alert('ㅎㅇ')

 

인자가 없을 경우엔 괄호를 비워두시면 됩니다.

단, 인자가 없을경우엔 괄호는 생략할 수 없습니다. 위 화살표함수 는 아래와 같은 결과겠죠?

 

var a = function(){

  alert('ㅎㅇ');
    
}

 

 

3. 본문(표현식)이 여러줄로 구성되어 있을 경우

 

var sum = (a, b) => {
	
    var num = a+b;
    
    return num;

}

 

본문이 여러줄로 구성되어있을경우 중괄호( {} )를 사용해 주어야 합니다. 또한, return 지시자로 결과값을 반환해줘야합니다.

 

---

그럼 이제 연습해볼까요? 단순히 여러번 따라치기만 해도 손에 익을꺼에요.

 

(동일한 표현이 화살표함수, 일반함수 순으로 되어있습니다.)

 

var firstName = '남'
var lastName  = '도일'

///////////////////////////////////////////////////////////////


var fullName = (fistName, lastName) => firstName + lastName;


var fullName = function(firstName, lastName){

	return firstName + lastName;
    
}

var myName = fullName(firstName,lastName);
//console.log(myName);


///////////////////////////////////////////////////////////////


var introduce = yourName => alert('안녕? 내 이름은 '+ yourName +'. 탐정이지.');


var introduce = function(yourName){

	alert('안녕? 내 이름은'+ yourName +' 탐정이지.');
    
}

//introduce(myName);


////////////////////////////////////////////////////////////////


var watchGunCount = 10;
var target = '유명한 탐정님';

var shoot = (target, count) => {
	
    var notice = '';
    
    if(count > 0){
    
    	notice = target + '이 마취총에 맞았습니다.';
    	count=count-1;
        
    }else{
    
    	notice = '응..? 마취총이 비었습니다...?'
        
    }
    
    var result = [notice,count];
    
    return result;
	
}

var shoot = function(target, count){
	
    var notice = '';
    
    if(count > 0){
    
    	notice = target + '이 마취총에 맞았습니다.';
    	count=count-1;
        
    }else{
    
    	notice = '응..? 마취총이 비었습니다...?'
        
    }
    
    var result = [notice,count];
    
    return result;

}

//var shootResult = shoot(target, watchGunCount);
//watchGunCount = shootResult[1];
//console.log(shootResult);

 

 

 

화살표 함수 끄읕~