👋 Default Value

Default Value

• 값을 할당하지 않으면 사전에 정의된 값을 할당

  • default value : 사전에 정의된 값

• 할당할 값이 없으면 디폴트 값을 할당

  const [one, two, fiv = 50] = [10, 20];
  
  console.log(five); // 50

  1. one에 10을, two에 20을 분할 할당 함
  2. five에 할당할 값이 없으며, 이 때 five = 50에서 50을 five에 할당함
  3. 이것을 default value라고 함
  4. =의 왼쪽에 이름을 작성하고 오른쪽에 값을 작성

• 할당할 값이 있으면 디폴트 값을 무시

  const [one, two, five = 50] = [10, 20, 70];
  
  console.log(five); // 70

  1. 왼쪽과 오른쪽 모두 값이 3개 임
  2. 값(70)이 있으므로 five에 70을 할당함 five = 50에서 50을 할당하지 않음

• Object는 프로퍼티 이름으로 체크

  const { one, two = 20 } = { one: 10 };
  
  console.log(two); // 20

  1. 오른쪽에 one의 값인 10을 왼쪽의 one 프로퍼티 값으로 분할 할당함
  2. two에 할당할 값이 없으며 two = 20에서 20을 two에 할당 함

• 디폴트 값 적용 순서

  • 왼쪽에서 오른쪽으로 적용

  const [one, two = one + 20, five = two + 50] = [10];
  
  console.log(two); // 30
  console.log(five); // 80

  1. 오른쪽 one의 값인 10을 왼쪽의 one 프로퍼티 값으로 분할 할당함
  2. 오른쪽에 값이 없으므로 디폴트 값을 할당, 왼쪽에서 오른쪽으로 할당
  3. two = one + 20, one의 값이 10이므로 30이 two에 설정됨
  4. five = two + 50, two의 값이 30이므로 80이 five에 설정됨

• 함수의 파라미터에 디폴트 값 적용

  • 넘겨 받은 파라미터 값이 없으면 디폴트 값을 할당

  const add = (ten, two = 20) => ten + two;
  const result = add(10);
  
  console.log(result); // 30

  • 넘겨받은 파라미터 값이 있으면 디폴트 값을 무시

  const add = (ten, two = 20) => ten + two;
  const result = add(10, 50);
  
  console.log(result); // 60

• 호출한 함수의 파라미터 값이 undefined일 때

  const point = () => 20;
  const add = (one, two = point()) => one + two;
  const result = add(10, undefined);
  
  console.log(result); // 30

  • 파라미터를 넘겨주지 않았기 때문에 디폴트 값 실행