7. JavaScript Function(함수, Arrow Function)2

1. JavaScript Function(함수)2

앞서 6강에서 배운 Function에 대해서 좀 더 살펴보도록 하겠습니다.

1. Function(함수) - 여러 인자

이번에는 여러 개의 데이터를 전달받는 함수에 대해 알아봅시다.

 

함수에 인수가 한 개가 아닌 여러 개 전달할 수도 있습니다.

function alertSuccess(month, name) {
  alert(month + "월의 당첨자는 " + name + "입니다.");
}

alertSuccess("3", "김개발");

2. 함수 내부에서 다른 함수 호출하기

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

var result = calculateTotal(3500);
console.log(result);

 

calculateTotal 함수 내부에서 getTax를 또 호출했습니다.

 

위 와 같이도 사용이 가능합니다.

3. Arrow Function

Arrow Function은 ES6버전에서 나온 Function의 새로운 표현 방법입니다!

//ES5
function() {}

//ES6
() => {}

이름이 없는 함수의 기본적인 표현입니다.

 

ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았습니다.

 

그리고 =>(arrow) 가 추가되었습니다.

 

이름이 있는 함수를 만들 때는 아래와 같습니다.

//ES5
function getName() {}

//ES6
const getName = () => {}

호출할 때는 둘 다 같습니다.

getName()

쓰임새가 다를 때가 있지만, 함수를 정의할 때는 일단 편한 방법으로 해주세요.

 

인자도 한 번 받아보겠습니다.

 

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

인자가 하나일 때는 소괄호 생략이 가능합니다.

 

인자가 두 개일 때는 생략할 수 없습니다.

//ES5
const getName = function(name, age) {}

//ES6
const getName = (name, age) => {}

이제 return하는 함수를 볼까요?

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 합니다.

 

다른 코드가 들어가면 안됩니다.

 

헷갈리나요? 예제 하나만 더 보겠습니다.

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

위와 같이 사용이 가능합니다!