Object 객체

자바스크립트에서 Data Type 대해 배웠다면, 단일 데이터와 복합 데이터로 크게 두 가지로 나누어져있습니다. 그리고 단일 데이터는 원시 (Primitive)가 있고, 복합 데이터에는 객체 (Object)가 있습니다.

그래서 객체는 무엇인가?

객체는 복합 데이터 입니다. 서로 연관있는 속성과 행동을 묶어주기 위한 집합 장소 입니다. 변수 안에 key : value로 구성되어 있고, key는 데이터 (Property) 그리고 key 는 함수(메서드)가 되겠습니다.

Key와 Value에는?

key - 문자, 숫자. 문자열, 심볼
value - 원시값, 객체 (함수)

person에 대한 정보가 묶어있는 것을 확인할 수 있습니다. name은 Steve이고 age는 20이 되겠습니다.

let person = {
	name: 'Steve',
    age: 20,
}

속성, 데이터에 접근하는 방법

• 마침표 표기법 또는 dot notation

person.name // 'John'
person.age // 20

• 대괄호 표기법 bracket notation

person['name'] // 'John'
person['age'] // 20 

동적으로 속성에 접근하는 방법. 대괄호 표기 방법 사용!

dot notation 마침표 표기법이 안되는 이유

아래 함수에서 동적으로 obj.key 사용이 불가능한 이유는 key라는 value가 정해져 있지 않기 떄문입니다. 우리고 name을 넣을지 아니면 age을 넣을지 모르기 때문에 dot notation은 사용이 불가능하다.

let obj = {
	name: 'Steve',
    age: 20
}
function getValue(obj, key) {
	return obj.key;
}

대괄호 bracket notation를 사용해야 하는 이유

대괄호를 이용해서 obj[key]를 이용해야 합니다. 우리 함수를 호출할 때
getValue(obj, 'name') key parameter 안에 이런식으로 입력하기 때문에 함수 내에서 ['key']를 사용하시면 마침 표기법이랑 다를법이 없습니다.

let obj = {
	name: 'Steve',
    age: 20
}
function getValue(obj, key) {
	return obj.[key]; 
}

함수를 이용해 key에 value 추가하기

let obj = {
	numberOne : 1,
    numberTwo : 2,
}
function addKeyAndValue (obj, key, value) {
	return obj[key] = value; 
}

addKeyAndValue(obj, 'numberThree', 3) 

delete를 이용해 key 삭제하기

let obj = {
	numberOne : 1,
    numberTwo : 2,
    numberThree 3
}
function deleteKey (obj, key) {
delete obj[key] = value; 
}

deleteKey(obj, 'numberThree')

console.log(obj)  // obj = {numberOne: 1, numberTwo: 2}