JavaScript - 객체(Objects)

🤍객체(Objects) - “다양한 형태의 자료형”을 가진 자료구조

객체 : '키'와 '값'으로 이루어진 '프로퍼티'들의 집합! (키와 값의 집합)

객체의 목적 : 다양한 "데이터 타입"의 자료들을 할당하기 위함

 

프로퍼티 키 : (문자열)

프로퍼티 값 : (모든값) 

 

프로퍼티 값이 함수인 경우를 "메서드"

메서드 :  객체안의 함수

객체안에 프로퍼티 값이 함수인 : 메서드

함수 안에 메서드가 포함!!

|객체의 정의와 특징

• 객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현
• key는 문자열 타입*만 가능
  • (참고) key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현
• value는 모든 타입(함수포함) 가능
• 객체 요소 접근은 점 또는 대괄호로 가능
  • (참고) key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

const me = {
 name: 'jack',
 phoneNumber: '01012345678',
 'samsung products': {
 	buds: 'Galaxy Buds pro',
 	galaxy: 'Galaxy s20’,
 },
}

console.log(me.name)
console.log(me.phoneNumber)
console.log(me['samsung products'])
console.log(me['samsung products'].buds)

|객체와 메서드; 메서드(객체 "안에" 있는 함수, 함수!=매서드)

• 메서드는 객체의 속성이 참조하는 함수.
• 객체.메서드명() 으로 호출 가능.
• 메서드 내부에서는 this 키워드가 객체를 의미함.
  • fullName은 메서드가 아니기 때문에 정상 출력 되지 않음(NaN)
  • getFullName은 메서드이기 때문에 해당. 객체의 firstName 과 lastName을 정상적으로 이어서 반환

const me = {
 firstName: 'John',
 lastName: 'Doe’,
 fullName: this.firstName + this.lastName,
 getFullName: function () {
 	return this.firstName + this.lastName
 }

|객체 관련 ES6 문법

• 속성명 축약
• 메서드명 축약
• 계산된 속성명 사용하기
• 구조 분해 할당*
  • (참고) 구조 분해 할당은 배열도 가능함
• 객체 전개 구문(Spread Operator)

|속성명 축약 (shorthand)

• 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약 가능

var books = ['Learning JS', 'Learning Python']
var magazines = ['Vogue', 'Science']
 // ES5
var bookShop = {
 books: books,
 magazines: magazines,
 }
 console.log(bookShop)
////////////////////////////////////////////////////////
const books = ['Learning JS', 'Learning Python']
const magazines = ['Vogue', 'Science']
 // ES6+
const bookShop = {
 books,
 magazines,
 }
 console.log(bookShop)

/*
 {
 books: ['Learning JS', 'Learning Python'],
 magazines: ['Vogue', 'Science']
 }
 *

|메서드명 축약 (shorthand)

• 메서드 선언 시 function 키워드 생략 가능

// ES5
 var obj = {
 greeting: function () {
 conosle.log('Hi!')
 }
 }
 obj.greeting() // Hi!
///////////////////////////////////
// ES6+
 const obj = {
 greeting() {
 console.log('Hi!')
 }
 }
 obj.greeting() // Hi

|계산된 속성(computed property name)

• 객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성 가능

const key = 'regions'
const value = ['광주','대전','구미','서울']
const ssafy = {
	[key]:value,
}
console.log(ssafy) // {regions : Array(4)}
console.log(ssafy.regions) //["광주","대전","구미","서울"]

|구조 분해 할당 (destructing assignment)

• 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

const userInformation = {
	name:'chun sik',
	userId: 'sweetpotato',
	phoneNumber: '010-000-0000',
	email: 'chunsik@sweetpotato.com'
}

const name = userInformation.name
const userId = userInformation.userId
const phoneNumber = userInformation.phoneNumber
const email = userInformation.email
/////////////////////////////////////////

---

const userInformation = {
	name:'chun sik',
	userId: 'sweetpotato',
	phoneNumber: '010-000-0000',
	email: 'chunsik@sweetpotato.com'
}
const {name} = userInformation
const {userId} = userInformation
const {phoneNumber} = userInformation
const {email} = userInformation
//여러개도 가능!
const {name, userId} = userInformation

|Spread Operator

• spread operator(...)를 사용하면 객체 내부에서 객체 전개 가능
• 얕은 복사에 활용 가능

const obj = {b: 2, c: 3, d: 4}
const newObj = {a: 1, ...obj, e: 5}
console.log(newObj) // {a: 1, b: 2, c: 3, d: 4, e: 5

|JSON(JavaScriptObjectNotation)

• key-value쌍의 형태로 데이터를 표기하는 언어 독립적 표준 포맷
• 자바스크립트의 객체와 유사하게 생겼으나 실제로는 문자열 타입
• 따라서 JS의 객체로써 조작하기 위해서는 구문 분석(parsing)이 필수
• 자바스크립트에서는 JSON을 조작하기 위한 두 가지 내장 메서드를 제공
  • JSON.parse()
    • JSON => 자바스크립트 객체
  • JSON.stringify()
    • 자바스크립트 객체 => JSON

//Object -> JSON
const jsonData = JSON.stringify({
	coffee: 'Americano',
	iceCream: 'Cookie and cream',
})
console.log(jsonData) // "{"coffe":"Americano",...
console.log(typeof jsonData) //string

//JSON -> Object
const jsonData = JSON.stringify({
	coffee: 'Americano',
	iceCream: 'Cookie and cream',
})
const parseData = JSON.parse(jsonData)
console.log(parseData) // {coffee:"Americano",...
console.log(typeof parseData) //object