JavaScript _개념정리/ 객체

객체

---

# 객체 기초

1. 배열과 객체 구조에 대한 이해

객체는 배열과 다르게 하나의 단위로 구성한 복합적인 자료구조이며 원시 타입의 값입니다. 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값이고  객체는 변경 가능한 값입니다. 또한 자바스크립트는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체입니다. 객체는 key와 value로 구성된 프로퍼티들의 집합이며 모든 값들을 사용 할 수 있습니다.

 

//객체의 구조
 
var troll = {      // 객체는 중괄호{}안에 프로퍼티가 있다.
 name : 'teemo' ,  // name, age ->> 프로퍼티 키 
 age : 12          // 'teemo', 12 ->> 프로퍼티 값 
};
 
// 객체는 0개 이상의 프로퍼티로 구성된 집합이다. 
// 프로퍼티 : 객체의 상태를 나타내는 값(date)   

 

객체의 구조를 살펴보면 객체를 사용하려면 중괄호 {}가 필요하며 객체 안에는 프로퍼티 키와 프로퍼티 값을 가진 프로퍼티로 구성된 집합체 입니다. 추가적으로 키와 값사이에는 클론 (:) 으로 구분하며 프로퍼티를 나열할때 쉽표(,)로 구분합니다.

 

---

2. 배열과 객체의 특징 구분하기

//배열
 
let person = [
 'teemo',
 'Lee' ,
 'men' 
];
 
// 각 값이 어떤 내용으로 묶여있지만, 이값들이 무엇을 의미하는지 모릅니다.
 
//객체
 
let person = {
name : 'teemo',
firstName : 'Lee' ,
sex : 'men' 
};    
 
// 객체를 사용함으로서 프로퍼티값으로 인해 person에 대한 정보를 쉽게 알수 있습니다.   

---

3. Dot notation과 Bracket notation 의 이해 및 활용하기

결과론적으로 둘다 똑같은 의미에 쓰일수 있으며 상황에 따라 다양하게 사용됩니다. 

 

// ex) 띠모스킬 데이터
 
let TeemoSkill = {
 Q_skill : '맞으면 안아파요',
 W_skill : '나잡아봐랑 이속증가',
 E_skill : '따끔한 독댐증가',
 R_skill : '띠모의 궁극기는 버섯똥입니다'
}
 
Q1. 띠모스킬에서 궁극기를 알고 싶어요 
//Dot notation 과 Bracket notation 을 활용해서 알아봅시다
 
TeemoSkill.R_skill      // '띠모의 궁극기는 버섯똥입니다'
TeemoSkill['R_skill']   // '띠모의 궁극기는 버섯똥입니다'  

---

4. 객체의 속성 추가, 조회, 변경, 삭제를 자유롭게 하는법

// 위에 있던 예제를 활용
// 객체 추가
Q1 티모스킬을 추가해보자
 
let TeemoSkill = {
 Q_skill : '맞으면 안아파요',
 W_skill : '나잡아봐랑 이속증가',
 E_skill : '따끔한 독댐증가'
}
 
TeemoSkill.R_skill = '띠모의 궁극기는 버섯똥입니다'   
console.log(TeemoSkill) // 콘솔창에서 확인해보기! 
 
 
// 객체 조회
Q2 띠모스킬이 무엇이 있는지 Dot / Bracket notation 활용해서 조회 해보자
 
//Dot notation은 말그대로 점 (.)을 사용해서 객체의 프로퍼티 값을 확인 할 수 있습니다.
TeemoSkill.Q_skill    // '맞으면 아파요'
 
// Bracket notation은 대괄호[]를 사용해서 객체의 프로퍼티 값을 확인 할 수 있습니다.
TeemoSkill['Q_skill']  // '맞으면 아파요'
// 이때 주의하자 대괄호를 사용해서 프로퍼티 값을 찾으려면 큰따음표나 작은따옴표를 붙여서 사용
// 그렇지 않으면 Q_skill 는 변수로 취급하기 때문에 꼭 문자열 형식으로 전달하기
 
TeemoSkill.Q_skill    // '맞으면 아파요'
TeemoSkill.W_skill    // "나잡아봐랑 이속증가"
TeemoSkill['E_skill']    // "따끔한 독댐증가"
TeemoSkill['R_skill']    // "띠모의 궁극기는 버섯똥입니다"
 
// 객체 변경
Q3 띠모스킬중 Q스킬의 내용을 변경해보자
 
//ex) Q_skill : '맞으면 안아파요' 내용을 -> '사실 아파요' 라고 변경을해보자
  
TeemoSkill.Q_skill = '사실아파요'
TeemoSkill[Q_skill] = '사실아파요'
 
// 둘다 똑같은 의미입니다. 콘솔창에 TeemoSkill을 조회하면 Q스킬이 변경 된 것을 확인 할 수 있습니다.
 
// 객체 삭제 
Q4 띠모의 궁극기를 삭제해보자
 
//객체안에 있는 프로퍼티를 삭제할때 delete 연산자를 사용합니다.
//이연산자는 프로퍼티 값에 접근 할 수 있는 표현식이어야 합니다.
 
delete TeemoSkill.R_skill // 콘솔창에 확인하면 R_skill이 삭제 된 것을 확인 할 수 있습니다.

---

5. 배열 객체의 반복문 활용하기 (for...of)

배열안에 있는 객체를 반복문으로도 표현 할 수 있습니다. 쉬운 방법으로는 filter, map, reduce 등 고차함수를 활용하는 방법이 있지만 기본적인 방법으로 표현하겟습니다.

 

// for of 활용하기
const teemoFriends = [
{name : 'teemo', age : 12, isfemale : false, kind : 'troll'},
{name : 'koko', age : 7, isfemale : true, kind : 'babo'},
{name : 'code', age : 999, isfemale : false, kind : 'troll'},
{name : 'baba', age : 18, isfemale : true, kind : 'troll'},
{name : 'jangh', age : 28, isfemale : false, kind : 'carry'} 
];
 
// 배열안에 티모친구들의 데이터 정보가 있습니다.
 
for(let teemoFriendDate of teemoFriends){   
// for ....of문을 사용해서 teemoFriends의 배열안에 있는 데이터를 반복해서 
// 선언한 teemoFriendDate 변수에 넣어 줍니다.
 
console.log(teemoFriendDate);
};
 
// 출력 결과
// {name : 'teemo', age : 12, isfemale : false, kind : 'troll'},
// {name : 'koko', age : 7, isfemale : true, kind : 'babo'},
// {name : 'code', age : 999, isfemale : false, kind : 'troll'},
// {name : 'baba', age : 18, isfemale : true, kind : 'troll'},
// {name : 'jangh', age : 28, isfemale : false, kind : 'carry'}
 
추가적으로 티모 친구들의 나이만 알고 싶으면 for문 스코프 안에
 
console.log(teemoFriendDate.age) 넣어주면 됩니다. // 콘솔창에서 확인 해보기

 

참고자료 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

for...of - JavaScript | MDN

 

 

번외_Typeof  && Object.prototype.toString()

---

typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.

 

▶  typeof는 데이터의 종류를 알수 있지만 null이나 객체나 배열데이터로 인해 정확하게 구분하기 힘들다

 

console.log(typeof 'Hello world!')   // string
console.log(typeof 123)               // number
console.log(typeof true)              // boolean
console.log(typeof undefined)      // undefined
console.log(typeof null)              // object
console.log(typeof {})                 // object
console.log(typeof [])                 // object

// 위와같이 typeof연산자는 데이터의 종류를 파악할수 있으나 데이터를 정확하게 구분하기 힘듭니다.

 

 

▶  그렇다면 typeof를 대신해서 정확하게 데이터를 구분할 수 있는 함수를 만들어 보자!

 

function dataType(data){
return Object.prototype.toString.call(data).slice(8,-1) 
}
console.log(dataType(684))    // Number 

// dataType() 함수에 다양한 데이터를 넣고 확인해보면 어떤 데이터 종류인지 쉽게 파악 할 수 있습니다.

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof

typeof - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Object.prototype.toString() - JavaScript | MDN