1.3 화살표 함수에서의 arguments

화살표 함수의 특징 중 마지막입니다. 이전 포스팅에서는 this가 존재하지 않는다는 주제였는데 마지막으로는 arguments가 존재하지 않는다는 주제입니다. 기본적으로 javascript 에서는 arguments 라는 키워드가 존재하는데요 간단한 정의로는

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.

function func1() {
  console.log(arguments[0]);
  // expected output: 1
 
  console.log(arguments[1]);
  // expected output: 2
 
  console.log(arguments[2]);
  // expected output: 3
}
func1(1, 2, 3);

(출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments)

원본 코드는 func1 함수에 매개변수가 정해져있는데 일반 function 형태로 쓰면 빈 매개변수 형태의 함수로 작성해주어도 동일하게 돌아갑니다. 그럼 이 동일한 코드를 화살표함수로 바꿔서 작성 후 실행을 시켜보면

arrow.js

const func1 = ()=>{
    console.log(arguments[0])
}
 
func1(1, 2, 3);

arguments 정의되지 않았다는 오류가 뜹니다. 그래서 es6 문법에서 새롭게 등장한 키워드가 있습니다.

const func1 = (...args)=>{
    console.log(args[0])
}
 
func1(1, 2, 3);

... 이라는 키워드로 정의된 함수의 선언시 매개변수 목록을 배열로 받겠다는 뜻입니다. 

(args 라는 키워드가 있는 것은 아니고 ... 이것만 해당됩니다.)

예를들면 이런식으로도 사용이 가능하겠죠?

const func1 = (...args)=>{
    console.log(args)
}
 
func1(1, 2, 3);
func1(5,6,7,8,9)

함수 하나를 선언 해도 매개변수가 다른 함수로 호출이 가능해집니다.

이로써 화살표함수에 대한 포스팅을 마치도록 하겠습니다.