LHJ

I'm a FE developer.

17-2. Object 오브젝트(ES5 기준) / Object에 프로퍼티 추가

06 Dec 2020 » js_beginner

17-2. Object 오브젝트(ES5 기준) / Object에 프로퍼티 추가

defineProperty()

구분데이터(값)
objectObject 오브젝트
파라미터첫번째 파라미터: 대상 오브젝트
두번째 파라미터: 프로퍼티 이름
세번째 파라미터: 속성
반환대상 오브젝트

  • 대상 오브젝트에 프로퍼티 추가 또는 프로퍼티 속성 변경
  • 프로퍼티마다 상태를 갖고 있음

    • 상태란? 변경 / 삭제 / 열거 가능 여부
    • 상태가 가능일 때만 처리할 수 있음
    • 프로퍼티를 추가할 때 상태 결정

        var obj = {};
        Object.defineProperty(obj, "book", {
            value: "JS책",
            enumerable: true
        })
        console.log(obj); // {book: "JS책"}
      
      1. 첫번째 파라미터에 프로퍼티를 추가할 오브젝트(obj) 작성
      2. 두번째 파라미터에 프로퍼티 이름(book) 작성
      3. 세번째 파라미터 {value: “JS책”}에서

        • value는 프로퍼티 값을 나타내는 속성
        • “JS책”은 value의 속성 값으로
        • 위에처럼 프로퍼티 값이 됩니다.

{}은 ES1.0에서 나왔습니다.
처음에 자바스크립트가 만들어 졌을 때부터 나왔던 것입니다.
{}의 변경/삭제/열거의 디폴트 값은 true입니다.

그런데 defineProperty는 ES5에서 나왔습니다.
여기선 변경/삭제/열거의 디폴트 값이 false입니다.

즉, {} 이걸로 만든 것과 defineProperty 이걸로 만든 것은 서로 반대입니다.
그래서 defineProperty으로 만들었을 때 변경/삭제/열거를 true로 만드려면 반드시 정의를 해줘야됩니다.
디폴트가 false입니다.

이것을 어디다 사용할까요?

자바스크립트 소스는 소스가 오픈되지 않습니까?
오픈소스를 만들어 다른 사람들이 메소드를 활용해 오픈소스를 활용할 수 있게 합니다.
그런데 오픈소스이다보니까 데이터를 읽어하거나하는 경우가 생길 수도 있다.

ES5 이전까지만해도 이러한 속성들이 없었다.
하지만 ES5의 등장으로 데이터를 보호할 수 있게 되었다.
사실 데이터 보호가 주된 목적이다.

defineProperties()

구분데이터(값)
objectObject 오브젝트
파라미터첫번째 파라미터: 대상 오브젝트
두번째 파라미터: 프로퍼티 이름과 속성
반환대상 오브젝트

  • 다수의 프로퍼티를 추가하거나 속성 변경

    • 함수 기능은 defineProperty()와 같음

        var obj = {};
        Object.defineProperties(obj, {
            soccer: {
                value: "축구",
                enumerable: true
            },
            basketball: {
                value: "농구",
                enumerable: true
            }
        });
        for (var name in obj) {
            console.log(name + ":" + obj[name]);
        }
        // soccer:축구
        // basketball:농구
      

      enumerable이 둘 다 true로 설정했으므로 for in문으로 열거가 됩니다.
      만약 true로 설정 안했다면 열거가 안됩니다.