[javascript] 객체 리터럴

객체는 이렇게도 만들 수 있다

객체를 구성하는 속성(값이나 기능)의 이름과 실게 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하면 객체를 생성할 수 있다.

이때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라 한다.

const cat = {
	name: "국희",
    	town: "부천"
    
}

namer과 town은 키, "국희"와 "부천"은 밸류이다.

생성자보다 훨씬 편하게 객체를 만드는 방법이다. 
생성자의 경우 생성자를 만들고 나서 생성자를 호출해야 객체가 만들어 진다.
따라서 즉각적으로 객체를 만들 경우에는 좀 더 편리한 방법이다.

속성의 밸류로 함수가 주어지면 이 속성은 메소드가 된다.
객체가 가지고 있는 데이터는 속성 값이고 객체가 가지고 있는 기능(함수)은 메소드라고 하기때문.

const cat = {
	name: "국희",
    town: "부천",
    eat: function(){
	    console.log("밥을 먹는다냥")
    },
    scratch: function(){
    	console.log("건드리면 할퀸다냥")
    }
}

키는 중복될 수 없다. 그러나 밸류는 같은 것이 있어도 상관없다.

 

속성에 접근하는 방법

객체 안의 속성 값을 참조할 때는(읽거나 쓸 때) 도트(.) 연산자 또는 대괄호([]) 연산자를 사용할 수 있다.

// 도트 연산자 사용
console.log(cat.town) // 부천
cat.scratch() // 건드리면 할퀸다냥

// 대괄호 연산자 사용
console.log(cat['name'] // 국희
cat['eat']() // 밥을 먹는다냥

속성 이용(읽거나 쓸때)에 키를 쓰므로 키는 중복 될 수 없다.

 

복사기능

스프레드 연산자를 사용하면 객체 리터럴의 요소 목록을 펼칠 수 있다. 
전개 구문, 전개 연산자 등으로 불린다. (펼치다 =  spread)

스프레드 연산자를 사용할 때에는 도트(.)를 3개 이용하여 작성하면 된다.

// ...obj 
const bird = {
	name: "앵무새",
	chicken: "닭"
}
const animal = {
	...bird, // 점 세개 뒤에 객체명 작성
    dog: "강아지"
}

console.log(animal)

 

콘솔로 찍어보면 좌측의 그림처럼 요소가 전개되어 복사되어 나타난다.

 

배열의 요소를 복사 할 때도 유용하게 사용할 수 있다.

const pet = ["강아지", "고양이"]
console.log(...pet) // 강아지 고양이 => 배열의 요소만을 복사하여 전개됨
console.log(pet) // ['강아지', '고양이'] => 원본 배열에 변화는 없다.

// 스프레드 연산자는, 사용된 자리에 개별 요소를 '놓고 온다'.