30일차 - 자바 스크립트 기본 문법 (3)

객체 리터럴

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

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

 

cname과 cage은 키, "나비"와 3은 밸류이다.

 

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

 

 

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

 

 

 

 

 

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

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

전개 구문, 전개 연산자 등으로 불린다. (펼치다 = spread)

 

스프레드 연산자 = ...

 

 

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

배열의 괄호만 뺀 나머지 요소들만 복사한다.

 

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

 

 

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

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

또한, 밸류는 중복될 수 있지만, 키는 중복될 수 없기 때문에 중복된 키는 나중에 쓰여진 키값으로 덮어진다.

 

 

 

JSON

JSON은 자바 스크립트 객체 표기법(Java Script Object Notation)을 뜻하며,

이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.

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

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

 

 

 

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

작성 시 객체 키와 배류는 따옴표로 묶어야 하나, 나머지는 그대로 표기할 수 있다.

 

JSON 표기를 도와주는 내장 객체 JSON의 두 메소드를 사용하면 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 진행할 수 있다.

 

 

 

 

로컬스토리지(localStorage)

window.localStorage

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

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

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

 

영구적 보관이란?

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

 

 

 

 

로컬스토리지 사용법

로컬스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다.

 

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

 

 

 

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

 

 

forEach문을 이용하여 각각의 요소에 함수를 적용할 수 있다.

이 함수의 매개변수로는 대상 배열의 요소가 들어가는데, 매개변수를 2개 설정할 경우에

앞에오는 매개변수는 배열의 요소가, 뒤에 오는 매개변수는 요소의 인덱스 번호이다.

 

 

map을 사용할 때는 return을 이용해서 값을 내보낼 수 있다.

 

 

filter는 원하는 요소만 필터링하여 결과를 얻을 수 있다.

 

 

 

 

내용 정리

•객체 리터럴은 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶는 표현 방식이며, 이를 이용하면 객체를 생성할 수 있다.
•속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라 한다. •속성의 밸류로 함수가 주어지면, 이 속성은 메소드가 된다.
•도트 연산자나 대괄호 연산자로 객체의 속성을 참조할 수 있다.
•키는 중복될 수 없다. 그러나 밸류는 중복될 수 있다.

•스프레드 연산자는 배열, 객체의 요소 목록을 펼친다(spread).
•스프레드 연산의 결과, 배열과 객체의 개별 요소는 ‘복사’된다.
•따라서 배열과 객체에는 별다른 영향을 끼치지 않는다.

•JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)이다.
•자바스크립트에서만 사용할 수 있는 객체 타입을, 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용한다.
•내장 객체 JSON의 두 메소드를 사용하면 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 진행할 수 있다.

•window 객체의 localStoage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해 준다.
•데이터를 영구적으로 보관할 수 있으며, 데이터는 키와 밸류를 각각 가진다.
•키는 중복될 수 없다. 그러나 밸류는 같은 것을 쓸 수 있다.
•문자열 형태의 데이터만 보관할 수 있다.
•로컬스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다.