기억의 실마리
2023. 2. 2. 00:59

객체(Object)

  • 정의
    객체는 관련된 데이터와 함수의 집합이다. 여러 데이터와 함수로 이루어져 있으며
    객체 내부에 존재할때는 주로 "프로퍼티" 또는 "메소드"라 부른다.

  • 속성
    여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로
    Key / Value 를 Pair로 저장할 수 있는 구조이다.
    추가내용: Javascript는 객체기반의 스크립트 언어이다.

 

객체 만들기

객체를 만들때는 변수를 선언해주고 {} 를 할당해주면 된다.

let obj = {};

 

표기법

  1. 마침표 표기법 (dot notation)
    프로퍼티 접근 연산자   .   을 사용한다.

  2. 대괄호 표기법 (bracket notation)
    프로퍼티 접근연산자   [  ]   를 사용한다.
    프로퍼티를 반드시 문자열로 표기해야 동작한다.
let obj = {
  name: 'bob smith'
};

// dot notation
console.log(obj.name);  // bob smith

// bracket notation
console.log(obj['name']); // bob smith

// bracket notation은 프로퍼티를 반드시 문자열로 표기해주어야 한다.

 

 

  • 우선 여러 기능을 사용해보기 위해서 예시데이터를 넣어 줬다.
let obj = {
        name: [
            "bob", "smith",
            {bob: {smith: {bobSmith: "is name"}}},
        ],
        age: 32,
        gender: 'male',
        interests: ['music', 'skiing'],
        bio: function() {
            alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
        },
        greeting: function() {
            alert('Hi! I\'m ' + this.name[0] + '.');
        }
    };

 

1. obj객체에 프로퍼티 추가

/* 객체변수.새로만들어줄key = value; */
obj.tall = 179;


/* 함수형 프로퍼티 추가도 쉽게 가능하다 */
const sayY = obj.sayYeah = () => {     alert( 'Yeah~~~!!!' ) }; //새로운 객체멤버 생성

obj.sayYeah(); // Yeah~~~!!!

 

2. 객체 ↔ 스트링 변환

    const changeString = JSON.stringify(obj.name); // 객체를 스트링으로 변환.
    console.log("객체 => 스트링",changeString);
    // JSON.객체 => 스트링 ["bob","smith",{"bob":{"smith":{"bobSmith":"is name"}}}]

    const stringToJsonObject = JSON.parse(`{ "name": "John Doe", "age":30 }`); //스트링을 객체로 변환.
    console.log("스트링 => 객체",stringToJsonObject);
    // {name: 'John Doe', age: 30}
    //    age: 30
    //    name: "John Doe"
    // ▶ [[Prototype]] : Object

 

3. 객체 프로퍼티 삭제하기

예제 1

    console.log("name 삭제전, name:",obj.name);
    // name 삭제전, name:  ["bob", "smith", {...}]
    
    delete obj.name[0]; //프로퍼티 삭제
    
    console.log("name 삭제후, name:",obj.name);
    // name 삭제후, name:  ["비어있음", "smith", {...}]

예제2

    console.log("name 삭제전, name:",obj.name);
    /*
     name 삭제전, name:
     0: "bob"
     1: "smith"
     2:
       bob:
        smith: 
    */
    
    delete obj.name[2].bob.smith.bobSmith; //해당프로퍼티 삭제
    
    
    console.log("name 삭제후, name:",obj.name);
    /*
     name 삭제후, name:
     0: "bob"
     1: "smith"
     2:
       bob:
        smith: 
    */

 

실습 해보면서 특이한 점을 발견했다. 분명 삭제를 하기전과 삭제 후의 콘솔로그가 달라야할텐데...?

이상하게도 둘은 같은 로그를 나타내고 있었다. 이를 통해서 name 프로퍼티에 겹객체를 넣어 둔 것이

이러한 작동을 일으켰다는 것을 유추할 수 있었다.

 

  • 이를 통해 유추할 수 있는 내용...
    가장 먼저 선언된 일반적인 키를 삭제하는 경우엔 콘솔로그와 동기적으로 작동하지만
    객체 내부의 객체키(겹객체)를 삭제하는경우. 내부의 키가 모두 삭제된 이후에 콘솔로그가
    작동하는 것을 알 수 있었다. (콘솔로그와 비동기적으로 작동)
    이 현상에 대한 원인은 추 후 학습하게 된다면 따로 내용을 추가해야겠다.

혹시 이 게시글을 보고 계신분들중 원인을 알고 계신분은 댓글로 남겨주시면 감사드리겠습니다!

 

 

4. 구조분해할당을 통한 프로퍼티 분류

    const { name, ...others } = obj;
    
    console.log("name array :",name); // name array : (3) ['bob', 'smith', {…}]
    console.log("name :",name[0] + " " + name[1]); // name : bob smith
    
    console.log("others :",others);
    // others : {age: 32, gender: 'male', interests: Array(2), bio: ƒ, greeting: ƒ, …}

구조분해할당을 사용하여 name을 받고 spread연산자를 사용하여 name을 제외한

obj내의 모든 프로퍼티의 집합을 others라는 새로운 변수로서 할당시켜준 것이다.

 

5. 객체의 모든 key와 value

    const objKeys = Object.keys(obj);
    const objValues = Object.values(obj);
    
    console.log( objKeys );
    // (7) ['name', 'age', 'gender', 'interests', 'bio', 'greeting', 'sayYeah']
    
    console.log( objValues );
    /*
    (7) [Array(3), 32, 'male', Array(2), ƒ, ƒ, ƒ]
    0: (3) ['bob', 'smith', {…}]
    1: 32
    2: "male"
    3: (2) ['music', 'skiing']
    4: ƒ ()
    5: ƒ ()
    6: () => { alert( 'Yeah~~~!!!' ) }
    length: 7
    */

 

 

6. 프로퍼티의 존재여부 확인하기

    // includes를 통한 존재여부 확인
    const isExist_name = Object.keys(obj).includes('name');
    const isExist_hobby = Object.keys(obj).includes('hobby');

    console.log("------------------------------------");
    console.log("includes를 통한 존재여부 확인!");
    console.log("name의 존재여부 :",isExist_name,"\nhobby의 존재여부: ",isExist_hobby);
    console.log("------------------------------------");
    /*
    ------------------------------------
    includes를 통한 존재여부 확인!
    name의 존재여부 : true 
    hobby의 존재여부:  false
    ------------------------------------
    */
    
    
    // key in obj를 통한 존재여부 확인
    obj.hobby = undefined; //undefined값을 가진 프로퍼티 추가
    const isExist_name_in = 'name' in obj;
    const isExist_hobby_in = 'hobby' in obj;
    console.log("key in obj를 통한 존재여부 확인!");
    console.log("name의 존재여부 :",isExist_name_in,"\nhobby의 존재여부: ",isExist_hobby_in);
    console.log("------------------------------------");
    /*
    ------------------------------------
    key in obj를 통한 존재여부 확인!
    name의 존재여부 : true 
    hobby의 존재여부:  true
    ------------------------------------
    */
    //undefined 값을 가진다고 프로퍼티가 존재하지 않는 것이 아니다. 그러므로 true를 반환한다
    
    
    // 가장 정확한 존재여부 확인 방법은 hasOwnProperty함수를 사용하는 것이다.
    // 해당 객체의 직접적인 속성만을 검사하기 때문이다.
    const hasOwnName = obj.hasOwnProperty('name');
    const hasOwnHobby = obj.hasOwnProperty('hobby');
    console.log("hasOwnProperty를 통한 존재여부 확인!");
    console.log("name의 존재여부 :",hasOwnName,"\nhobby의 존재여부: ",hasOwnHobby);
    console.log("------------------------------------");
    /*
    ------------------------------------
    hasOwnProperty를 통한 존재여부 확인!
    name의 존재여부 : true 
    hobby의 존재여부:  true
    ------------------------------------
    */

위 내용에서 key in obj는 과거Object의 prototype 마저도 체크하기 때문에

프로퍼티의 존재여부를 크게 착각할 수도 있었다. 하지만 학습을 하는 과정에서는

적용 되지 않았고, Javascript Document에서 찾아보니 현재는 프로토타입체크를

지원하지 않게 되어 더 이상 상관없게 되었다.

 

마치며...

객체에 대해서 더 자세하게 학습을 진행하면서 웹개발이 주목적인 자바스크립트에선 학습우선순위 0순위이지 않을까? 라는 생각이 들었다. 그리고 데이터를 다루는 데에 있어 아주 유용한 기능들이 매우 편리하게 사용할 수 있도록 구현되어 있어 더욱 마음에 들었다. 다음포스팅은 객체와 마찬가지로 데이터다루기에 적합한 배열에 대해서 포스팅을 해봐야겠다.