국비수업/수업정리

자바스크립트 / 8

밀김 2023. 3. 30. 10:57
728x90

 

 

 

 

 

 

 

 

 

- 자스는 변수에다가 변수를 사용할수 있다

 

let col = "kor";
let exam = {[col+1]:10,eng:20,math:30};
console.log(exam.kor1);
//키값인 col에도 뭘 붙일수 있다...하지만 권장하지는 않는 방법

 

 

 


 

 

 

<Object Destructuring>

 

 

- .도 연산자여서 너무 많이 쓰면 실행 성능이 저하된다

 

속성을 뽀갠다

 

 

 

 

 

let exam = {kor:10,eng:20,math:30};

let {kor,eng,math} = exam;
//이런식으로 변수를 왼쪽에 쓸수도 있다
console.log(kor); //출력:10
console.log(eng); //출력:20
console.log(math); //출력:30

 

 

 

let exam1 = {kor:90,eng:44,math:11};

({kor,eng,math} = exam1);
//변수명이 같을때는 ( )괄호로 감싸주면 같은 변수명을 쓸수 있다
console.log(kor);
console.log(eng);

 

 

let {kor,eng,math,com=77} = exam;
//이렇게 괄호 안에 직접 값을 대입해줄수도 있다

 

 

let{kor:korean,eng,math,com=77} = exam;
//korean이라고 변수 이름을 변경해줄수도 있다 값은 전에 갖고 있던것과 똑같이 10이 나온다
//korean이 변수명이고 kor는 객체 속성명이다

 

 

 

 

- 이름이 바꼈으면 정의를 다시 해줘야 한다

let exam = {kor:10,eng:20,math:30};
let exam1 = {kor:90,eng:44,math:11};
//korean이 없음

let{kor:korean,eng,math,com=77} = exam;
//korean선언?

({eng,math} = exam1);
let {kor} = exam1; 
//exam1의 korean은 let을 안해줬으니, kor라고 다시 정의해준다

print(exam1);
//exam1을 찍어낼꺼고

function print({kor,eng,math}){
    console.log(kor); //korean인 90이 나온다
}

 

 

 

let exam = {
    kor:10,
    eng:20,
    math:30,
    student:{
        name:"hi",
        phone:"1234-5542"
    }
};

let {student:{name}} = exam;
//student에 있는 name을 꺼내는 방법(뽀개기)
//student의 객체가 name이다????
console.log(name); //출력:hi

 

 

 

    let lotto = [1,2,3,4,5];
    let [num1,num2,num3] = lotto;
    console.log(num2); //num1은 1,num2는 2..값이 잘 나온다

 

 

 

    //num3만 지역변수로 뽑아내는법 > 빈칸으로 둔다
    let lotto = [1,2,3,4,5];
    let [,,num3] = lotto;

 

 

{
    //다른 배열로 같은 변수를 재할당을 하는 방법 > let을 지워주면 된다
    let lotto = [1,2,3,4,5];

    let [num1,num2,num3] = lotto;

    let template = 'num1:${lotto[0]}, num2:${lotto[1]}, num3:${lotto[2]}';
    console.log(template);

    [num1,num2,num3] = lotto;
    template = 'num1:${lotto[0]}, num2:${lotto[1]}, num3:${lotto[2]}';
    console.log(template);
}

 

 

 

 

    //뽀개기 변수에 다른 변수를 함께 선언하는 방법 > 
    let lotto = [1,2];

    // let [num1,num2,num3] = lotto;
    // console.log(num3);//언디파인디드나옴
    let [num1,num2,num3=100] = lotto;
    console.log(num3);
    //하지만 값을 넣어주면 그 값이 나옴

 

 

 

 

{
    //배열 뽀개기는 값을 대입을 통해 손쉽게 바꿀수도 있다
    let num1 = 30;
    let num2 = 50;

    let template = null;

    template = `num1:${num1}, num2:${num2}`;
    console.log(template);

    [num2, num1] = [num1, num2];
    template = `num1:${num1}, num2:${num2}`;
    console.log(template);
}

 

 

 

{
    //배열의 중첩 또는 혼합되는 객체 뽀개기

    let lotto = [30,[3,11,23,33,35,40]];
    let [,[,,num3]] = lotto;
    console.log(num3);
}

    let lotto = [30,[3,11,23,33,35,40]];
    let [,[,,num3,...args]] = lotto;
    console.log(args[0]); //출력33

 

 

 let notice = {
        name: "공지사항 목록",
        list:[
            {id:1, title:"공지사항1"},
            {id:2, title:"공지사항2"} 
        ]
    };

    let {list:[,{title}]} = notice; //공지사항2출력
    //이어갈때는 : 요걸 쓴다
    let {list:list1}=notice; //list1을 선언을하고,notice의 list를 가져온다

 

 

 


 

 

<람다 표현식:화살표 함수>

 

 

 

- 함수를 전달해줄때 쓴다

 

    let lotto = [35,15,25,14,45,8];

    lotto.sort(function(a,b){return a-b;});
    //함수를 반환하고function(a,b) / a-b오름차순으로 정렬해라
    lotto.sort(function(a,b){return b-a;});
    //이렇게하면 내림차순 정렬
    lotto.sort((a, b) => a - b);
    //★★★★★★★화살표함수를 써서도 표현 가능하다★★★★★★★
    console.log(lotto);

 

- a,b 서로 뺀값이 양수면 자리를 바꾸고, 음수가 나오면 바꾸지 않는다

 

- 함수를 전달 할일이 많다...그래서 잘 알아야한다......

 

 

 

 

 

 

 

 

 

 

 

 

728x90