javascript es6 비구조할당과 함수

 -배열 또는 객체에서 변수를 추출해내는 표현식
 -함수의 전달 인자가 객체 또는 배열일 경우 인수를 바로 원소와 속성으로 지정할 수 있어 편리하다

배열 디스트럭쳐링

    let arr = [10,20,30];
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];
    console.log(a,b,c); // 10 20 30

    let [a2 ,b2, c2] = [10,20,30];
    console.log(a2,b2,c2); // 10 20 30

    let [a3 ,b3, c3] = arr;
    console.log(a3,b3,c3); // 10 20 30

    //일부 배열 원소는 생략할 수 있다
    let [a4 , , c4] = arr;
    console.log(a4,c4);  // 10 30

    let [a5=10 , b5=20, c5=30] = [ , , 100];
    console.log(a5,b5,c5);  // 10 20 100

    let [a6, b6, c6] = [10,20,30,40,50,60];
    console.log(a6,b6,c6);  // 10 20 30

    let [a7, b7, ...c7] = [10,20,30,40,50,60];
    console.log(a7,b7,c7);  //c7은 배열[30,40,50,60]

    let a8 = [];
    a8 = [100,200,300];
    console.log(a8);

    let a9 = [];
    let a10 = ['홍길동','이순신','최순실'];
    a9 = a10;
    console.log(a9);

객체 디스트럭쳐링

    let obj = {a:10, b:20, c:30};
    let a = obj.a;
    let b = obj.b;
    let c = obj.c;
    console.log(a,b,c); //10 20 30

    let {a2,b2,c2} = {a2:10,b2:20,c2:30};
    console.log(a2,b2,c2); //10 20 30
    
    //**************************************************************************************************************************************************************************************//
    //객체 디스트럭쳐링 변수와 같은 이름의 객체 속성이어야 한다(이름이 다르면 undefined 가 할당된다)//
    //**************************************************************************************************************************************************************************************//
    let obj3 = {a3:10,b3:20,c3:30};
    let {a3,b3,c3} = obj3;
    console.log(a3,b3,c3); //10 0 30

    let obj4 = {a4:10, b4:20};
    let{a4,b4,c4} = obj4;
    console.log(a4,b4,c4); // 10 20 undefined

    let obj5 = {};
    let obj6 = {name:'최순실', age:60, weight:'100kg', height:'130cm'};
    obj5 = obj6;
    console.log(obj5);

 

함수 매개변수 전달

  //함수 매개변수 배열 전달인자
    function arr_func([a,b,c=a+b]){
        console.log(a,b,c); // 100 200 300
    }
    arr_func([100,200]);

    // let arr=[100,200];
    // function arr_func([a,b,c=a+b]){
    //     console.log(a,b,c); // 100 200 300
    // }
    // arr_func(arr);

    //함수 매개변수 객체 전달인자
    function obj_func({a,b,c=a+b}){
        console.log(a,b,c); // 100 200 300
    }
    obj_func({a:100,b:200});

    // let obj = {a:100,b:200};
    // function obj_func({a,b,c=a+b}){
    //     console.log(a,b,c); // 100 200 300
    // }
    // obj_func(obj);

    let arr = ['이순신','최순실','콘도르'];
    function arr_func(a){
        console.log(a[0],a[1],a[2]); // 이순신 최순실 콘도르
    }
    arr_func(arr);

    // let obj = {name:'최순실', age:100};
    // function obj_func(a){
    //     console.log(a.name,a.age);
    // }
    // obj_func(obj)

함수

나머지 매개변수(Rest Parameter) - 코드의 가독성을 높일 수 있다

    function myfnc(p1){
        if(arguments[1]){ // 두번째 전달인자가 있을 때
            console.log(p1+arguments[1]); // 300
        }else{
            console.log(p1);
        }
    }
    myfnc(100,200);

    //나머지 매개변수 사용
    function myfnc2(p1,...args){ // ...args 나머지 매개변수 추가(배열처리)
        if(args[0]){ // 두번째 전달인자가 있을 때
            console.log(p1+args[0]); //300
        }else{
            console.log(p1)
        }
    }
    myfnc2(100,200);

    function myfnc3(p1,...args){ // ...args 나머지 매개변수 추가(배열로 처리)
        if(args[0]){
            console.log(p1+args[0]+args[1]+args[2]); // 1000
        }else{
            console.log(p1)
        }
    }
    myfnc3(100,200,300,400);

기본 매개변수(default Parameter)

 -이전에는 매개변수에 기본값을 설정할 수 없어 전달 인자가 없는 경우 매개변수에는
  undefined가 할당된다(초기값을 다시 설정해야하는 번거러움이 있다)

    function myFnc(p1){
        p1 = (typeof p1 != 'undefined')? p1:0; // 전달인자 없을시 0
        console.log(p1);
    }
    myFnc();

    //기본 ㄴ매개변수 사용
    function myfnc2(p1=0){
        console.log(p1);
    }
    myfnc2();

    //먼저 선언된 매개변수의 값은 나중의 기본 매개변수에 이용 가능
    function myFnc3(a,b=100,c=a+b){
        console.log(a,b,c)// 100 100 100
    }
    myFnc3(100);

    function myFnc4(a=100,b=200,c=a+b){
        console.log(a,b,c); // 100 200 300
    }
    myFnc4();

    function myFnc5(a=100,b=200,c=a+b){
        console.log(a,b,c); //10 20 30
    }
    myFnc5(10,20);
    
    // 두번째 세번째 매개변수의 초기값이 없을 때
    function myFnc6(a=100,b,c){
        console.log(a,b,c)// 100 200 300
    }
    myFnc6(100,200,300); // 최소 3개부터 가능
    
    // 두번째 매개변수의 초기값이 없을 때
    function myFnc7(a=100,b,c=300){
        console.log(a,b,c)// 100 200 300
    }
    myFnc7(100,200) // 최소 2개부터 가능
    myFnc7(100,200,300);

return 값이 있는 함수

    function message(){
       return '자바스크립트 ES6를 공부합시다';
    }

    function sendMessage(msg=message()){
       console.log(msg);
    }
    sendMessage();
    sendMessage(100); // 매개변수 값을 준다면 해당 값이 출력

화살표 함수

    function func1(a){
        console.log(a+'를 공부합시다!');   
    }
    func1('자바스크립트');

    let func2 = function(a){
        console.log(a+'를 공부합시다!');
    }
    func2('자바스크립트');

    //화살표 함수

    let func3 = (a)=>{
        console.log(a+'를 공부합시다');
    }
    func3('자바스크립트');

    let func4 = (a,b)=>{
        console.log(`${a}이 ${b}를 공부합니다`);
    }
    func4('최순실','사기');
    
    let func44 = (a,b)=>{
        return `${a}이 ${b}를 공부합니다`;
    }
    console.log(func44('최순실','사기사기사기사기'));

    //블럭 생략 가능
    let func5 = (a,b) => console.log(`${a}가 ${b}를 공부합니다`);
    func5('김아무개','자바스크립트');

    //주의 : 블록 생략시 return은 사용 불가(error)
    // let fun6 = (a,b) => return `${a}이 ${b}를 공부합니다`;
    // func6('김개똥','자바스크립트')

    //매개변수가 없을 때
    let func6 = ()=> console.log('자바스크립트를 공부합시다');
    func6();

배열 함수

1) forEach : 반환값이 없다, 단순 for문과 같이 작동한다.
2) map : 반환값을 배열에 담아 반환한다.
3) filter: 조건에 충족하는(true) 아이템만 배열에 담아 반환한다.
4) some: 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 flase.
5) every: 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false.
6) find : 조건에 충족하는 아이템 하나만 반환(여러개라면 첫번째것만 반환)
7) findIndex : 조건에 충족하는 아이템의 인덱스값 반환 (여러개라면 첫번째아이템의 인덱스번호만 반환)

 

* 형식

let 배열명 = 배열명 / 객체배열명 . 배열함수(function(item,index){처리 코드});

    let names = [
        "Steven Paul Jobs",
        "Bill Gates",
        "Mark Elliot Zuckerberg",
        "Elon Musk",
        "Jeff Bezos",
        "Warren Edward Buffett",
        "Larry Page",
        "Larry Ellison",
        "Tim Cook",
        "Lloyd Blankfein",
    ];

    let ceoList = [
        {name:'홍길동', age:50, height: 180},
        {name:'이순신', age:60, height: 190},
        {name:'강감찬', age:70, height: 170}
    ];

  
    function printName(item){
        console.log(item);
    }
    names.forEach(printName);

    // foreach

    names.forEach((item)=>console.log(item));
    names.forEach((item,index)=>{console.log(item,index);});

    // map

    let data = names.map((item)=>{
    return  item;
    // return '이름:' + item;
    });
    console.log(data);

    let data2 = ceoList.map((item)=>{
        return item.name;
    });
    console.log(data2);

    //filter
    let data3 = ceoList.filter((item)=>{
        //return item.name =='이순신';
        return item.age>=60
    });
    console.log(data3)

    let data4 = names.filter((item)=>{
        return item.startsWith('L') // 첫번째 문자 찾는 메소드
    });

    console.log(data4);

    //some

    let data5 = names.some((item)=>{
        return item.startsWith('L'); // 해당 문자열로 시작하는 배열이 있다면 true 없다면 false
        // return item.startsWith('K');
    });
    console.log(data5);

    //every

    let data6 = names.every((item)=>{
        return item.startsWith('L'); // 해당 문자열로 모든 배열이 시작한다면 true 아니면 false
        // return item.length>1; // names 배열 한에 문자열의 길이가 1보다 길면 true 아니면
    });
    console.log(data6);

    let data7 = ceoList.every((item)=>{
        //return item.name == '이순신';
        return item.age >= 50;
    });
    console.log(data7);

    //find

    let data8 = names.find((item)=>{
        return item.startsWith('L'); // names 배열의 L로 시작하는 첫번째 문자열 반환
    });
    console.log(data8);

    //findIndex

    let data9 = names.findIndex((item)=>{
        return item.startsWith('L'); // names 배열의 L로 시작하는 첫번째 문자열의 인덱스 번호 반환
    });
    console.log(data9)

함수 예시

//<map 문제> 
//모든 이름을 대문자로 바꾸어서 출력하시오.
let upperCaseName = names.map((item)=>item.toUpperCase());
console.log(upperCaseName);

//성을제외한 이름만 출력하시오. (예-[“Steven”,“Bill”,“Mark”,“Elon”…])
let firstNames = names.map((item)=>item.split(' ')[0]);
console.log(firstNames);

//이름의 이니셜만 출력하시오. (예-[“SPJ”,“BG”,“MEZ”,“EM”…])
let initialOnly = names.map((item) => {
    let splitName = item.split(" "); // splitName[0] = [Steven], splitName[1] = [Paul], splitName[2] = [Jobs]
    let initial = "";
    splitName.forEach((nameItem) => (initial += nameItem[0]));
    return initial;
  });
console.log(initialOnly);

//<filter 문제>
//이름에 a를 포함한 사람들을 출력하시오.
let includeA = names.filter((item)=>item.includes('a'));
console.log(includeA);

//<some 문제>
//전체 이름의 길이가 20자 이상인 사람이 있는가?
console.log(names.some((item)=>item.length>=20));

//<every 문제>
//모두의 전체 이름의 길이가 20자 이상인가?
console.log(names.every((item)=>item.length>=20));

//모두의 이름에 a 가 포함되어 있는가?
console.log(names.every((item)=>item.includes('a')));

//<find 문제>
//전체 이름의 길이가 20자 이상인 사람을 찾으시오.
console.log(names.find(item=>item.length>=20));

//미들네임이 포함되어있는 사람을 찾으시오.(예-Steven Paul Jobs)
console.log(names.find(item=>item.split(' ').length>=3));

//<findIndex 문제>
//전체 이름의 길이가 20자 이상인 사람의 인덱스 번호를 찾으시오.
console.log(names.findIndex(item=>item.length>=20));

//미들네임이 포함되어있는 사람의 인덱스 번호를 찾으시오.
console.log(names.findIndex(item=>item.split(' ').length>=3));