웹 풀스택 개발자 에디입니다.
이번 시간에는 ECMAScript 객체 리터럴(Literal) 문법에 대해 알아보겠습니다.


자바스크립트에서 자주 리터럴(Literal)이란 용어를 사용하는데요. 리터럴은 자바스크립트에서 특정 값을 나타내는 방법을 말합니다.
리터럴은 변수명이나 상수명과 다르게 변수/상수에 할당되는 값의 형식을 주로 말합니다.
예를 들면

let married = true;

const teacher ={

    name:'강창훈,

    role:'풀스택강사',

    techList:['react','node','devops','cloud','rdbms','nosql']

}

위 코드에서 married변수의 값을 나타내는 방법(리터럴)은 불린형이고 불린형 리터럴은 true 와 false를 제공하며 
teacher 상수의 값을 나타내는 리터럴(값의 형식 또는 값 표시방식)은 객체(Object)형식입니다.


자바스크립트의 기존 객체 리터럴(객체표시 및 정의방식)은 중괄호를 {} 을 통해 객체를 정의하고 세부적인 속성은 {}안에 속성을 통해 값과 기능을
한번 정의하면 추가 속성을 정의할수 없었던 반면에 ECMAScript 객체 리터럴 신규 문법을 이용하면 한번 객체의 구조가 정의된 변수/상수의 구조를
필요시마다 동적으로 객체에 속성을 추가 생성하고 값을 할당할수 있는 기능을 제공합니다.


ECMAScript-Basic 실습 폴더내에 object-literal.html 웹페이지를 하나 만들고 해당 문서내에서 ! 엔터키를 입력하여 기본적인 웹페이지 코드를 아래와 같이 자동으로 생성합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Literal</title>
</head>

<body>
    <h1>객체 리터럴 동적속성 기능실습</h1>

    <script>

        console.log("웹브라우저 개발자도구 콘솔 출력 예시코드입니다.");

    </script>

</body>

</html>


object-literal.html  문서를 저장하고 오른쪽마우스 클릭을 하면 Live Server를 통해 해당 웹페이지 문서를 바로 서버환경을 통해 여러분의 웹브라우저를 통해 웹페이지를 오픈해보고 웹브라우저 F12키를 눌러 개발자도구>콘솔 탭을 통해  console.log()값들이 정상적으로 출력되는지 확인해봅니다.


기초적인 자바스크립트 객체 리터럴을 정의해보고 특정 속성값을 변경해보겠습니다.
한번 정의된 객체는 객체를 새로 정의하지 않는이상 기존의 구조를 변경하는것이 불가했지만 신규 동적속성 추가기능을 이용하면 손쉽게 기정의된 객체의 구조를 변경할수 있습니다.

동적 속성 추가 방법 
객체변수명["동적속성명"]= 동적속성값;
또는 
객체변수명.동적속성명= 동적속성값;


 console.log("웹브라우저 개발자도구 콘솔 출력 예시코드입니다.");

        //예시1) 기본적인 객체 구조 정의 및 사용하기
        let noteBook = {
            productId: "1",
            productName: "LG그램17",
            price: 1000,
            brand: "LG전자"
        };

        console.log("노트북정보:", noteBook);

        //객체 특정 속성값 변경
        noteBook.price = 2000;

        //객체의 기존 정의된 속성값은 변경가능하나 객체 자체의 구조는 변경이 불가능하였다.
        console.log("노트북정보:", noteBook);


        //예시2) ECMAScript 객체 리터럴의 동적속성 추가 기능을 이용해 한번정의된 객체의 구조를 동적으로 변경해보자

        //noteBook 객체 새로운 재고속성을 동적으로 추가하고 기본값을 할당해보자
        //동적속성 정의 규칙 : 객체변수/상수["동적속성명"] = 동적속성할당값;
        noteBook["stock"] = 200;

        //noteBook 객체에 stock속성이 추가된것을 확인할수 있다.
        console.log("노트북정보:", noteBook);


        //좀더 쉬운 동적속성 추가 문법
        //기존 객체변수에 .신규속성명 = 신규속성값;
        noteBook.spec = { CPU: "i7", Memory: "16G", SDD: "512G" };

        console.log("노트북정보:", noteBook);

        //noteBook 객체에 추가속성을 프로그래밍방식으로 정의할수도 있다
        var SalesCenter = "Center";
        for (let i = 0; i < 10; i++) {
            noteBook[`${SalesCenter}-${i.toString()}`] = 20; //판매처별 재고수량
        }

        console.log("노트북정보:", noteBook);


웹브라우저 개발자 도구>콘솔탭을 통해 console.log()값들이 정상적으로 출력되는지 확인해봅니다.