JS | ES6 문법 - 화살표 함수

화살표 함수

https://coding404.tistory.com/11

return이 있다는 뜻

 

JS ES6 문법 한눈에 보기

 

1. 화살표 함수는 기본적으로 익명함수를 대체합니다. (호이스팅 불가)

2. 가독성이 향상됩니다.

  //기본적으로 익명함수를 대체합니다.
        //익명함수는 당겨쓰기가 안된다.

        // var a = function(){
        //     console.log("a실행");
        // }

        let a = () => {
            console.log("a 실행");
        }

        a();

        /*
        문법1
        코드가 한 줄이면 {}가 생략됩니다.
        {}를 생략하면 자동으로 return이 붙습니다.
        */

        let b1 = () => console.log("b 실행");
        b1();

        let b2 = (a,b,c) => a+b+c;
        console.log(b2(1,2,3));

        let b3 = (a = 10) => a + 100;
        console.log(b3()); //110
        console.log(b3(20)); //120

        /*
        문법2
        매개변수가 1개라면 () 생략이 됩니다.
        */

        let c1 = a => a + 10;
        console.log(c1(10));

        /*
        문법3
        객체를 반환할 때는 ()로 묶어주면 됩니다.
        */

        //1st
        let c2 = () => {
            return {key:1,age:20}
        };

        //2nd
        let c3 = () => ({key:1, age:20})
        console.log(c3());

        //
        // setInterval(functoin(){
        //     console.log(1);
        // },1000);

        // setInterval(() => console.log(1), 1000);

  //forEach(콜백함수, thisArg:옵션)
        //forEach(functoin(현재값, 인덱스, 현재배열) {}, thisArg)

        let arr = ["a","b","c","d"];
        
        // arr.forEach(function(value, index, arr){
        //     console.log("값 : "+value+", 인덱스 : "+index+", 현재배열"+arr);
        // });

        // arr.forEach(function(value){
        //     console.log(value);
        // });

        // arr.forEach((value,index,arr)=>{
        //     console.log(`값 ${value}, 인덱스 ${index}, 현재배열 ${arr}`)
        // });

        // arr.forEach(value => console.log(value));

        //필터함수 - 콜백에 리턴이 true인 값을 이용해서 새로운 배열을 반환
        //filter(콜백(값,인덱스,현재배열), thisArg)
        let arr2 = [1,2,3,4,5,6,7,8,9,10];

        // let result = arr2.filter(function(a,b,c){
        //     // console.log(value,index,arr);
        //     return a % 2 == 0;
        // });

        // console.log(result);
        
        // let result = arr2.filter((a) => a % 2 == 0);
        // console.log(result);
        
        //배열요소중에 o가 들어간 문자열만 필터링
        // let arr3 = ["melon", "apple", "orange", "grape", "mango"];

        // let result = arr3.filter(a => a.includes("o") == true);
        // console.log(result);

        //map 함수 : 실행한 결과를 가지고 새로운 배열을 만들 때 사용
        //map (콜백(현재값,인덱스,현재배열), thisArg)
        let arr4 = [1,3,5,7,9];
        // let result = arr4.map(function(a, b, c){
        //     return a+1;
        // });
        // console.log(result); // [2, 4, 6, 8, 10]

        let result = arr4.map(a => a+1);
        console.log(result);

        let arr3 = ["melon", "apple", "orange", "grape", "mango"];

        let result3 = arr3.filter(a => a.includes("o")==true).map((a,b)=>`o가 들어간 과일중 ${a}는 ${b+1}번째입니다.`);
        console.log(result3);