[JavaScript] Day 22 - 할 일 목록 만들기

객체 리터럴

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

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

 

const cat = {

     name : "국희", 

     town : "부천"

}

 => name과 town은 키, "국희"와 "부천"은 밸류!

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

 

속성 참조하기

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

// 도트 연산자 사용

console.log(cat.town)

cat.scratch()

 

// 대괄호 연산자 사용

console.log(cat['name'])

cat['eat']()

 

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

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

전개 구문, 전개 연산자 등으로 불린다.

(펼치다 = spread)

 

스프레드 연산자 :  ...

 

배열에서의 전개

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

ex )

const pet = ["강아지", "고양이"]

console.log(...pet)   // 요소만 복사되어서 강아지 고양이라고 출력 됨.

console.log(pet)    // 원래대로 ['강아지', '고양이']라고 출력 됨.

 

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

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

 

객체 전개

스프레드 연산자는 객체 리터럴에 대해서도 동일한 기능을 수행한다.

단, 배열과 달리 개별 요소가 키와 밸류로 구성되어 있다.

 

JSON

JSON은 자바스크립트 객체 표기법을 뜻하며, 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.

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

 

📌문자열은 거의 모든 현대 프로그래밍 언어에서 사용할 수 있기때문에...!

 

JSON 포맷

JSON 형식은 자바스크립트 객체 리터럴 표기법에 기반을 두고 있다.

객체 키와 문자열은 따옴표로 묶어야 하나, 나머지는 그대로 표기할 수 있다.

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

📌stringify는 객체 전체를 문자열로 변환시켜준다. 하지만, 함수는 변환해주지 않는다.

📌parse는 JSON을 객체로 바꿔주는 역할을 한다. 하지만, 작은따옴표로 감싸져 있다면 실행되지 않는다.

     그리고 후행쉼표(문장이 끝났을때 쉼표를 적는 것)를 사용하면 안된다.

 

window.localStorage⭐

localStorage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해 준다!

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

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

 

영구적으로 보관한다는 말이 무엇일까?

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

 

사용법

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

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

 

setItem 사용

ex) localStorage.setItem("myName", myName)

ex2) localStorage.setItem("myName", "이다닷")

📌첫 번째 인자는 데이터의 이름을 지정해주고, 두 번째 인자는 실제 저장할 데이터 내용이다.

    myName을 만들어 놓은 상황에서 setItem을 지정해주면 내용이 바뀌면서 저장된다.

 

배열 메소드 추가학습

콜백함수를 사용하는 대표적인 메소드

메소드 또는 속성	기능
forEach	배열의 각각의 요소에 대해 콜백을 호출
map	배열의 각각의 요소에 대해 콜백을 호출한 결과를 모아 새로운 배열을 반환
filter	배열의 각각의 요소에 대해 콜백을 호출한 결과 true를 반환하는 모든 요소를 모아 새로운 배열 반환

사용법

forEach

배열이름.forEach(function(매개변수 이름){

    // 실행할 문장 

})

📌forEach 함수를 이용해서 요소 한개한개를 p태그에 집어넣어서 요소를 출력할 수 있다.

📌매개변수에 index를 추가하면 인덱스 번호를 자동으로 받아서 사용할 수 있다.

 

map

const result = 배열이름.map(function(매개변수이름){

    return `아름다운 ${매개변수이름}`

})

📌return 값으로 아름다운 이라는 내용이 추가되었으므로 result를 출력하면 하나하나의 요소에 아름다운이 추가된 채로 배열이 생성된다.

📌원본 배열에는 달라지는 점이 없다.

 

filter

const result = 배열이름.filter(function(매개변수이름){

    return 매개변수이름 === "사나"

})

📌매개변수가 "사나"라는 문자일때만 true를 반환하고, 따라서 다른 변수 차례에서는 false가 반환되므로 "사나"라는 요소만 출력된다.