Javascript ES6+ default parameter (매개변수 기본값)

 

 

default parameter (매개변수 기본값)

 

 

 

 

 

 

과거 버전인 ES5과 다르게 매개변수의 활용의 기능이 늘었다. 

 

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

//결과:
//0 null

 

<script>

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)

</script>

//결과:
//7 0 "" false null 6

 

• 위의 코드들의 결과를 보면 알 수 있듯이 함수의 매개변수로 들어가는 값들이 정의되지 않는다면 그 정의되지 않은 매개변수의 함수 인자들이 자신 스스로 변수로 선언하여 변수 값들을 실행하는 것을 볼 수 있다.
• 하지만 정의되어진 값들이 매개변수로 들어가면 자기 스스로 변수로 설정한 값들은 무시되며 정상적으로 함수 안에서 매개변수로서 활동한다.

 

 

 

 

 

 

 

 

 

 

 

값 주고 받기

 

const f = function (x = 1, y = 3 + x) {
  console.log(x, y)
}
f()

//결과:
//1 4

 

• 위와 같이 함수의 인자들은 매개변수들 끼리 값을 주고받을 수도 있다.
• f()와 같이 인자 안에 아무 정의되지 않은 함수를 실행하였기에 매개변수는 정의되지 않았음을 알아차리고 스스로 선언한 변수가 실행된 것이다.

 

 

 

 

 

 

 

 

 

 

함수 사용

 

const getDefault = function () {
  console.log('getDefault Called.')
  return 10
}
const sum = function (x, y = getDefault()) {
  console.log(x + y)
}
sum(1, 2)
sum(1)

//결과:
//3
//getDefault Called.
//11

 

• 위와 같이 매개변수가 함수 자체를 변수로 스스로 선언할 수 있다.
• 위에서 미리 만들어진 함수를 통해 매개변수에 정의되지 않으면 그 매개변수가 위에서 만든 함수가 실행되도롣 코드가 이루어져 있다는 것을 알 수 있다.

 

 

 

 

 

 

 

 

 

 

let과 동일한 기능

 

const f = function (x = 1, y = 2 + x) {
  let z = y + 3
  x = 4
  console.log(x, y, z)
}
f()

//결과:
//4 3 6

 

• 또 ES5의 구버전에서는 매개변수를 인자로 담고 있는 함수는 var 변수를 선언한 것과 마찬가지라고 알려져 있었지만 ES6+ 최신 버전에서는 let 변수와 같은 선언과 동일하다고 볼 수 있다.

 

 

 

 

 

그래서 아래와 같이 매개변수의 첫 번째 인자부터 시작한 순서에 따라 미리 선언되지 않는 매개변수의 스스로 선언한 변수는 미리 사용할 수 없게 된다.

 

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

f(1, undefined, 3)

//결과:
// c is not defined

 

 

 

 

 

 

 

그래서 let의 성질때문에 발생하는 TDZ 또한 똑같이 적용된다.

 

const multiply = function (x, y = x * 2) {
  console.log(x * y)
}
multiply(2, 3)
multiply(2)

//결과:
//6
//8

 

 

 

 

 

 

 

 

 

 

주의사항

 

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

//결과:
//1 2
//10 2
//오류
//오류

 

• let으로 선언한 변수와 함수의 매개변수의 이름이 똑같으면 안된다.
• 똑같으면 위의 코드 중 b의 매개변수처럼 b의 매개변수에 정의되지 않자 f함수의 {}블록 밖에 있는 let b의 변수를 불러올 수 없게 되므로 TDZ에 걸려버리게 되버린다.