오늘 알게 된거 4 (가변인자)

hojoon·2023년 8월 14일

리액트 신입개발자 자바스크립트 프론트엔드

자바스크립트

목록 보기

11/14

이거 원래 매일 쓰는 시리즈 아님. 근데 3일 연속 썼더니 뭔가 매일 써야 할 것 같고 작심삼일 소리 들을까 봐 4일 연속 쓴다.... 내일은 진짜 안 쓸 거임 딴 거 공부할 거 많음

구조 분해 할당과 rest 문법

구조 분해 할당과 rest 문법은 이런저런 요약보다 예시를 보면서 익숙해지는게 더 좋은거 같다!

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

예시 참고 사이트(https://learnjs.vlpt.us/useful/06-destructuring.html)

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

// 이것과 같은 것임.
const extracted = {
  name: name,
  languages: languages,
  value: value
} 

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

이런식으로 꺼내 쓴다.

rest 문법

var [a, ...rest] = [1, 2, 3];
console.log(a); // 1
console.log(rest); // [2, 3]

rest 파라미터는 마지막에 써야 한다.!(먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 담기기 때문)

function foo( ...rest, param1, param2) { }

foo(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

가변인자

가변 인자 함수는 매개변수의 최대 갯수가 지정되지 않은 함수를 의미합니다.
포이마 참조(https://poiemaweb.com/es6-extended-parameter-handling)

// ES6
function sum(...args) {
  console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ƒ]
  console.log(Array.isArray(args)); // true
  return args.reduce((pre, cur) => pre + cur);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
하지만 ES6의 화살표 함수에는 함수 객체의 arguments 프로퍼티가 없다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 rest 파라미터를 사용해야 한다.

참조 사이트 링크 (https://jungpaeng.tistory.com/80)

function test() {
  if (arguments.length === 0) {
    return 0;
  } else if (arguments.length === 1) {
    return 1;
  } else if (arguments.length === 2) {
    return 2;
  } else {
    return -1;
  }
}