0728 | JS ES6 :: 템플릿문자열${}, String.raw / 향상된 JSON 상태표현식 / 객체와 배열 구조분해할당

😵 ~23.11.10

0728 | JS ES6 :: 템플릿문자열${}, String.raw / 향상된 JSON 상태표현식 / 객체와 배열 구조분해할당

unikue 2023. 7. 30. 23:42

✅ 데이터를 꽂아넣을 수 있는 템플릿 문자열 ${넣고자하는 변수명}

let title = "ES6";
let color = "red";
let className = "note"

//기존방식 - 백틱문제, 내려쓰기 문제
let template = '<section class="' + className + '"> \
<h1 style="color:"' + color + ';"> ' + title + '</h1></section>';

//새로운 방식 -- 단 전체 문장은 백틱으로 감싸주기
let template = `<section class="${className}"><h1 style=color:${color};" > ${title}</h1></section>`; // 값이 들어갈 곳에 ?를 쓰고 ${}로 값 꽂아주기

console.log(template);

// 백틱의 특성을 이용해서 태그를 맞춰주면 html처럼 표기하는것도 가능. 코드를 읽기 수월해진다
let template2 = `
<section class="${className}">
    h1 style=color:${color};" >${title}</h1>
</section>`;
console.log(template2);

#️⃣ 일반적으로 코드 안에 쓰지 못하는 글자들 (\n, ' `)을 그대로 출력하고 싶을때

1. 역슬래시를 붙인다 ▶ \\n a \n으로 출력됨

2. String.raw를 `백틱`앞에 붙여주면 내용 그대로 출력된다. (< new!!)

let template2 = String.raw`
<section class="${className}"> \\n \' \`
    h1 style=color:${color};" >${title}</h1>
</section>`;

✅ 향상된 JSON 상태 표현식 1 - 속성명 생략과 메서드 표현법의 변화

: 객체 안에 키이름과 변수명이 동일할 경우, 변수명으로 속성명을 만들어준다. (*변수명이 같다면 키워드가 필요 없음)

let kor = 30;
let eng = 40;
let math = 90;

let exam = { kor: kor, eng: eng, math: math };
let exam1 = { kor, eng, math }; // 변수명을 가지고 그대로 속성명으로 만들어준다


    let exam = {
        kor: kor, eng: eng, math: math,
        total: function () {
            return this.kor + this.eng + this.math;
        },
        avg: function () {
            return this.total / 3;
        }
    };
    console.log(exam);

    let exam1 = {
        kor, eng, math
        , total() {
            return this.kor + this.eng + this.math;
        }
        , agv() {
            return this.total() / 3;
        }
    };
    console.log(exam1);

✅ 향상된 JSON 상태 표현식 2 - 값 뿐만 아니라 속성명도 변수 사용 가능

let kor = 30;
let eng = 40;
let math = 90;
let aa = "com";

let exam = {kor, eng, math
    , total() {
        return this.kor + this.eng + this.math;
    }
    , agv() {
        return this.total() / 3;
    },
    [aa + "1"]: 50 //을 추가하게 되면 변수명도 변경됨
};
console.log(exam.kor);
console.log(exam.com); //undefined
console.log(exam.com1); // com1속성이 생겨서 50출력

👉 심볼은 자바스크립트가 객체지향을 지원하면서 다형성을 구현할 수 있도록 하는 변수. [aa+"1"]같이 함부로 변수명이 변동되지 않도록 심볼을 사용하는 방향으로 나아간다.

연산횟수를 줄이고 구조의 복잡도를 줄이는 방향으로 사용하기 (지역변수 사용으로 구조화된 연산을 내려놓기)

👉 destructing : object뽀개기 ▶ 이 기능을 직접 하지않고 이용가능하도록 기능이 추가되었음

👉 object에 있는 것을 뽀개서 지역변수로 선언한다

let {지역변수,지역변수} = object; 인 구조

//기존방식들
    // 방법1
    let exam = { kor: 10, eng: 20, math: 30 };
    console.log(exam.kor, exam.eng, exam.math);

    // 방법2
    let kor = exam.kor; // 지역변수로 직접 만드는 작업
    let eng = exam.eng;
    let math = exam.math;

	console.log(kor, eng, math);

//destucting
    let exam1 = { kor1: 10, eng1: 20, math1: 30 };
    let { kor1, eng1, math1 } = exam1; // 직접 뽀개지않고 객체를 destucting. 단 객체명과 변수명이 동일해야한다
    console.log(kor1, eng1, math1);

 let exam1 = { kor1: 10, eng1: 20, math1: 30, student: { name: 'newlec', phone: '010-1111-2222' } };
 
 let { math1: score } = exam1; //값 변수명 새로 부여하기
    console.log(score); // 30 출력

구조 분해 할당 - JavaScript | MDN

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

developer.mozilla.org

#️⃣ 중첩객체 분해하기

//destucting 구조가 잘라져서 개별적으로 흩어진다는 뜻.
let exam1 = { kor1: 10, eng1: 20, math1: 30, student: { name: 'newlec', phone: '010-1111-2222' } };

let { kor1, student } = exam1;
console.log(kor1, student)

let { kor1, student: { name, phone } } = exam1;
console.log(kor1, name, phone)

#️⃣ 객체 분해 & 속성 동적 할당하기

let exam1 = {
        kor1: 10, eng1: 20, math1: 30,
        student: {
            name: 'newlec', phone: '010-1111-2222', day: {
                month: "july", date: {
                    sunday: "study", workout: "hard"
                }
            }
        }
    };

let { student: { name, day: { date: { sunday, workout, now = "sleep" } } } //exam1에 없는 now속성을 할당해서 뽀개기
} = exam1

console.log(name,now);

#️⃣ 중첩 배열 분해하기

let kors = [10, 20, 30];
// 기존 뽀개기방법
// let kor1 = kors[0];
// let kor2 = kors[1];
// let kor3 = kors[2];

desturcting으로 뽀개기
let [kor1, kor2, kor3] = kors;
console.log(kor1, kor2, kor3); // 10,20,30

//두번째 배열부터 뽀개서 담기
let [, kor1, kor2, kor3=1000] = kors; // kors[1]부터 담으면서 새로 할당도 진행
console.log(kor1, kor2, kor3); // 20, 30, 1000

// 기존 변수에 새롭게 뽀개넣기
let kors1 = [100, 200];
[kor1, kor2] = kors1; // 선언을 하지 않고 뽀개면 변수를 재활용할 수 있다
console.log(kor1, kor2, kor3) //100, 200, 1000 새롭게 뽀갠 값 kor1, kor2와 기존 kor3이 같이 나온다

let kors = [[20, 30, 40, 50], [100, 200, 300, 400]];
let [[kor1, kor2], [kor3, kor4]] = kors; // 첫번째 배열에서 1,2값, 두번째 배열에서 1,2값을 뽑아냄
console.log(kor1, kor2, kor3, kor4); // 20,30,100,200

#️⃣ 뽀개는 특성을 이용해서 변수에 들어있는 값 바꾸기

let kor = 30;
let eng = 50;

console.log(kor, eng); //30,50

[eng, kor] = [kor, eng]; // 배열에 넣어서 뽀개기
console.log(kor, eng); // 값이 바뀌어서 50,30으로 출력됨

    let kors = [[20, 30, 40, 50], [100, 200, 300, 400]];
    [[, , , kor1], kor2] = kors; // 뽀개지면서 kor1은 개별값, kor2에는 배열로 들어감
    console.log(kor2, kor1) // [100,200,300,400]50 으로 뒤집어서 출력됨

#️⃣ 기존 변수들을 이용한 뽀개기

let kor1, kor2, eng;
let exam = { kor: 30, eng: 40 };
({ kor: kor1, eng } = exam); //kor의 변수명을 kor1로 재정의
console.log(kor1, eng) // 30, 40

let kor1, kor2, eng;
let kors = [100, 200, 300];
let exam = { kor: 30, eng: 40, kors }; // 객체안에 배열을 넣어줌
({ kor: kor1, eng, kors: [, , kor2] } = exam); //객체의 변수 재활용할때 괄호로 감싸기
console.log(kor1, eng, kor2) // 30, 40, 300

❎ 소괄호 사용 이유

네번째 줄에서 소괄호를 사용하는 이유는 구조 분해 할당(Destructuring Assignment)과 객체 리터럴(Object Literal)의 문법이 충돌하기 때문입니다.

(*객체리터럴 : 중괄호 {}를 사용하여 객체를 생성하고, 속성과 값을 나열하여 객체를 초기화하는 방법)

구조 분해 할당은 중괄호 {}를 사용하여 객체의 속성을 추출하고 변수에 할당하는 문법입니다. 또한, 객체 리터럴도 중괄호 {}를 사용하여 객체를 생성하는 문법입니다.

자바스크립트에서 중괄호 {}를 사용하는 문법은 객체 리터럴과 구조 분해 할당 두 가지가 있기 때문에, {}를 어떤 문법으로 해석해야 할지 애매해집니다. 이를 해결하기 위해, 구조 분해 할당을 수행할 때 왼쪽에 중괄호 {}를 두려고 하면 자바스크립트 엔진은 중괄호를 객체 리터럴로 인식하게 되어 문법 오류가 발생합니다.

따라서 구조 분해 할당을 수행할 때, 변수 할당 부분을 소괄호 ()로 둘러싸서 자바스크립트 엔진에게 구조 분해 할당을 수행한다는 것을 명시해야 합니다. 이렇게 하면 객체 리터럴과 구조 분해 할당의 문법 충돌을 해결할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)