[ES6] 4. default parameter / argument

파라미터 vs 아규먼트

우선 파라미터와 아규먼트 용어의 차이를 정리해보자

파라미터는 함수 정의에 사용되는 변수
아규먼트는 함수 호출 시 전달되는 값

function example_function(parameter1, parameter2){
  // 함수 내용
}
// 함수 호출 시 아규먼트 전달
example_function(argument1, argument2)

default parameter

2개의 파라미터를 입력할 수 있는 함수에 1개만 입력해도 자바스크립트는 에러가 나지 않는 특징이 있다

에러가 나지는 않지만 이렇게 파라미터를 실수로 입력하지 않았을 경우 등을 대비하여 default 파라미터 를 주고 싶으면 파라미터 선언할 때 등호로 입력해주면 된다

function A(a, b = 10) {
  console.log(a + b);
}
A(1);

함수도 가능

function B(){
  return 10
}

function A(a, b = B()) {
  console.log(a + b);
}
A(1);

arguments

입력된 파라미터를 배열로 만들어주는 키워드

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

func(1,2,3) // [1,2,3]

파라미터를 다루기위한 옛날 문법이다
⚠️ arguments 는 배열 자료라서 활용이 번거롭다

➡️ 그래서 Rest 파라미터를 사용

Rest 파라미터

모든 파라미터가 아닌 rest parameter 자리에 오는 것들만 배열에 담아줘서 유연하게 사용 가능

• 뒤에 오는 파라미터들을 배열에 담아달라는 뜻
• 가장 마지막에 써야 함

function func(a,b,...rest){
  console.log(rest)
}

func(1,2,3,4,5) // [3,4,5]

만약 파라미터 전부 하나씩 콘솔창에 출력하려면?

function func(...rest) {
  for (let i = 0; i < rest.length; i++) {
    console.log(rest[i]);
  }
}

func(1, 2, 3);

---

📑 연습 문제

Q1. 출력 결과는 ?

var a = [1,2,3];
var b = '김밥';
var c = [...b, ...a];
console.log(c);

정답

['김','밥',1,2,3]

• 글자를 spread 하면 한글자씩 콤마로 분열되고 array를 spread 하면 대괄호를 제거한다

Q2. 출력 결과는 ?

var a = [1,2,3];
var b = ['you', 'are'];
var c = function(a,b){
  console.log( [[...a], ...[...b]][1] )
}
c(a,b);

정답

1. [[1,2,3], ...['you', 'are']][1]
2. [[1,2,3], 'you', 'are'][1]
3. 'you'

Q3. 출력 결과는 ?

function 함수(a = 5, b = a * 2 ){
  console.log(a + b);
  return 10
}
함수(3);

정답

9

Q4. 출력 결과는 ?

function 함수(a = 5, b = a * 2 ){
  console.log(a + b);
}
함수(undefined, undefined);

정답

15
자바스크립트 함수에서는 파라미터를 집어넣지 않았을 경우 파라미터가 자동으로 undefined가 되서 파라미터를 입력하지 않은 것과 같다
그래서 default parameter 가 발동됨

Q5. array 만들어주는 함수

function array(){
  (여기 어떤코드가 들어가면 될까요?)
}

var newArray = array(1,2,3,4,5);
console.log(newArray); //  [1,2,3,4,5]

정답

function array(...rest){
  console.log(rest)
}

팁 : 자바스크립트에서 배열 만드는 방법

var myArray = new Array(1, 2, 3, 4, 5);

Q6. 최댓값 구하는 함수

Math.max()라는 기본 내장함수 사용해서 구하기

var numbers = [2,3,4,5,6,1,3,2,5,5,4,6,7];

정답

var numbers = [2, 3, 4, 5, 6, 1, 3, 2, 5, 5, 4, 6, 7];
function max(param) {
	return Math.max(...param);
}
max(numbers);

배열의 괄호를 제거하기 위해 spread 문법 사용

Q7. 글자를 알파벳 순으로 정렬해주는 함수

function makesort(){
  (여기 어떤 코드가 들어가야할까요?)
}

makesort('bear'); 

정답

function makeSort(rest) {
  console.log(...[...rest].sort());
}
makeSort("bear");

우선 sort 메소드는 배열에서 사용할 수 있기 때문에 배열 내에서 정렬을 해주고 spread 문법을 통해 괄호 제거

Q8. 데이터마이닝 함수

데이터의 출현 갯수를 세어주는 함수
글자세기('aacbbb') 라고 입력하면 콘솔창에
{ a : 2, b : 3, c : 1 } 출력

정답

var res = {};
function countdata(data) {
  for (let i = 0; i < [...data].length; i++) {
    console.log(data[i]);
    if (res[data[i]]) {
      res[data[i]] += 1;
    } else {
      res[data[i]] = 1;
    }
  }
  console.log(res);
}
countdata("aacbbb");

또는 배열 반복문을 사용 가능

var res = {};
      function countdata(data) {
        [...data].forEach(function (item) {
          if (res[item]) {
            res[item] += 1;
          } else {
            res[item] = 1;
          }
        });
        console.log(res);
      }
      countdata("aacbbb");