[JS] Object(객체)

# Object

키로 구분된 데이터 집합을 저장하는 자료형

(객체지향 프로그래밍에서 쓰는 객체와는 다름)

 

 

객체의 구조

• 중괄호를 이용해 작성
• 중괄호 안에는 key: value 쌍으로 구성된 속성을 여러개 작성 가능
• key는 문자형만
• value는 모든 자료형 가능

const user = {
	name: 'Yongbok',
    'key' : true,
    geeting: fun () {	// 함수도 가능
    	return 'hello'
    }
}

 

속성 참조

• 점이나 대괄호로 객체 요소 접근
• key 이름에 띄어쓰기 같은 구분자가 있다면 대괄호만 가능

// 조회
console.log(user.name)	// Youngbok
console.log(user['key'])	// true

// 추가
user.type = 'cute'

// 수정
user.name = 'Mino'
console.log(user.name) // Mino

// 삭제
delete user['key']
console.log(user)	// {name: 'Mino', greeting: f, type: 'cute'}

 

 

 

# Method

객체 속성에 정의된 함수

함수 중에서도 객체에 의해 호출되는 함수들

object.method( ) 방식으로 호출 → 객체를 행동할 수 있게 함

const user = {
	name: 'Yongbok',
    geeting: fun () {	// 얘가 Method
    	return 'hello'
    }
}

// 호출
console.log(user.greeting())	// hello

근데, 여기서 만약 object내의 name을 가져오고 싶다면..?

▶ this keyword를 사용해준다

https://memezz.tistory.com/92

[JS] 'this' keyword

 

---

추가적으로..

 

 

1. 단축속성

키 이름과 값으로 쓰이는 변수의 이름이 같은 경우 생략 가능

const name = 'Mino'
const age = 25

const user = {
	name,
    age,
}

 

2. 단축 메서드

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

const myObj = {
	myFun() {	// function 생략
    	return 'hello'
    }
}

3. 계산된 속성

키가 [대괄호]로 둘러싸여 있는 속성

고정값이 아닌 변수 값을 사용할 수 있음

const product = prompt('물건이름은?')
const one = 'my'
const two = 'property'

const bag = {
	[product]: 5,
    [one + two]: 'value',
}

console.log(bag) 	// {연필: 5, myproperty: 'value'}

 

4. 구조 분해 할당

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

const userInfo = {
	name: 'Yongbok',
}
const name = userInfo.name 	// 원래 이렇게 했는데
const {name} = userInfo		// 이렇게 가능

함수의 매개변수로 객체 구조 분해 할당 활용 가능

function Info({name, age}) {
	console.log(`이름: ${name}, 나이: ${age}`)
}

const person = {
	name: 'bok',
    age: 22,
}

// 함수 호출 시 객체를 구조 분해하여 매개변수로 전달
Info(person) 	// 이름: bok, 나이: 22

 

5. Object with 전개 구문

• 객체 복사: 객체 내부에서 객체 전개
• 얕은 복사에 활용 가능

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

6. Object.keys() / Object.values()

 

7. Optional chaining (' ')

속성이 없는 중첩 객체를 에러 없이 접근할 수 잇음

참조 대상이 null 이나 undefined라면 에러가 발생하는 대신 평가를 멈추고 undefined를 반환

Optional chaining이 없다면 &&연산자를 사용해야함

장점

• 참조가 누락될 가능성이 있는 경우, 짧고 간단하게 가능
• 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우에 객체 내용을 편리하게 탐색 가능

주의사항

• 존재하지 않아도 괜찮은 대상에만 사용(남용하지 말자) 
• 앞에 변수는 반드시 선언되어 있어야 함