입문자를 위한 자바스크립트 기초 강의_미니플젝03

객체 리터럴

객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 ‘객체 리터럴’을 이용해 객체 생성이 가능하다.
이때 속성의 이름을 키(key)라고 하고 속성의 실제 값을 value라고 한다.

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

여기서 속성의 value로 함수가 주어지면, 이 속성은 메소드가 된다.
또한 중요한 사실 하나! 키는 중복이 되면 안 되지만 값은 중복이 가능하다는 점이다.

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

이렇게 객체를 만들었다면 속성을 참조할 때는 아래와 같이 두 연산자를 사용해서 하면 된다.

// .연산자 사용
console.log(cat.town)
cat.scratch()

// 대괄호 연산자 사용
console.log(cat['name'])
cat['eat']()

스프레드 연산자

스프레드 연산자를 사용하면 배열이나 객체 리터럴 등의 요소 목록을 펼칠 수 있다.
전개 구문, 전개 연산자라고도 불리며 연산자 표기는 …로 나타낸다.

// 배열 요소 복사 시 사용
const pet = ["강아지", "고양이"]
console.log(...pet)  // 강아지 고양이
console.log(pet)  // ['강아지', '고양이']

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

const pet1 = ["강아지", "고양이"]
const pet2 = [...pet1, "햄스터"]
console.log(pet2)  // ['강아지', '고양이', '햄스터']

const car1 = ["아반떼", "소나타"]
const car2 = ["스파크", ...car1]
console.log(car2) // ['스파크', '아반떼', '소나타']

스프레드 연산자는 객체 리터럴에 대해서도 동일한 기능을 수행한다.
단 배열과 달리 개별 요소가 key-value 형태로 구성되어 있다.

const bird = {
	parrot: "앵무새",
	chicken : "닭"
}

const animal = {
	...bird,
	dog: "강아지"
}

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

JSON(JavaScript Object Notation)

자바스크립트 객체 표기법을 뜻하며 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.
JS에서만 사용할 수 있는 객체 타입을 다른 프로그래밍 언어에서도 사용할 수 있는 형태로 변환하기 위해 사용한다.
JSON 형식은 자바스크립트 객체 리터럴 표기법에 기반을 두고 있다.
객체 키와 문자열은 따옴표로 묶어야 하나 나머지는 그대로 표기할 수 있다.

// 이건 객체 리터럴
const gokuObject = {
	name: "손오공",
	race: "사이야인",
	skills: [
		"에네르기파",
		"계왕권",
		"순간이동"
	]
}


// 이건 JSON 문자열
const gokuJSON = `{
	"name": "손오공",
	"race": "사이야인",
	"skills": [
		"에네르기파",
		"계왕권",
		"순간이동"
	]
}`

이렇게 언제 다 표기하고있지..? 생각이 든다면..? JSON 표기를 도와주는 내장 객체 두 메소드를 사용하여 객체를 JSON 형식 문자열로 변환하거나 그 반대로도 환원할 수 있다!

// 객체 to JSON
const messi = {
	name: "리오넬 메시",
	'age': 34,
	team : "파리 생제르망",
	'nation' : "아르헨티나",
	friends: ["아구에로", "수아레즈", "네이마르"]
}

console.log(messi)
/* 실행결과

{name: '리오넬 메시', age: 34, team: '파리 생제르망', nation: '아르헨티나', friends: Array(3)}
age: 34
friends: (3) ['아구에로', '수아레즈', '네이마르']
name: "리오넬 메시"
nation: "아르헨티나"
team: "파리 생제르망"
[[Prototype]]: Object
*/

console.log(JSON.stringify(messi))
console.log(typeof JSON.stringify(messi)) //string

// JSON to 객체
const messi2 = `{"name":"리오넬 메시","age":34,
"team":"파리 생제르망",
"nation":"아르헨티나","friends":["아구에로","수아레즈","네이마르"]}`

console.log(JSON.parse(messi2))

위의 코드에서 알 수 있는 사실들은

• 객체 리터럴 key는 일반 기호를 써서 표현하거나 문자열로만 표현할 수 있다.
• 반면 value는 어떤 타입(문자열, 숫자, 배열 객체 등등)이든 모두 가능하다.
• 실행 결과를 서버나 다른 프로그램에 보내고 싶다면? JSON.stringify 활용하기.
• JSON.stringify의 결과가 진짜 string인지 궁금하다면 typeof로 타입 확인하면 된다.
• parse시 주의사항으로는 작은따옴표 사용시와 같은 에러를 볼 수 있으니 이것 또한 주의하자.
• Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 at JSON.parse

로컬스토리지(localStorage)

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

로컬 저장소는 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로 여기에다가 데이터를 영구적으로 보관할 수 있다. 영구적으로 보관한다 라는 말의 더 구체적인 의미는 브라우저를 껐다가 킨다거나 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 의미이다.

데이터 보관 시에는 데이터의 이름과 실제 값을 각각 지정하며, 이 때 데이터 타입은 문자열 형태만 허용된다.
로컬스토리지로부터 데이터를 읽거나 쓸 때는 아래와 같은 메소드들이 사용될 수 있다.

<로컬 스토리지 적용 전>

const myName = "jungdahye" console.log(myName)

<로컬 스토리지 적용 후>

const myName = "jungdahye" console.log(myName) localStorage.setItem("myName", myName)

배열 메소드 2편

콜백함수를 사용하는 대표적인 배열 메소드 알아보기!

// forEach
const food = ["피자", "치킨", "햄버거", "돈가스", "우동"]
food.forEach(function(name){
	const p = document.createElement('p')
  p.textContent = name
  document.body.appendChild(p)
})

// 콜백함수의 두 번째 인자로 선택적으로 index 전달 가능
const food2 = ["피자", "치킨", "햄버거", "돈가스", "우동"]
food.forEach(function(name, index){
	const p = document.createElement('p')
  p.textContent = `${index +1} 번째 음식 ${name}`
  document.body.appendChild(p)
})

//map
const food3 = ["피자", "치킨", "라면", "돈가스", "우동"]

const result = food.map(function(name, index){
  return `맛있는 ${name}`
})

console.log(result)

//filter
const fruit = ["사과", "딸기", "포도", "오렌지", "바나나"]

const res = fruit.filter(function(name, index){
  return name === "바나나"
})

console.log(res) // ['바나나']

https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard

입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의