자바 스크립트(js) 입문 공부 15. 객체 리터럴 , 스프레드 연산자

객체 리터럴

 

객체를 구성하는 속성(값이나 기능, 객체의 상태를 나타내는 값. 프로퍼티 property)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용하면 객체를 생성할 수 있습니다.

이때 속성 프로퍼티의 이름을 키(key), 속성의 실제 값을 밸류(value)라고 합니다. 

마치 파이썬의 바이너리를 연상시키는 형태입니다. 

객체 리터럴의 형식은 아래와 같습니다. 

 

const cat = {
	name : "쿠키",
	age : 5
  };

 

여기에서 name과 age는 key, “쿠키" 와 5는 value에 속합니다. 

객체 리터럴의 중괄호는 코드 블록을 의미하는 것이 아니라 값으로 불리기 때문에 닫는 괄호 뒤에는 세미콜론을 붙여줍니다. 

 

객체 리터럴의 value가 되면 사용할 수 있는 모든 값이 되므로 우리가 알고 있는 메소드가 됩니다. 

속성의 벨류로 함수도 주어지면, 이 속성은 메소드가 됩니다. 

 

 

키는 중복될 수 없으나, 밸류는 같은 것이 있어도 상관없습니다. 

 

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

 

생성자 함수로 객체를 생성할 때에는 다음과 같이 생성했습니다. 

function Dog(){}
new Dog()

 

여기에서 같은 것을 객체 리터럴을 토대로 객체를 만들고 싶다면 다음과 같은 차이가 있습니다. 

생성자 함수를 토대로 만든다면 클래스 역할을 하게 되어 객체에 대한 설계를 해놓고 객체 생성을 하는 것입니다. 

객체 리터럴은 한 번 만들면 그것이 하나의 객체가 되기 때문에 설계의 과정 이 필요 없습니다. 

 

const Cat = {
    catName: "국희",
    catAge: 3,
    catTown: "신탄진",
    scratch : function(){
        console.log("자꾸 건드리면 햘퀸다.")
    }
}

console.log(typeof Cat)
Cat.scratch()	 // 호출하는 방법이 두 가지가 있습니다. 
Cat["scratch"]() // 호출하는 방법이 두 가지가 있습니다.

 

 

이것을 활용한 작업 중 투두리스트를 만드는 과정에 대한 설계를 해볼게요. 

 

우리가 할 일을 표현하고자 한다면 어떻게 할까요. 

 

- 오늘 해야 할일은 무엇인가?

- 그 할일을 마쳤는가?

- 언제 해야 하는가?

- 누구와 해야하는가?

 

그것을 객체 리터럴 방법으로 작성해본다면 이런 방식일 것입니다. 

 

const todo = {
    todoContent : "공부하기",   // 오늘 해야할 일?
    todoDone : false,          // 할 일을 마쳤는지?
    todoDate : new Date(),      // 언제 해야 하는지?
    todoWith : ["도로시", "양철로봇"] // 누구와 해야하는지?
}

 

 

스프레드 연산자 (전개 구문) 

 

스프레드 연산자를 사용하면 배열이나 객체 리터럴 등의 요소 목록을 펼칠 수 있습니다. 

이것은 전개 구문, 전개 연산자 등으로 불립니다. (펼치다 = spread) 

스프레드 연산자는 ...  으로 표현합니다. 

 

스프레드 연산자는 배열의요소를 복사할 때 효과적으로 사용할 수 있습니다.

 

 

 

 

새로운 배열을 선언할 때 스프레드 연산자를 사용하면, 기존 배열의 개별 요소를 멤버로 갖는 배열을 생성할 수 있어요. 

 

 

 

새롭게 객체를 추가하는 것이 아니라 복사해서 붙이는 것이므로 원본을 훼손하지는 않습니다. 

 

 

객체 전개

스프레드 연산자는 객체 리터럴에 대해서도 동일한 기능을 수행합니다. 
단, 배열과 달리 개별 요소가 키와 밸류로 구성되어 있습니다. 

const cafes = ["스타벅스", "할리스", "투썸플레이스","빽다방"]
console.log(...cafes)  // 대괄호를 벗긴 나머지의 값을 그대로 가져온다. 

const newsCafes = [...cafes, "이디야"] // 배열을 복사하고 새로운 객체를 추가한 배열을 만든다. 
console.log(...newsCafes)

 

실행 콘솔 화면은 다음과 같습니다. 

 

 

스프레드 연산자는 객체 리터럴에서도 사용할 수 있습니다. 

 

const pet = {
 species : "강아지",
 breed: "시츄",
 age : 13
}

const newpet = {...pet, name :"콩이"}

 

만약 스프레드 연산자 안에 객체 리터럴 속에서 이미 쓰여진 키를 중복해서 사용한다면 나중에 쓰여진 키의 내용으로 덮어쓰기를 합니다. 

 

const pet = {
 species : "강아지",
 breed: "시츄",
 age : 13
}

const newpet = {...pet, name :"콩이", age : 14}
console.log(newpet)

 

 

 

여기까지 스프레드 연산자와 객체 리터럴에 대해서 알아보았습니다. 

이 다음에는 JSON 에 대해서 공부해볼게요.