함수 업그레이드하기 (default parameter, arguments)

 

 

 

0:00 default 파라미터

5:51 함수의 arguments

 

 

 

ES6부터 업그레이드된 함수의 default 파라미터 기능과

ES5 문법 arguments에 대해 알아봅시다. 

 

 

함수의 default 파라미터 넣기

 

함수를 만들 때 파라미터값을 실수로 안적거나 했을 경우 

파라미터에 기본값(default 값)을 줄 수 있습니다. 

이렇게 사용하시면 됩니다. 

 

function 더하기 (a, b = 10){
  console.log(a + b)
}

더하기(1);

위 코드를 실행하면 콘솔창에 뭐가 뜨냐면 11이 뜹니다. 

지금 더하기() 함수는 파라미터를 두개 입력할 수 있습니다.

하지만 실수인지 일부러인지 1이라는 파라미터 하나밖에 쓰지 않았습니다. 

그럴 때 저렇게 b = 10 선언해뒀던 default 파라미터값인 10이 b에 할당되게 됩니다. 

그래서 콘솔창에 a + b가 11이 출력되게 되는 것입니다. 

 

 

default 파라미터를 주고 싶으면 저렇게 파라미터 선언하실 때 등호로 입력해주시면 됩니다. 

그럼 파라미터가 정의되지 않았을 때 등호 오른쪽 값이 발동됩니다. 

default 파라미터로 별게 다 들어갈 수 있습니다. 

 

function 더하기 (a, b = 2 * 5){
  console.log(a + b)
}

더하기(1);

수학 연산자도 사용가능합니다. b 자리에 파라미터가 없으면 2 * 5라는 값을 할당해줍니다. 

 

 

function 더하기 (a, b = 2 * a){
  console.log(a + b)
}

더하기(3);

다른 파라미터와 연산도 가능합니다. 위 코드는 실행하면 콘솔창에 뭐가 출력될까요?

 

 

심지어 default 파라미터엔 함수입력도 가능합니다. 

function 임시함수(){
  return 10 
}

function 더하기 (a, b = 임시함수() ){
  console.log(a + b)
}

더하기(3);

위 코드는 실행하면 콘솔창에 뭐가 출력될까요?

 

 

 

 

함수의 arguments

 

함수의 모든 파라미터들을 전부 한꺼번에 싸잡아서 다루고 싶은 경우가 있습니다. 

그럴 땐 arguments라는 키워드를 활용하시면 됩니다. 

함수 안에서 쓸 수 있는 미리 정의된 키워드 혹은 변수인데

한번 써보도록 합시다. 

 

function 함수(a,b,c){
  console.log(arguments)
}

함수(2,3,4);

그러면 콘솔창에 [2,3,4]를 담은 array 비슷한 자료가 출력됩니다. 

arguments는 즉, 모든 입력된 파라미터를 [ ] 안에 싸매주는 고마운 키워드였던 것이었습니다. 

이제 여러분이 파라미터들을 한꺼번에 다루고 싶을 때 자주 활용해주시면 됩니다. 

예를 들면 이런 경우가 있겠군요. 

 

 

 

콘솔창에 모든 파라미터를 하나씩 출력해주고 싶은 경우

function 함수(a,b,c){
  console.log(arguments[0])
  console.log(arguments[1])
  console.log(arguments[2])
}

함수(2,3,4);

이러면 되겠군요? 그런데 조금 더 확장성있게 반복문을 쓴다면

 

 

function 함수(a,b,c){
  for (var i = 0; i < arguments.length; i++){
    console.log(arguments[i])
  }
}

함수(2,3,4);

이러면 되겠군요.

약간 편리하게 파라미터들을 다룰 수 있는 문법이었습니다. 

하지만 ES6문법 부터는 파라미터를 더 쉽게 다룰 수 있는 rest 파라미터라는 문법이 등장하게 되는데..

그건 다음 강의에서 알아봅시다.