[ 함수 ] 매개변수 패턴

//  매개변수 패턴 (Parameter pattern)

//  기본값 (Default value)

function sum(a, b) {    //  parameter == 매개변수
    return a + b
}

console.log(sum(1, 2))   //  argument == 인자 == 인수   //  3

console.log(sum(7)) //  a = 7, b = undefined => 7 + undefined == NaN (Not a Number)

//  인자값이 들어 오지 않는 경우를 대비 해서 기본 값을 지정 할 수 있다.
function sum2(a, b = 1) {
    return a + b
}

console.log(sum2(7))    //  8

//  인자값이 다 들어오면 기본값 설정 값은 작동 하지 않는다.

 

 

 

 

const user = {
    name: 'Hwanii',
    age: 28
}

function getName(user) {
    return user.name
}

console.log(getName(user))  //  Hwanii

//  구조 분해 할당 문법 으로 작성 해보자.

const user2 = {
    name: 'Calm',
    age: 96
}

function getName2(user2) {
    const {name} = user2    //  객체 구조 분해 할당 문법
    return name
}

console.log(getName2(user2))    //  Calm (인자로 user2 라는 객체 데이터 자체를 넣기)

//  근데 getName2(user2) 의 매개변수 자체가 객체 데이터 니까,
//  그냥 저기다가 객체 구조 분해 할당 문법을 바로 작성 하여,
//  코드를 줄일 수 있다.

//  getName3() 함수가 호출 될 때, 인자값은 객체 데이터 이고,
//  이 객체 데이터를 구조 분해 해서,
//  객체의 name 이라는 속성의 값을 꺼내서,
//  반환값으로 name 이라는 속성의 값을 return 한다.

function getName3({name}) {
    return name
}

console.log(getName3(user2))    //  Calm

function getEmail({email}) {
    return email
}

console.log(getEmail(user2))    //  undefined => user2 객체에 email 이라는 속성이 없으므로.

//  없는 속성을 인자로 넣어지는 상황을 방지 해서,
//  객체 구조 분해 할당 문법에서 기본 값을 할당 할 수 있다.

function getEmail2({email = '이메일이 없습니다.'}) {
    return email
}

console.log(getEmail2(user2))   //  이메일이 없습니다.

 

 

 

 

//  배열 구조 분해 할당 문법도 확인 해보자.

const fruits = ['Apple', 'Banana', 'Cherry']

function getSecondItem(array) { //  매개변수 array가 fruits 라는 배열 데이터를 받음.
    return array[1]
}

console.log(getSecondItem(fruits))  //  Banana

//  위는 평범한 배열 데이터를 함수를 통해 console.log 를 통해 데이터를 출력 하는 코드 이다.

function getSecondItem2([a, b, c]) {    //  매개변수로 배열 데이터의 구조를 작성 한다.
    return b
}

console.log(getSecondItem2(fruits)) //  Banana

//  그런데, 원하는 데이터는 1번째 인덱스의 요소 값 이니까,
//  아래와 같이 작성 할 수도 있다.

function getSecondItem3([, b]) {    //  , (콤마) 를 작성해 줘야 인덱스 판단이 가능 하다.
    return b
}

console.log(getSecondItem3(fruits)) //  Banana

//  [ 정리 ]
//  정리하면, 앞에서 배웠던, 구조 분해 할당 문법을 매개변수 에서 사용 할 수 있다.
//  따라서, 코드를 더욱 간략히 작성 할 수 있다.

//  마지막 짚고 넘어 가기.
//  아래와 같이 numbers 라는 숫자 데이터 7개를 요소로 가지고 있는 배열을 정의 하고,
//  testArray 라는 함수의 매개변수로
//  [, , c] 라고 배열 구조 분해 할당 문법을 사용 하면,
//  2번째 인덱스에 있는 요소를 반환 하게 된다.

const numbers = [1, 2, 3, 4, 5, 6, 7]

function testArray([, , c]) {
    return c
}

console.log(testArray(numbers)) //  3

 

 

 

 

//  나머지 매개 변수 (Rest parameter)

function sum3(a, b, ...rest) {    //  ... 을 작성 한다. => 전개 연산자.
    console.log(rest)
}

//  현재 sum2 함수의 매개변수는 a, b ...rest 이다.
//  그러면, sum2 함수의 인자를 2개까지는 매개변수로 받고,
//  나머지 인자는 모두 전개 연산자 ... 이 붙어 있는 rest 라는 변수에 들어 가게 된다.
//  그러면 기본적으로 배열 데이터의 구조로 인자의 값이 들어 가게 된다.
//  암튼 인자 값을 줬지만, 파라미터가 인자의 개수와 동일 하지 않으면,
//  인자 값은 모두 전개 연산자가 붙은 rest 라는 변수의 배열 데이터의 요소가 된다.
console.log(sum3(1, 2))   //  3
console.log(sum3(1, 2, 3, 4))  //  10
console.log(sum3(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) //  55

 

 

 

 

//  그런데 함수 이름이 sum2 이니까, 인자로 들어온 모든 데이터를 더하고 싶은데,
//  이때, 배열 데이터를 더하는 메서드가 존재 한다.
//  => reduce (표준 내장 객체인 배열 데이터를 다루는 메서드)
//  accumulator : '값이 누적 된다' 라는 의미 => acc
//  current : '현재 데이터' 를 의미 => cur

function sum4(...rest) {

    console.log(rest)

    console.log(arguments)

    return rest.reduce(function (acc, cur) {   //  reduce 메서드의 인자로 콜백 함수를 넣어 준다.

        return acc + cur

    }, 0)   //  콜백 함수가 끝나는 곳에 , (콤마) 와 숫자 0 을 작성 한다. (숫자 0은 최초 값을 의미 한다)

}

console.log(sum4(1, 2)) //  3
console.log(sum4(1, 2, 3, 4))   //  10
console.log(sum4(1, 2, 3, 4, 5, 6, 7, 8, 9, 10))    //  55

 

 

 

 

//  [ 참고 ]
//  reduce 메서드는 주체가 되는, 배열 데이터의 아이템 (요소) 개수만큼 콜백 함수를 실행 한다.
//  만약 rest 라는 배열 데이터의 요소로 숫자 1 하고 2 가 있다고 하면,
//  reduce 메서드의 콜백 함수는 총 2번이 호출 된다.
//  처음에 콜백 함수 뒤에 0을 작성 했으니까,
//  acc는 0 이고, cur은 배열 데이터의 첫번째 요소의 값이 1 이니까,
//  저 둘을 더 한 값을 return 키워드를 통해 반환 한다.
//  그러면, 이 반환된 숫자 1은 다시 두번째 함수가 반복 될 때,
//  acc의 값이 되고 acc는 그러면 숫자 1이 된다.
//  배열 데이터의 두번째 요소의 값이 2 이니까,
//  acc = 1 과 cur = 2 의 값을 더하면 3이 되고, 그것을 반환 한다.
//  최종적으로 더이상 배열에 요소가 없기 때문에,
//  그 더한 값을 return 키워드를 통해 반환 하게 된다.

//  [ 정리 ]
//  reduce 라는 메서드는 그냥 이런 기능을 하는 구나 정도만 알고 넘어 가면 되고,
//  rest 라는 이름으로 변수 앞에 전개 연산자... 을 작성 해서,
//  매개변수 자리에 작성이 가능 하다는 것을 보면 된다.
//  그리고 자바스크립트는 나머지 매개변수를 통해서 데이터를 받지 않아도,
//  들어오는 모든 인자의 정보를 가지고 있는,
//  이미 선언이 되어 있는 객체가 존재 한다.
//  console.log(arguments) 를 작성 하면 확인 할 수 있다.

//  [ 참고 ]
//  이 arguments 라는 객체는 데이터는 배열 데이터는 아닌데,
//  배열 데이터 처럼 출력 되어 보인다.
//  그래서 이것을 '유사 배열' 이라고 한다. => Array-Like
//  얘는 어디 까지나 유사 배열 이기 때문에, 활용도가 사실상 낮아서,
//  rest 라는 파라미터를 작성 하고, 그 앞에 ... 전개 연산자 를 사용 해서,
//  배열 데이터로 활용을 하는 것이 효과적 이라고 할 수 있겠다.
//  이렇게 유사 배열 이라는 개념이 존재 한다는 정도만 알고 넘어 가면 될듯 ?