Object | 객체

이선호·2021년 8월 10일

Javascript

목록 보기

8/8

객체 (Object)

객체란? 변수와 함수를 한곳에 저장할 수 있도록 해주는 데이터 타입의 공간이다. 객체 자체는 Property와 Method갖는 역할을 한다.

var user = {};
var user = new Object();

이때 선언된 변수를 Property 함수는 Method

let myself = {
  age: 28,     //Property
  getAge:function(){ return this.age; } // Method
};

객체의 Key는 변수와 같은 역할, value 변수 내용과도 같다.

Property key 특징

일반 변수와 달리 객체의 키(key)에는 특수문자,한글,빈공간등이 들어갈 수 있다.

let keyValue = {
  망고 : '한글도가능',
  myName : 'mango',
  'my name' : '따움표로 띄어쓰기 가능',
  11111 : '숫자도 가능'
  $space : '',
  age : '9999살',
  getAge:function(){ return this.age; }
}

프로퍼티에 접근하는 방법

dot(.) Nptation

console.log(keyValue.myName)

bracket[] Nptation

console.log(keyValue['myName'])

숫자로 되어있는 key값은 대괄호연산자로 접근해야한다.

const Bracket = {
	dot : '이런거 말고'
 	111 : '이런거 (.)연산자로는 안됨'
}
Bracket.dot // 둘 다 가능
Bracket['111'] // []로 접근하기

1. 프로퍼티 할당

const myself = {
	name : 'Sunho Lee',
  	age : 18
}
myself['age'] = 28
let myName = myself['name'];
let myAge = myself.age; 

console.log(myName) // Sunho Lee
console.log(myAge) // 28

객체에 이미 선언된 키를 다시 할당하면 재할당된다.

2. 프로퍼티 추가

const myself = {
	name : 'Sunho Lee',
  	age : 28
}
myself.address = "서울시 동작구",  // (.)로 접근
myself['address'] = "서울시 동작구" // []로 접근 

console.log(myself) 
/* [object Object] {
  address: "서울시 동작구",
  age: 28,
  name: "Sunho Lee"  } */

3. 프로퍼티 수정

const myself = {
	name : 'Sunho Lee',
  	age : 28 ,
   	address : '서울시 동작구',
	mbti:' ??안해봄 '
}
 myself.mbti = 'ENFJ' // (.)로 접근
 myself['mbti'] = 'ENFJ' // []로 접근
 
console.log(myself.mbti); // ENFJ

4. 프로퍼티 삭제

delete를 이용해서 삭제하기

const myself = {
	name : 'Sunho Lee',
  	age : 28 ,
   	address : '서울시 동작구',
	mbti:'ENFJ',
}
delete myself.address; 

console.log(myself.address); // undefined (존재하지않음)

배열의 타입이 객체인 이유

(출처 : https://workatit.tistory.com/88)

배열은 Object의 하위개념이다.
그래서 자바스크립트는 배열의 요소하나하나는
객체로 취급하기 때문에배열의 data type은 Object이다.

✨참조타입(Object/Reference Type)과 원시타입(Primitive type)

자바스크립트의 데이터 타입은 기본형 타입(primitive type)과 참조형 타입(Reference Type) 으로 나뉘어진다.
참조형 데이터 타입에는 객체가 있고 이 객체의 하위 부류로 배열과 함수 등이 포함되어 있다.
참조형 타입을 객체타입이라고 부르기도 하고, 원시타입을 기본형이라고 부르기도 한다.

객체는 자신의 프로토타입이 가지는 모든 프로퍼티 및 메서드들을 상속받아 사용하므로 배열의 Array.prototype에 포함된 배열 표준 메서드와 Object.prototype의 표준 메서드들을 모두 사용할 수 있다.

👀 프로토타입(Prototype)에 관한 내용은 따로 정리!!

//fruitArray 배열
var fruitArray = ['apple','orange','banana'];
console.log(fruitArray[0]);  //  apple
console.log(fruitArray[1]);  //  orange
console.log(fruitArray[2]);  //  banana

//fruitObj 객체
var fruitObj = {
     '0' : 'apple',
     '1' : 'orange',
     '2' : 'banana'
};

console.log(typeof fruitArray);  //(출력값) object 
console.log(typeof fruitObj);    //(출력값) object

👉 typeof 연산결과는 배열과 객체가 모두 object로 표기함

자바스크립트도 배열을 객체로 생각하는 것
그렇다고 객체랑 배열은 같지 않다.
자바스크립트 엔진은 객체와 배열을 다르게 처리한다.
자바스크립트 엔진은 배열을 객체보다 더 빠르게 동작하도록 내부에서 최적화한다.

fruitArray.push('melon');  
//['apple','orange','banana','melon']
fruitObj.push('melon');    
//Uncaught TypeError: Object #<Object> has no method 'push'

fruitObj는 객체이므로 배열이 아니므로 push()메서드와 같은 표준 배열 메서드를 사용할 수 없다.

👉 배열과 객체가 자신의 부모인 프로토타입 객체가 서로 다르기때문이다.

console.log(fruitArray.length);  //(출력값)  3
console.log(fruitObj.length);    //(출력값)  undefined

배열 fruitArray와 객체 fruitObj는 근본적 차이가 있음
fruitObj는 객체이므로 length 프로퍼티가 존재하지 X

👉 fruitArray.length는 3이 출력되지만 fruitObj.length 결과가 undefined인 이유

객체 저장

const obj01 = {        
  name: 'Hellow'     
} 
const obj02 = {  
  name: 'Hellow'
}
console.log(obj01 === obj02) //false
console.log(obj01.name === obj02.name) //true

객체는 변수에 저장될때 객체 자체를 그대로 저장하지 않고 객체가 담긴 메모리의 reference를 저장하기 때문이다.

[object Object]

객체를 콘솔창에 찍을때 [object Object]이렇게 출력되던데
대체 이게 먼지 궁금해서 찾아봤다.

모든 object 는 toString() 이라는 메소드를 가지고 있는데
이 메소드는 object 가 텍스트 값으로 표현될 때나 문자열 값으로 예상되는 방식으로 object 가 참조할 때 사용됩니다.

Object.prototype.toString 은 인자로 넘겨준 object 의 클래스 이름을 반환해주는 메소드다.
toString 을 통해서 얻을 수 있는 값은 다양하게 있는데, 기본적으로 ECAMScript Edition 에 기재된 스펙을 기준으로 삼는다.
(이 메소드는 object 의 클래스 타입이 무엇인지 확인할 때 유용하다.)
💡 출처 : 오늘의-프로그래밍 < 자세한 내용은 여기에서 >