3. 객체

주요 개념 및 내용

말그대로 객체 관련 객체 하위 -> 배열, 함수, Rex

주의 사항 (예외사항)

  • 배열

    배열의 경우 인덱스 -> ["1"]처럼 숫자 인경우 인덱스로 인식됨

  • ES6 부터 Symbol ..? 여튼 그걸로 프로퍼티 계산가능 [foo변수+"0"] 이런식으로 호출가능

  • 프로퍼티 서술자, 접근 서술자?

  • 그외 Get, Set 관련내용, 불변성 만드는방법 (확장금지,봉인,동결)

  • 여러가지 Object 메서드들 아래 테스트 코드

테스트 코드

(function () {

  ///////////////////// 객체 ////////////////////

  // 리터럴 방식
  var myObj = {
    key: "value"
  };

  // 생성자 -> 단점 프로퍼티로 key-value를 설정해야하는 번거로움...
  var myObj2 = new Object();
  myObj2.key = "value";

  // 내장객체 - >함수 (네이티브)
  var strPrimitive = "나는 문자열쓰~";
  console.log(typeof strPrimitive); // "string"
  console.log(strPrimitive instanceof String);    // false  -> strPrimitive 는 원시값이다
  console.log(strPrimitive instanceof Object);    // false  -> strPrimitive 는 원시값이다
  console.log(strPrimitive instanceof Function);  // false  -> strPrimitive 는 원시값이다

  var strObject = new String("문자열 객체~");
  console.log(typeof strObject);            // object
  console.log(strObject instanceof String); // true -> strObject는 new에 의해 래핑된 객체타입 이자 String 네이티브 내장함수 타입

  console.log(Object.prototype.toString.call(strObject)); // [object String]  -> 생성자에 의해 만들어진 스트링객체


  console.log(42.359.toFixed(2));


  // Date -> 리터럴이 없어서 반드시 생성자로

  var date = new Date();
  console.log(date);


  // 프로퍼티 접근, 키 접근
  var obj = {
    a: 2,
    b: 3,
    c: 4
  };

  console.log(obj.a);    // 프로퍼티 접근
  console.log(obj["a"]); // 키접근

  // obj.ab!! (문법에러)
  obj["ab!!"] = "abc!";     // 가능
  console.log(obj["ab!!"]); // abc!

  // 키값 계산 가능
  var temp = "root";
  obj[temp + 1] = "root11";
  console.log(obj[temp + 1]); // root11


  // 프로퍼티 vs 메서드
  function foo4() {
    console.log("foo");
  }

  // 객체 내부 함수는 메서드? -> 함수레퍼런스를 가지고 사용 가능 귀속되지 않게 할수 있다정도로 생각할 수 있겠다
  var someFoo = foo4; // foo4에 대한 변수 레퍼런스
  var myObj4 = {
    someFoo: foo4
  }

  foo4;
  someFoo;
  myObj4.someFoo;


  var myObj5 = {
    foo: function () {
      console.log("foo");
    }
  };

  var someFoo = myObj5.foo;
  console.log(someFoo);
  console.log(myObj5.foo);


  /////////////////// 배열 //////////////////
  var array = [1, "ㅎ", "42", 2];
  array["5"] = "ㅠㅠㅠ";        // 숫자키 -> 배열에서 인덱스로..
  console.log(array.length);  // 6
  console.log(array[4]);      // undefined
  console.log(array[5]);      // ㅠㅠㅠ

  // 객체(참조)복사 -> 깊은, 얕은
  var anotherArray = [];
  var anohterObject = {a: 5};
  var anotherFunction = function () {
    console.log("55");
  };

  var myObject = {
    a: 2,
    b: anohterObject,
    c: anotherArray,  // 환형참조
    d: anotherFunction
  };
  anotherArray.push(anohterObject, myObject);
  console.log(anotherArray);

  // JSON -> 환형참조 에러
  // var json = JSON.parse(JSON.stringify(myObject));
  // console.log(json);

  // 얕은복사 -> ES6 (assign 함수)
  var copy = Object.assign({}, myObject);
  console.log(copy);


  // 프로퍼티 서술자 -> 읽기 전용 등 프로퍼티 특성 체킹
  console.log("============= 프로퍼티 서술자 =============")
  console.log(Object.getOwnPropertyDescriptor(myObject, "a"));
  console.log(Object.getOwnPropertyDescriptor(myObject, "b"));
  console.log(Object.getOwnPropertyDescriptor(myObject, "c"));
  console.log(Object.getOwnPropertyDescriptor(myObject, "d"));


  // 불변성 -> 객체상수, 확장금지, 봉인, 동결
  var obj = {a: 2};

  Object.preventExtensions(obj);    // 확장금지
  obj.a = 3;
  obj.b = 4;  // 확장안됨
  console.log(obj);

  Object.seal(obj);                 // 봉인 (묶기)
  Object.freeze(obj);               // 동결 (가장 높은 불변성)


  // Get 내부연산수행
  var obj = {a: 2};
  console.log(obj.a);
  console.log(obj.b); // Get 연산수행 -> undefined 반환


  // Getter / Setter
  var obj2 = {
    get a() {
      return this._a_;
    },
    set a(val) {
      this._a_ = val * 2;
    }
  }

  console.log(obj2.a);
  obj2.a = 2;
  console.log(obj2.a);


  // 프로퍼티 존재확인
  var myObject = {
    a: 2
  };

  console.log(("a" in myObject));
  console.log(("b" in myObject));

  console.log(myObject.hasOwnProperty("a"));
  console.log(myObject.hasOwnProperty("b"));

  // 열거 -> 프로퍼티 서술자 enumerable : true 필요 / false 인 경우 순회대상에서 제외 됨
  console.log(myObject.propertyIsEnumerable("a"));


  console.log("========= 순회 ==========");

  // 전통 순회 for
  var arr = [1, 2, 3];
  for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }

  // Java foreach 문과 같은 내용 -> 값순회
  for (var number of arr) {
    console.log(number);
  }

  // 키값 순회 or 배열인덱스
  for (var arrKey in arr) {
    console.log(arrKey);
  }

  var iterFunction = arr[Symbol.iterator]();  // iterater 함수
  console.log(iterFunction.next());
  console.log(iterFunction.next());
  console.log(iterFunction.next());
  console.log(iterFunction.next());
  console.log(iterFunction.next());


})();

Last updated