[JavaScript] 객체를 기억하자

객체

자료구조는 원시타입과 참조타입이 있는데 객체는 참조타입에 속한다.
원시타입은 : Boolean, Number, tring, Null, Undefined 과 같은 같은 데이터 만 담을수 있는것이고

참조타입은 key(키),value(값) 으로 구성된 property(프로퍼티) 들을 담아서 보관한다.
키는 문자형 , 값은 모든 자료형이 허용된다. (키에서 숫자나 특수문자쓸시 ''로 문자열로 만든다)
따라서 원시타입을 제외한 모든 타입은 (함수도) 객체안에 속한다.

왜쓰는가?

변수를 사용할때 변수의 갯수가 많다면 그만큼 관리하기도 힘들고 작명하기도 어렵다.
그래서 배열을 사용하지만, 배열은 같은 타입의 데이터만 허용하기에 또 한계점이 있다.

그럴때 객체를 사용한다. 다른 타입의 데이터를 관리하기 편하다. 객체는 '{}'(객체리터럴) 를 사용한다. key와 value 사이에는 콜론으로(:) 구분한다.

let user =  { name : 'Park' , age : 23 };

user 박스안에 name,age 가 들어있다고 생각하면된다.

객체와 배열 의 차이

배열과 객체의 가장 큰 차이점은 순서 정보의 유무입니다. 배열은 요소에 0부터 순차적으로 접근할 수 있지만 객체는 속성에 순서대로 접근하지 않고, key를 통해서 value에 접근합니다.
for ~ in문을 통해서 객체의 모든 key에 접근하고 출력할 수 있습니다.

객체 사용방법

1. Dot notation , 2. bracket notation

객체를 사용할때 두가지로 접근할수있고 예제를 통해 확실하게 차이점을 구분하자.
Dot notation

let user =  { name : 'Park' , age : 23 }; 
user.name; // 'Park'

bracket notation

let user =  { name : 'Park' , age : 23 };
user['age']; // 23   <-브라켓은 대괄호안에 반드시 '' 를 붙여 문자열로 만든다.

bracket notation

//참고
user.name === user['name']; // true
user.name === user[name]; // false
user.'name' === user['name']; // false
//Dot 은 변수 그대로 사용하고, Bracket은 ''를 붙여 문자열로 만든다.

dot과 bracket의 차이점

객체안의 변수가아닌 함수의 매개변수를 입력받을때
Bracket notation '{}'

let user = {name : 'Kim' , age : 25 , gender : 'male'}

function userInfo(obj,info){
 console.log(obj[info]); // 매개변수를 그대로 넣어서 브라켓 방식으로 사용했을경우
} userInfo(user,'gender'); // male 이 정상 출력된다.

Dot '.'

let user = {name : 'Kim' , age : 25 , gender : 'male'}

function userInfo(obj,info){
 console.log(obj.info.); // 매개변수를 그대로 넣어서 닷 방식으로 사용했을경우
} userInfo(user,'gender'); // undefiend 가 출력된다.

이부분이 둘의 차이점이고
정해진 값외 매개변수를 입력받는경우는 bracket을 사용한다.

추가 , 삭제 ,확인

dot과 bracket으로 추가도 가능하다.

let user =  { name : 'Park' , age : 23, };
user.Student = 'false' ; // { name : 'Park' , age : 23, Sutudent : false};

let user =  { name : 'Park' , age : 23, };
user['memo'] = 'helloWolrd!' ; 
// { name : 'Park' , age : 23, memo: 'helloWorld!'};

삭제

let user =  { name : 'Park' , age : 23, memo : 'helloWorld!',};
delete user['memo']; // { name : 'Park' , age : 23};

let info = { name: 'Macbook' , inch: 15, color: 'white',};

Object.keys(info); // ['name','inch','color']
Object.values(info); // ['Macbook', 15 , 'white']

in 연산자를 이용하여 키가 있는지 확인도 가능하다.

let user =  { name : 'Park' , age : 23, memo : 'helloWorld!',};
'name' in user; // true;
'gender' in user; // false;