[JavaScript] 객체 리터럴

객체는 여러개의 변수를 하나의 변수로 묶을 때 사용한다.
객체는 원시값(숫자, 불값)을 제외한 나머지값은 객체(object)이다.

---

const name = 'aaa';
const year = 2000;
const month = 9;
const date = 15;
const gender = 'F';

사람의 정보를 객체를 사용하면 아래처럼 묶을 수 있다.

const user = {
	name : 'aaa',
	year : 2000,
	month : 9,
	date : 15,
	gender : 'F',
};

📌객체 리터럴의 { } 는 블록 스코프를 의미하는 것이 아니다.

그렇기 때문에 닫는 중괄호 끝에 ; (세미콜론)을 붙여주어야 한다.

 

 

기본 형식

const 객체 = {
      속성이름1 : 속성값1,
      속성이름2 : 속성값2,
      속성이름3 : 속성값3,  //속성 뒤에 쉼표를 추가하며 오류를 방지하는것이 좋다.
};

 

접근방법

const user = {
	name : 'aaa',
	year : 2000,
	month : 9,
	date : 15,
	gender : 'F',
};

console.log(user.name);
console.log(user['name']);  //두가지 방법으로 접근 가능하다

대괄호[ ] 사용할때는 문자열을 통해 꼭 써줘야 한다.!!

 

 

📌온점(.)을 사용할 수 없는 경우

속성 이름에 띄어쓰기 또는 온점이 들어있을때 사용이 어려움.

문자열로 감싸준 속성은 온점(.)을 통한 접근이 안되므로 대괄호를 사용해야 한다.

 

---

대괄호 안에 홑따옴표( ' ' )를 사용하지 않을 경우 변수가 되므로 전혀 다른 결과를 출력하게 된다.

 

 

객체속성 수정하기

변수.속성 = 값;

 

user.gender = 'F';
console.log(user.gender);   // F

gender를 F에서 M으로 수정

 

객체속성 제거하기

delete 변수.속성;

 

delete user.year;
console.log(user.year);

 

출력시 year이 삭제되었다.

 

객체 간 비교하기

 

객체는 모양을 비교하면 false가 나온다. (배열, 함수 모두 false 나옴)

객체는 모양이 같아도 생성할때마다 새로운 객체가 생성되므로 같지 않다.

객체가 아닌 데이터타입은 모두 true를 반환한다.

const a = {name : 'user'};
const arr = [1, 2, a];
console.log(a === arr[2]);

//true

{ } -> 객체리터럴

[ ] -> 배열 리터럴

 

const a = {name : 'user'};
const arr = [1, 2, a];
arr === [1, 2, a];

//false 

//배열 리터럴을 새로 생성했기 때문에 다르다.

 

참조(reference)와 복사(copy)

const a = {name: 'user'};
const b = a;
a.name = 'hero';
console.log(b.name);

//hero

b 에  a 를 대입

a 를 'hero'로 바꿈

b.name를 출력하면 hero가 나온다.

 

변수 a 와 b가 같은 객체를 참조하고 있는것

객체를 변수에 담으면 참조관계가 생긴다.

 

let c = 'user';
let d = c;
c = 'hero';
console.log(d);

//user

 

객체가 아닌 값(문자열, 숫자, 불 값, null, undefined)의 경우에는 다르다.

    (원시값)

 

객체가 아니므로 c 와 d가 연결되지 않음