1-1. Arrow Function

-화살표 함수 (arrow function)

기존의 function() {} 도 그대로 사용 가능함

기존 function의 사용방식을 먼저 확인하고, arrow function의 사용법을 익혀보자

 

1) 기존 function의 사용방식

function sayHello(name) { return "Hello " + name; } 
const elena = sayHello("elena"); 
console.log(elena); // Hello elena

function 키워드와 함께 함수를 선언하고 () 안에 파라미터를 입력한다. (파라미터가 없을경우 그냥 ()만 입력)

{ } 안에 함수에서 실행할 내용을 선언한다.

{ } 내 return 키워드와 함께 return 값을 선언하지 않으면 출력 결과값은 undefined가 된다.

 

2) 화살표 함수(arrow function)

const sayHi = (name) => "Hi " + name; 
const kim = sayHi("kim"); 
console.log(kim); // Hi kim

const 키워드와 함께 함수를 선언하고 = 뒤의 () 안에 파라미터를 입력한다.

기존의 함수선언과 마찬가지로 파라미터가 없을 경우 그냥 ()만 입력한다.

 

만약 파라미터가 하나일 경우, () 를 생략 가능하다.

예시는 아래와 같다.

const sayHi = (name) => "Hi " + name; 
const sayHi = name => "Hi " + name;

예시의 arrow function에서는 return할 내용이 한줄이기 때문에 {}를 생략한 형태이다.

{} 가 없는 화살표 함수는 return을 함축하고 있다.

 

{}을 사용한 예시는 아래와 같다.

const sayYa = () => { return "Ya"; } 
console.log(sayYa()); // "Ya"

 

{return returnValue;} 의 형태는 (returnValue)와도 같이 사용할 수 있다.

const sayHo = () => ("Ho"); 
console.log(sayHo()); // "Ho"

위와 같은 방식은 향후 React 코드에서 어떤 함수의 실행 결과로 JSX문법의 컴포넌트를 return하고자 할때 종종 사용한다.

 

함수 파라미터의 default Value 지정하기

이 기능은 기존의 function() {} 형태, arrow function 모두에서 사용 가능하다.

함수의 파라미터가 누락되면 undefined 가 된다.(때로는 이로 인한 exception 이 발생 할 수 도 있다)

 

상황에 따라 파라미터를 전달하지 않아도 undefined로 인한 exception을 방지하기 위해

파라미터의 default value를 지정할 수 있다.

 

const sayColorName = (color) => "This is " + color;
console.log(sayColorName("Red")) // This is Red 
console.log(sayColorName()); // This is undefined

 

undefined로 인한 exception이 발생하는 경우는 아니지만, color name 대신 undefined 가 출력되어

원하는 실행결과가 아니다.

 

const sayColorName = (color = "Bule") => "This is " + color;
console.log(sayColorName()); // This is Blue

 

파라미터 color 의 default value를 Blue로 지정해주자 파라미터가 누락되어도 undefined가 출력되지 않는다.