Javascript의 객체에 대해 알아보자!!

안녕하세요 개발적금입니다.

오늘은 Javascript의 객체(Object)에대해 알아보겠습니다.

 

---

목차

1. 객체(Object)란?

 

2. 객체만드는 방법!

 

3. 객체 사용시 응용방법 등등..

 

4. 스프레드 연산자에 대해!

 

---

 

1. 객체(Object)란?

 

객체는 Javascript를 잘 다루기위해 꼭 알아야할 "데이터"입니다.

데이터타입은 크게 두가지로 나뉜다고 설명드렸었습니다.

1. 원시형

 - 문자열(String)

 - 숫자열(Number)

 - Boolean(True , False 값)

 - undefined

 - null

 ...등등..

 

2. 객체형

 - 배열(Array)

 - 객체(Object)

...등등..

 

여기서 보다싶이 객체(Object)는 "객체형 데이터" 입니다!

그렇다면 객체 도대체 어떻게 생겨먹은놈일까요?

 

2. 객체만드는 방법!

객체만드는방법 두가지를 소개해드리겠습니다.

 

2-1) new 키워드를 사용하여 객체만들기

const user = new Object();

console.log(user);

이렇게 출력하게되면 결과값이 {} 가 나올것입니다.

객체를 생성하여 그 객체를 출력하였고, 저희는 객체안에

아무런 값을 넣지 않았기때문에 {} 출력이 됩니다.

 

2-2) 리터럴( {} ) 을 사용하여 객체 만들기

const user = {};

console.log(user);

 

이렇게 출력하게 되면 위와 똑같이 {} 이 출력이됩니다!

 

대체로 객체를 만들때는 리터럴문법을 많이 쓰므로 저도 계속

리터럴문법을 쓰겠습니다~!

 

자 그럼 객체는 도대체 언제 쓰일까요?

 

변수하나에 여러가지 데이터를 담고싶을때 쓰는것이 배열(Array)였죠?

변수하나에 여러가지 데이터를 담고싶을때 쓰는것이 객체(Object)입니다.

 

아니 그럼왜써?? 당연히! 둘의 성향 , 목표가 다르니쓰겠죠?

 

예를들어 반 전체의 학생 "리스트"를 만들건데

이름만 쓸거면.. "리스트"를 만들거면 배열(Array)를 사용하고!

 

한 학생의 상세정보를 담으려면 객체(Object)을 사용합니다!

 

정리하자면 학생 리스트를 배열에 담는다고하면

총 학생숫자(arr.length) , 추가되는 학생 을 넣기가 용이합니다

 

근데 그 학생이 어디사는지 키는몇인지 몸무게는 몇인지 담기에는 힘들죠?

그때쓰는게 객체(Object)입니다!

즉 객체는 사람,사물,주문 등등 실제 존재하는 개체를 표현할때 적합합니다!

 

const Person = {

 name : "개발적금", // ,(콤마)를 꼭 써줘야 합니다

 age : 32

}

위의 코드를보면 변수

"Person" 안에서 *name* 속성에는 "개발적금"  , *age* 속성에는 32 값을 입력했습니다.

 

객체 안에서는 '데이터타입'이 어떤것이든 올수있습니다. String,Number,Boolean,Function,Array,Object ..등등

 

이렇게되면 객체또한 하나의 변수안에 여러가지 값이 있다보니, 그값을 빼올수 있어야 합니다.

"점 표기법" 으로 빼오겠습니다. 

console.log(Person.name);

을 하게되면 Person이라는 "객체"안에 name이라는 속성을 가진 값을 나오게 하는것입니다.

이게 "점" 표기법입니다.

엇!!! 그렇다면 저희가 항상 사용했었던 console도 객체일까요? 넹 객체입니다

 

3. 객체 사용시 응용방법!

 

먼저 for in문이 있습니다.  예를들어

 

const Person = {

 name = "개발적금",

 age = 32,

 area ="인천"

}

 

for(let key in Person){

 console.log(key);

}

코드해석을 해보자면 , Person이라는 객체에 속성 name,age,area에 각각 속성값 "개발적금",32,"인천"을 할당하였습니다.

그리고 for(let key in Person){} 을 통해서 Person이라는 객체 "안"에 key값들을 for문을 이용해 모두 출력하는것입니다.

출력하는부분은 console.log(key); 쪽이 되겠죠?

 

for(let key in Person){

 console.log(key);

 console.log(Person[key]);

}

이렇게 표현하게 된다면 처음

console.log에 key값 name 이 출력되고 , console.log(Person[key]) 값이 console.log(Person[name]) 이 출력됩니다

마지막 area까지 다 찾게되면 객체 안에있는 속성과,속성값이 모두 출력됩니다!

 

객체 안에 속성과 , 속성값 또한 추가할수있습니다!

 

const Person = {

 name = "개발적금",

 age = 32,

 area ="인천"

}

 

Person.height = 190; // 추가시키는 부분

 

for(let key in Person){

 console.log(key);

 console.log(Person[key]);

}

코드를 출력하게 되면 객체는 name,age,area에 각각 속성값만 있지만 , height 속성을 추가했고 그에 속성값 190까지 추가 해줬으니

height : 190 까지 출력이됩니다!

 

---

그런데.. 분명 저희는 const는 재할당,재선언이 안된다고 배웠습니다..

그런데 const Person ={} 에 어떻게 값을 추가할수있을까요?

 

객체는 참조형 데이터 이기 때문입니다.

 

이게 무슨소리냐.. 지금부터 어려우니 잘보시기 바랍니다.

변수,객체등은 선언이 되면 각각 '메모리 주소'를 갖게 됩니다.

 

const obj = {

 name : "개발적금",

 age : 32

}

로 객체를 생성하시게 되면!

변수명	obj(객체)
데이터주소	001	002
값	{} (002)	name = "개발적금" age = 32

 

편의상 데이터 주소를 001부터 시작하겠습니다. 객체가 생성되면 데이터주소를 받게되고,

그 데이터주소에 객체{} 값을 할당합니다. 근데!! 객체는 참조형 데이터입니다.

사실 obj안에있는 name , age 값들은 001에서 있는게 아니라 새로운 데이터 주소를 만들어

참조하는 형식입니다!

위와같이 표현이 되겠습니다

그렇다면?

 

const obj = {

 name : "개발적금",

 age : 32

}

 

const clone = obj;

console.log(clone === obj); // true

 

clone은 obj라는 객체를 할당을 받았습니다.

할당을 받았다는것은 clone은 객체를 할당받은게 아니라, 객체의 참조 주소(002)를 할당받았기때문에

clone === obj 라는 값이 true가 나오게 되었습니다.

 

그렇다면?!

 

const obj = {

 name : "개발적금",

 age : 32

}

 

const clone = {} //새로운 메모리주소를 할당!

 

for(let key in obj) {

 clone[key] = obj[key]

} // 모든 obj 속성과 속성값을 clone의 객체에 할당함

 

console.log(clone === obj) // false가 나옵니다.

변수명	obj(객체)		clone(새로운객체)
데이터주소	001	002	003	004
값	{}(002)	name = "개발적금" age = 32	{}(004)	name="개발적금" age = 32

 

이렇게 새로운 clone이라는 객체를 만들어 새로운 데이터주소를 할당해주고

obj의 속성 속성값을 clone객체에 넣어주게되면 표에서 보다싶이 값이 똑같지가 않으므로(참조형데이터)

false가 나오게됩니다.

 

근데 이 일련의 과정들이 너무 힘들어... 그래서 나온것이

 

4. 스프레드 연산자!

 

스프레드 연산자는 정말 편리합니다..

 

const obj = {

 name : "개발적금",

 age : 32

}

 

const clone = {...obj};

 

obj라는 객체를 선언하였고 속성 속성값들이 존재합니다.

clone이라는 객체를 생성하여 새로운 메모리주소를 만들고,

"..."을 이용해 obj객체 안의 내용을 가져오겠다 라고 말하는것입니다.

 

스프레드 연산자 이전까지의 내용들을 이해하셨다면

스프레드 연산자가 얼마나 편한지 알것입니다!

 

여기서 조금더 나아가 보자면!

만약 참조형데이터(객체) 안에 참조형데이터가 있다면?

const obj = {

 name : "개발적금",

 age : 32

 size : {

  height : 190,

  weight : 90

  } // 객체안에 또다른 참조형 데이터를 만든게 포인트

}

 

const clone = {...obj , size : {...obj.size} };

로 표현해주셔야합니다.

 

만약 const clone = {...obj} 로만 표현을 하게된다면?

clone은 obj객체 안에있는 또다른객체(size)라는 데이터주소를 똑같이 가져올것입니다.

그렇게 된다면 제가 clone객체의 사이즈 height을 바꾸는경우에

obj의 사이즈 height도 바뀌게됩니다.

왜냐? 똑같은 주소를 보고있기 떄문이죠!

 

그래서 우리는 객체 안에 또다른 객체(참조형데이터)가 있으면

 

const clone = {...obj , size : {...obj.size} } // 사이즈라는 또다른 객체를 만들어(데이터주소를 따로쓰기위함)

중복되는 주소값을 갖게하면 안됩니다.

 

---

 

오늘 마치며.. 정말 힘든 하루였습니다 지금 몇개안올렸지만 지금까지 올린

포스팅중에 제일 긴 포스팅이 아닐까 생각이듭니다.

그만큼 저도 공부를 많이해야겠다고 느꼈습니다..

감사합니다