02-2. Object 개념 정리

개념 정리를 다시

01. 다시 나타난 오브젝트

• 객체는 다른 데이터 타입(텍스트, 숫자, 배열 등..)처럼 변수에 저장이 가능하다.

• {} 만 사용하면 된다.

• hi 라는 변수에 빈 객체를 할당 하는 코드를 만들어 보자

    let hi = {};

• 배열처럼 순서가 있는 데이터의 모음이 아닌 순서가 없는 데이터의 모음입니다.

• 객체는 키(key)-값(value) 쌍으로 된 데이터의 모음으로써 순서가 뒤 바껴도 아무 상관이 없습니다.

• key 는 "property name" 이라고도 하며, value 는 "property value" 라고도 말합니다.

• 키는 마치 특정 값을 갖고 있는 "변수 같은" 역할을 합니다.

• 키의 값에는 텍스트,숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.

    let person = {
    	'my name' : 'boong',
    	color : 'silver',
    	키 : '한글인 키는 따옴표가 없어도 되는군!!!',
    	'!키' : '느낌표 키는 따옴표가 필요하군',
    	$special : '$는 따옴표 없이도 되는군'
    };

02. 프로퍼티 접근

• 접근은 dot(.) 과 [] 대괄호로 접근하는 법이 있었습니다.

    let person = {
    	33 : '숫자 형식도 되네',
    	'my name' : '스페이스 포함 가능',
    	color : 'silver',
    	'!key' : '느낌표 키는 따옴표가 필요!',
    	$key : '느낌표 없어도 가능!'
    };

03. 변수로 프로퍼티 접근하기

let person = {
	name : 'john'
}

let age = 'name';
console.log(person[age]);

• 변수에 키 이름이 저장되어 있으면, 변수로도 프로퍼티에 접근이 가능합니다.

• 이때, dot(.) 다음에 변수명을 넣어서 프로퍼티에 접근 가능 할까요?

    console.log(person.age);
    // undefined 가 뜬다.

  • dot 으로 접근한다는 뜻은 "실제 키 이름을 쓸 때 입니다."
  • 'age'이라는 키가 있었으면 그에 해당하는 프로퍼티에 접근할 수 있었겠지만 존재하지 않기 때문에 undefined가 나온 것 입니다.
  • 변수로 접근할 때는 "항상 대괄호로 접근해야 합니다."

04. 프로퍼티 할당

person[name] = '값 바꾼다';
console.log(person['name']) //'값 바꾼다.'

person.color = '색깔';
console.log(person.color) //'색깔'

console.log('생성전 : ' + person.new); //undefined
difiicult.new = '새로 추가된 프로퍼티'; // 프로퍼티 밸류 지정
console.log('생성후: ' + person.new); // '새로 추가된 프로퍼티';

//결과
person = {
	name : '값 바꾼다',
	color : '색깔',
	new : '새로 추가된 프로퍼티'
}

• 객체에 이미 키가 존재하는데, 다시 한번 할당하면 값이 교체(수정) 됩니다.
• 이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 됩니다.

05. 객체의 특이점

• 객체를 const로 선언했을 때 알쏭달쏭한 현상이 일어납니다.

    const a = 1;
    a = 2; // 에러!
    
    const able = {
    	name : '객체'
    };
    able = {
    	name : '수정'
    }//오류! 변수 자체에 재할당은 불가능! 

  • const 로 선언된 변수는 값을 절대 수정할 수 없었습니다.

  • 그런데 const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다.

  • 변수 able 자체에 객체를 재 할당하는 것은 불가능 합니다.

    // 에러가 나지 않는다!
    able.name = '수정';
    able.type = 'obj 타입';

  • 프로퍼티에 접근해서 내용을 수정,추가는 에러가 나지 않는다!

06. 메서드(Method)

• 객체에 저장된 값이 함수일 때, 메서드라고 부릅니다.

  console.log();

console 도 형태를 보니 객체인가 봅니다.
자바스크립트 어디에서나 접근이 가능했으니 global 객체입니다.
console 다음에 dot(.)으로 프로퍼티를 접근했고, log라는 키의 값은 함수인 것 같습니다.
log는 console 이라는 객체의 메서드입니다.

• 객체에 메서드를 정의하려면 아래와 같이 할 수 있습니다.

  let method = {
  do : function() {
  console.log('메서드 정의는 이렇게');
  }
  }
  method.do();

07. 중첩된 객체

• 실무에서 사용되는 객체는 거의 중첩되어 있습니다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있습니다.

    let Obj = {
    	type : {
          year : '2019', 
          'comment-type' : [{name:'simple'}]
        }
    };
    //'simple'을 출력하려면?
    console.log(Obj.type['comment-type'][0].name);

  • "컴퓨터는 왼쪽에서 오른쪽으로 해석한 다는 것을 명심하자!"
    • obj.type 은 year,'comment-type' 이 있는 "객체"입니다.
    • obj.type['comment-type']은 요소 1개가 있는 "배열입니다"
    • obj.type['comment-type'][0] 은 첫번째 요소인 "객체"를 가져옵니다.
    • obj.type['comment-type'][0].name ⇒ 드디어 'simple'에 접근!

08. 객체는 참조로 저장된다.

• 객체를 변수에 저장하면 객체 리터럴 자체가 저장 되는 것이 아니라 reference 가 저장됩니다.

• 텍스트는 변수에 저장하면 텍스트 자체가 저장됩니다. 그래서 같은 텍스트면 서로 값이 같으므로 true 입니다.

  const a = '안녕';
  const b = '안녕';
  console.log(a === b); //true!

  const hiObj = {
  name : '안녕'
  };
  const helloObj = {
  name : '안녕'
  }
  console.log(hiObj === helloObj); //false!

• false라고 나오는 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장 하는 것이 아니기 때문입니다.

• hiObj가 갖고 있는 진짜 값은 메모리 주소인 reference 입니다. 하지만 hiObj를 불러올 때 메모리 주소를 반환하는 것이 아니라, 해당 메모리에 저장된 데이터를 반환해 줍니다.

• 그래서 눈에 보이는 데이터는 똑같지만 hiObj 와 helloObj가 갖고 있는 진짜 값은 다른 것입니다.

  //false 변수에 담긴 값이 객체이며 객체는 각기 다른 메모리 주소를 가지고 있기 때문에
  console.log('객체비교 =>', hiObj === helloObj);
  //true name에 값이 일반 값 이므로 true
  console.log('객체값 비교=>'hiObj.name === helloObj.name);

• 객체를 담은 변수를 비교하면 서로 같지 않다고 나옵니다.

• 그러나 객체의 내부 프로퍼티 값이 텍스트 일 경우에는 텍스트를 비교하게 되어 서로 같음/다름 여부를 판단할 수 있습니다.

• 다시 한 번 const로 선언된 객체를 볼까요?

    const able = {
    	name : '객체'
    }
    
    able = {
    	name : '수정'
    }//에러!
    
    able.name = '수정 됩니다.'; //(출력된다)

  • const로 선언된 변수는 절대 값이 바뀌면 안됩니다. 그래서 able에 새로운 객체를 할당하면 오류가 납니다. 왜냐면 새로운 메모리 주소(reference)로 수정을 시도하기 때문입니다.
  • 하지만 able.name 로 프로퍼티를 접근해서 수정할 수 있습니다. able이 저장된 메모리 주소가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이라 수정이 됩니다!