자바스크립트 - default parameter

참고자료: 인프런 자바스크립트 초급강의

Javascript ES6+ 제대로 알아보기 - 초급 - 인프런 | 강의

 

- default parameter

: 기본값 매개변수(함수의 2인자/ 파라메타)

 

 

 

const f = function (x, y, z) {
  x = x ? x : 4
  y = y || 5
  if (!z) {
    z = 6
  }
  console.log(x, y, z)
}


f(1)
f(0, null)

//결과
1 5 6
4 5 6

f(1)은

x에서 제대로된 숫자값이 적용되니  true니까 1로 출력(만약 false면 4가 출력되겠지?)

y도 없으니까 5로 출력이 되겠고, 

z도 z의 값이 없으니까 6으로 출력

 

f(0, null)은

x의 0이 들어와서 시스템 상 false라고 인식해 4가 출력

y는 null이니까 또 false로 인식해 5 출력

z는 아예 값이 없으니까 또 false로 인식해 6출력

 

 

 

그렇다면, undefined일때만 false로 인식하게 할 수 없을까?

 

그러면 이렇게 코드를 짜보자!

const f = function (x, y, z) {
  x = x !== undefined ? x : 3
  y = typeof x !== "undefined" ? y : 4
  console.log(x, y)
}
f(0, null)

//결과
0 true 6

undefined일때만 기본값을 할당하라

즉, 다른건 다 괜찮. 0도 괜찮고 null도 괜찮아. undefined 일때만 x라면 4로 출력하여라

 

그래서 x는 0 y도 undefined가 아니니까 true,

x는? undefined이지? 값이 없지? 그래서 기본값 6 출력이 되는거야!

 

const f = function (a = 1, b = 2, c = 3, d = 4, e = 5, f = 6) {
  console.log(a, b, c, d, e, f)
}
f(7, 0, "", false, null)

//결과
7 0 '' false null 6

여기서, 마지막 6만 undefined지? 그래서 f의 6만 그대로 출력되는거야

 

 

---

번외)

function a (a=1, b=c+1, c=3){
    let _a;
    let _b=_c+1;
    let _c;
    console.log(_a, _b, _c);
}

//result
undefined

왜? _b를 선언할 때 _c를 선언을 안했는데 _c를 넣었으니까 

참고하라구

 

그러면, 우리가 error를 선언해보자!

const notValid= function(){
    console.error('notValid Called');
    return 10;
}

const sum=function(x, y= notValid()){
    console.log(x+y);
}

이런식으로! notValid function에 집중하자

밑에 sum함수는 notValid function을 적용시킬 때 

 

 

 

번외 - let의 함수선언 순서)

let a = 10
let b = 20
function f (aa = a, b = b) {
  console.log(aa, b)
}


f(1, 2)
f(undefined, 2)
f(1)


//결과
1 2 
10 2
1 b is undefined

당연한 결과겠지?

f(1,2)는 이해되겠고

f(undefined, 2)라면 a의 값이 undefined이기 때문에 전역변수를 끌어와서 10을 출력하는 것

또, f(1) 값은 a의 값은 입력해 1을 넣었지만, b의 값을 정의내리지 않았기 때문에 b is undefined가 나온것 !

 

 

번외 - 유사배열객체)

또, 유사배열객체(argument)에 대해서 조금 짚고 바로 넘어가보자

유사배열객체란?

객체인데, 배열은 아니야

그냥 프로퍼티 키는 인덱스가 되고, length라는 프로퍼티가 있는 객체야. 

말 그대로 유사한 배열 객체 (다시 말하지만 배열은 아니야)

 

그래서, 

console.log(arguments.pop(1)) 
//result: error

array.prototype.pop.call(arguments)); 
//이렇게 해야 error가 나오지 않음

//또다른 방법
const arg = array.prototype.slice.call(arguments);
console.log(arg.pop()); //에러 발생 X

이처럼, arguments는 배열이 아니기 때문에 pop 프로퍼티를 쓰지 못해.

만약 쓴다면, prototype을 연결하여 쓸 수밖에 없지.

 

기억해!

arguments는 배열이 아니라는 것!