객체 리터럴

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

• 속성의 이름 - 키(key)
• 속성의 값 - 밸류(value)

const me = {
	name: "여진",
    town: "대구"
}

속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 됨

const me = {
	name: "여진",
    town: "대구",
	eat: function(){
    	console.log("밥을 먹는다")
    },
    scratch: function(){
    	console.log("건드리면 죽빵")
    }
}

키는 중복될 수 없음, But 값은 같은 것이 있어도 상관X

속성 접근

객체 안의 속성 값을 참조할 때(읽기 쓰기) 도트(.)연산자 또는 대괄호([])연산자 사용 가능

// 도트 연산자 사용
console.log(me.town) // 대구
me.scratch() // 건드리면 죽빵

// 대괄호 연산자 사용
console.log(me['name']) // 여진
me['eat']() // 밥을 먹는다

스프레드 연산자

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

스프레드 연산자 - ...

객체 리터럴에 대해 스프레드 연산을 수행하면, 구성요소를 그대로 복사

const bird = {
	parrot: '앵무새',
    chicken: '닭'
}
const animal = {
	...bird,
    dog: '강아지'
}
console.log(animal)

{parrot: '앵무새', chicken: '닭', dog: '강아지'}

배열에도 사용가능!

const pet = ["강아지", "고양이"]
console.log(...pet)
console.log(pet)

강아지 고양이
['강아지', '고양이']

스프레드 연산자는, 사용된 자리에 개별 요소를 놓고옴

Json

자바스크립트 객체 표기법 (JavaScript Object Notiation)
자바스크립트 객체를 문자열로 표현하는 데이터 포맷

주로 자바스크립트에서만 사용할 수 있는 객체 타입을, 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용

객체 리터럴

const gokuObject = {
	name: "손오공",
    race: "사이야인",
    skills: [
    	"에네르기파",
        "계왕권",
        "원기옥",
        "순간이동"
     ]
}

JSON 문자열

const gokuObject = `{
	"name": "손오공",
    "race": "사이야인",
    "skills": [
    	"에네르기파",
        "계왕권",
        "원기옥",
        "순간이동"
     ]
}`

내장객체

메소드명	기능	특이사항
stringify	객체 to JSON	undefined, 함수 등은 생략되거나 null로 변환
parse	JSON to 객체	작은 따옴표, 후행 쉼표는 파싱 불가하기도

LocalStorage

현재 도메인의 로컬 저장소에 접근할 수 있게 해줌

로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로, 데이터를 영구적으로 보관할 수 있음

데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용됨

영구적으로 보관한다?

브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 도메인에 데이터가 남아있도록 할 수 있음!

로컬 저장소 조회

개발자 도구의 Application 탭에서 조회 가능

localStorage 메서드

로컬스토리지의 데이터 이름은 중복 될 수 없음!!

메소드명	기능	사용 예
setItem	키와 밸류를 전달받아 저장	setItem("key","value")
getItem	전달받은 키에 해당하는 밸류를 반환	getItem("key")
removeItem	전달받은 키에 해당하는 데이터 삭제	removeItem("key")
clear	모든 데이터 삭제	clear()