punk records

0. 기본형

function sum(a, b) { // 여기는 인수를 받는 매개체 매개변수
  return a + b;
}

console.log(sum(1, 2)); // 여기가 들어온 값 인수

인수, 매개변수 두 용어를 헷갈렸었는데,

인수는 함수가 호출되어 실제 들어오는 값을 뜻하고,

매개변수는 함수 선언문에 적히는 인수를 받는 매개체를 뜻한다.

1. 기본값

위의 함수에서 만약에 사용자가 sum 함수를 호출하고 인수를 하나만 쓴 경우 어떻게 될까?

console.log(sum(7)); // 7과 undefined를 더 해서 not a number

두 번째 인수로는 undefined가 들어가서 7 + undefined가 되어 NaN이 출력될 것이다.

이를 방지하기 위해서 매개변수에 조치를 취할 수 있다. '매개변수 = 기본값'의 형태를 통해 혹시 매개변수로 값이 들어오지 않는다면 대신 쓰일 기본값을 설정할 수 있다.

function sum(a, b = 1) {
  return a + b;
}


console.log(sum(1,2)); 	// 이건 정상적으로 3이 출력됨.
console.log(sum(7));	// output : 8

2. 구조분해 할당

(1) 객체

const user = {
  name: "heropy",
  age: 85,
  email: "dfmldfmkl",
};

function getName1(user) {
  return user.name;
}

function getName2(user) {
  const { name } = user;
  return name;
}

function getName3({ name }) {
  return name;
}

function getEmail({ email = "이메일이 없습니다." }) {
  return email;
}
console.log(getName1(user));
console.log(getName2(user));
console.log(getName3(user));

console.log(getEmail(user));

getName1 ~3은 모두 같은 로직이다.

1번은 노말하게 객체 인수를 받아서 해당 인수 중 name이라는 멤버에 접근했다.

2번은 객체인수를 받아서 구조 분해를 통해 name이란 key의 value를 뽑아내어 사용했다.

3번이 우리가 배울 내용인데,

이 처럼 매개변수 공간에서 바로 구조분해 할당을 하여 쓸 수 가있다.

4번은 구조분해 할당 객체에서 배웠듯이 만약 해당 key가 객체안에 없다면 해당 key의 value로는 대체해서 쓰일 내용을 적어주는 문법이다. 만약 email이란 멤버가 객체안에 없는데, email을 return하면 "이메일이 없습니다가 대체 출력될 것이다." 하지만 위의 user 객체에는 email 이란 key가 있어서 해당 key의 value가 출력되었다.

(2) 배열

// (2) 배열
const fruits = ["Apple", "Banana", "Cherry"];
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function getSecoendItem([, b]) {
  return b;
}

console.log(getSecoendItem(fruits));
console.log(getSecoendItem(number));

배열 또한 매개 변수 부분에서 바로 구조분해가 가능하다. 알다시피 배열 구조분해는 객체랑 다르게 변수가 쓰인 index로서 원소를 구분한다. (객체는 변수의 이름이 key 이름이랑 동일해야 한다. 따라서 해당 변수 이름으로 대응하는 value 값을 찾아 뽑아낸다.)

위의 예시에서는 무조건 배열의 두번째 값만 뽑아내는 구조분해를 보여줬다.

3. 나머지 매개변수

Java에서는 오버로딩을 통해 같은 이름의 함수에 관해서 들어오는 인수의 갯수나 타입이 다를 때, 대응하는 로직을 다르게 해줄 수 있었다. 즉 인수의 갯수나 타입이 다르면 같은 이름의 함수를 중복해서 쓸 수 있었던 것이다.

JS에서 같은 이름의 함수에 들어오는 인수의 값이 제각각이면 어떻게 대응할까?

여기도 구조분해 할당과 연관되는 내용인데 ...rest "전개 연산자"를 사용한다.

// (3) 나머지 매개변수
function sum1(...rest) {
  // 전개 연산자로 쓰여진 매개변수는 인수들을 받아서 배열로 저장한다.
  console.log(rest);
}

console.log(sum1(1, 2));
console.log(sum1(1, 2, 3, 4));
console.log(sum1(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

전개 연산자로 쓰인 매개변수는 인수들을 받아서 배열로서 저장한다. 그래서 출력결과를 보면 배열 형태로 되어 있다.

undefined는 신경쓰지 말자. 우리가 sum1이란 함수에 반환 값을 따로 지정해주지 않았기 때문에 저렇게 나오는 것이다.

return 값을 따로 설정해주지 않으면 반환 시 undefined가 나오게 된다.

만약 매개변수와 전개 연산자 매개변수가 혼재되어 있으면, 어떻게 인수가 할당 될까?

일단 차례대로 매개변수에게 값이 들어가고 그 나머지를 전개 연산자가 가져가서 배열로서 저장한다.

function sum2(a, b, ...rest) {
  
  console.log(rest);
  console.log(arguments);
 
  return rest.reduce(function (acc, cur) {
    return acc + cur;
  }, 0);
}


console.log(sum2(1, 2));
console.log(sum2(1, 2, 3, 4));
console.log(sum2(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));