[ 함수 ] 화살표 함수

//  화살표 함수 (Arrow function)

/*
function sum() {    //  함수 선언문
    //  pass
}

const sum2 = function () {  //  함수 표현식
    //  pass
}

//  이렇게 함수 선언문과 함수 표현식 두가지 방법을 통해 함수를 정의 할 수 있다.

//  이때 또 다른 방법으로 함수를 만드는 방법이 있다. => 화살표 함수
//  함수 표현식과 유사 하게 어떤 변수를 만들고, 그 변수에 화살표 기호를 사용 해서 함수를 만들 수 있다.

const sum3 = () => {    //  화살표 함수
    //  pass
}
*/

//  이러한 화살표 함수 문법은, JS ES6 버전에서 새롭게 나온 문법 이다.
//  훨씬 간단 하게 함수를 생성 할 수 있기 때문에, 화살표 함수를 많이 사용 한다.

//  ================================================================

//  일반 함수 예시

function sum(a, b) {
    return a + b
}

console.log(sum(1, 2))  //  3
console.log(sum(10, 20))    //  30

//  화살표 함수 예시

const sum2 = (a, b) => {
    return a + b
}

console.log((sum2(1, 2)))    //  3
console.log((sum2(10, 20)))    //  30

//  이때, 화살표 함수의 { } 중괄호 내부 에서,
//  바로 return 키워드가 나오게 되면,
//  { } 중괄호 와 return 을 생략 해도 된다 !

const sum3 = (a, b) => a + b

console.log(sum3(1, 2)) //  3
console.log(sum3(10, 20))   //  30

//  훨씬 간단하게 한줄로도 함수가 생성된 것을 확인 할 수 있다.

//  ================================================================

const a = () => {
    //  pass
}

const b = () => {
    //  pass
}

//  이런식으로 화살표 함수를 보통 생성하는데,
//  함수니까, 소괄호 내부에 당연히 매개변수를 작성 하고,
//  이때, 매개변수가 딱 1개 라면, 소괄호 생략이 가능 하다.

const c = (x) => {
    //  pass
}

const d = x => {    //  매개변수가 1개 일 때, 소괄호 생략 가능.
    //  pass
}

const e = (x, y) => {   //  매개변수가 2개 이상이면, 생략 불가능.
                        //  pass
}

//  위에서 한번 작성했듯이,
//  { } 안에 바로 return 키워드가 나오면, { } 와, return 키워드 생략이 가능 하다.

const f = x => {    //  바로 return 이 나오면, 중괄호 와 return 생략이 가능 하다.
    return x * x
}

const g = x => x * x    //  중괄호 생략 !

//  만약에 return 키워드가 바로 나오지 않으면, 당연히 { } 와 return 생략이 불가능 하다.

const h = x => {
    console.log(x * x)
}

//  이것저것 화살표 함수를 계속 작성 해보기.

const i = () => {   //  매개 변수가 1개 이면 ( ) 생략이 가능 하지만, 0개 이기 때문에 생략 X
    return {a: 1}
}

//  위와 같이, 화살표 함수의 return 값으로 객체 데이터를 반환 한다고 해보자.
//  이때, 중괄호 내부에 바로 return 키워드가 나왔기 때문에, 중괄호와 return 생략이 가능 하다고 했었다.
//  그러면 다시 작성 해보자.

const j = () => {
    a:1
}

//  그러면 위와 같이 작성이 된다.
//  이게 무슨 상황이냐면, const 키워드로 선언한 변수 j는 화살표 다음에 있는 함수가,
//  객체 데이터를 의미 하는 { } 가 아니라, 함수의 중괄호 블럭으로 인식 하게 된다.
//  그래서 위와 같이 작성한 것은 잘못된 문법 이다 !

//  그래서 이럴때는 어떻게 해야 할까 ? { } 에 ( ) 를 래핑 해준다.

const k = () => ({a: 1})    //  이렇게 작성 하면 된다 !

//  만약에 객체 데이터가 아니라, 배열 데이터를 반환 하려고 하면 어떻게 될까 ?

const l = () => {   //  얘도 함수의 중괄호 블럭 내부에 바로 return 이 나오니까 ~
    return [1, 2, 3]
}

const m = () => [1, 2, 3]   //  굳이 소괄호로 묶어줄 필요가 없다 !

//  정리하자면, 객체 데이터의 리터럴이 함수의 블럭 리터럴과 동일 해서,
//  특이하게 소괄호를 둘러줘야 하는 것이다.
//  그 외의 데이터를 return 하는 경우는 모두 소괄호를 작성 할 필요가 없다.

//   [ 정리 ]

/*

1. 화살표 함수를 사용 해서 간단하게 함수를 만들 수 있다.

2. 함수의 매개변수 (파라미터) 가 1개 이면, 소괄호 생략이 가능 하다.
    파라미터가 0개 거나, 2개 이상이면 소괄호 생략이 불가능 하다.

3. 함수의 중괄호 블럭 내부에 바로 return 키워드가 나오면, 중괄호와 return 키워드를 생략 할 수 있다.

4. 함수가 객체 데이터를 바로 반환 할 때, return 키워드와 중괄호를 생략 하는 경우에는,
    함수의 중괄호 블럭의 기호와 객체 데이터를 의미 하는 기호가 동일 하므로,
    화살표 함수는 해당 객체 데이터를 인지 하지 못하고, 함수로 착각 하게 된다.
    그래서 이 경우에만 객체 데이터에 소괄호를 래핑해서 작성 한다.

 */