객체

: 키(key)값(value) 쌍으로 이루어진 자료 구조

let user1 = {
	firstName: 'Jieun',
  	lastName: 'Chun',
  	email: 'jieun@gmail.com',
  	city: 'Seoul'
};

객체의 값에 접근하는 법

1. Dot notation

객체명.key

user1.firstName; // 'Jieun'
user1.city; // 'Seoul'

2. Bracket notation

객체명["key"]
: key를 문자열 형식으로 전달해야 한다.

user1['firstName']; // 'Jieun'
user1[`city`]; // 'Seoul'

객체에 존재하지 않는 key를 참조하면 undefined를 반환한다.

user1.isStudent; // undefined
user1["isAdult"]; // undefined

객체에는 .length 프로퍼티가 없으므로, undefined를 반환한다.

user1.length; // undefined

매개변수로 객체의 키(property)와 값(value)을 입력받을 때

변수를 입력받아서 그 변수명으로 속성을 만들고 싶으면 반드시 문자열이 아닌 Bracket notation을 사용해야 한다. ➡️ [변수명]

let user1 = {};

function addPropertyAndValue(obj, property, value) {
	obj[property] = value; // obj['property'] X, obj.property X
}

addPropertyAndValue(user1, 'isStudent', true);
  • 만약 obj['property']obj.property라고 입력한다면, 매개변수로 입력받은 변수 property를 사용하는 것이 아니라, 그냥 문자열 'property'를 사용하는 것이다.

객체에 값을 추가하는 법

객체의 값에 접근할 때와 동일하게 Dot notation과 Bracket notation을 사용한다.

user1.isStudent = true;
user1['puppies'] = ['GG', 'Bella']; // 값에 배열이 들어갈 수도 있다.

isStudent, puppies 키와 값이 추가된 것을 확인할 수 있다.


객체의 값을 삭제하는 법

delete

delete 키워드를 이용해 값을 삭제할 수 있다.

delete user.email; // email의 키-값 쌍을 지운다.
delete user['city']; // city의 키-값 쌍을 지운다.

특정 키가 있는지 확인하는 법

in

in 연산자를 이용해 객체에 해당하는 키가 있는지 확인할 수 있으며, true false를 반환한다.
"key" in 객체명

"firstName" in user1; // true
"nationality" in user1; // false

this

: 자기가 속한 객체를 가리키는 자기 참조 변수(self-reference variable)

let user1 = {
	firstName: 'Jieun',
  	lastName: 'Chun',
  	email: 'jieun@gmail.com',
  	city: 'Seoul',
  	func: function() {
    	return this;
    }
};

console.log(user1.func());

  • this는 메소드를 호출하는 시점에 결정된다.
user1.firstName = "GG"; // user1.firstName을 변경하고 호출하면,
console.log(user1.func());
// {firstName: 'GG', lastName: 'Chun', email: 'jieun@gmail.com', city: 'Seoul', func: ƒ}

객체 단축 문법 (property shorthand)

: 이미 정의된 변수가 있을 때, 객체 리터럴에서 변수명을 그대로 사용하면 변수에 담겨진 값이 할당되며 값의 할당을 생략할 수 있다.

const name = 'Jieun';
const age = 26;

const obj = {
	name,
  	age,
  	isStudent: true,
};

console.log(obj); // {name: 'Jieun', age: 26, isStudent: true}

객체의 메소드

Object.keys()

Object.keys(obj) : 객체의 모든 key를 배열 형태로 반환하는 메소드

Object.keys(user1);
// ['firstName', 'lastName', 'email', 'city']

Object.values()

Object.values(obj) : 객체의 모든 value를 배열 형태로 반환하는 메소드

Object.values(user1);
// ['Jieun', 'Chun', 'jieun@gmail.com', 'Seoul']

Object.entries()

Object.entries(obj) : 객체의 모든 속성을 key value 쌍의 배열 형태로 반환하는 메소드

let user1 = {
	firstName: 'Jieun',
  	lastName: 'Chun',
  	email: 'jieun@gmail.com',
  	city: 'Seoul'
};

Object.entries(user1);


Object.assign()

Object.assign(target, source) : 객체의 모든 속성을 복사해 대상 객체(target)에 붙여넣고, 대상 객체를 반환하는 메소드

  • 동일한 이름의 속성이 있다면, 값을 덮어쓴다.
const target = {name: 'Jieun', age: 26};
const source = {name: 'GG', isStudent: true};

Object.assign(target, source); // {name: 'GG', age: 26, isStudent: true}
  • 첫 번째 매개변수에 빈 객체{}를 넣어 객체를 복사할 수 있다.
const copiedObj = Object.assign({}, obj);

.hasOwnProperty()

obj.hasOwnProperty(prop) : 객체가 특정 프로퍼티를 가지고 있으면 true, 없으면 false를 반환하는 메소드

const obj = {};
obj.name = 'Jieun';

obj.hasOwnProperty('name'); // true
obj.hasOwnProperty('age'); // false

반복문을 이용해 객체의 속성(property)을 순회하는 법

for...in 구문

for (let [variable] in [object]) : 객체의 속성 키(property key)에 대해 반복한다.

const user1 = { name: "jieun", age: 26, isStudent: true };
for (let prop in user1) {
	console.log(prop + " : " + user1[prop]);
} 
// name : jieun 
// age : 26 
// isStudent : true가 차례대로 출력된다.

for 구문을 사용할 수 없는 이유

for(let i = 0; i < n; i++)
: 객체의 key가 0, 1, 2, 3... 인 경우에만 사용할 수 있다.

for...of 구문을 사용할 수 없는 이유

: for [variable] of iterable : iterable object에서만 사용할 수 있다.

  • iterable (반복 가능한 객체) : Array, Map, Set, String, TypedArray, arguments 객체 등을 포함한다.
  • 객체는 iterable이 아니다.

❔ 학습 후 궁금한 점

  • 얕은 복사(shallow copy)와 깊은 복사(deep copy)는 무엇인지?
  • apply, call, bind와 this?
profile
개발 공부 기록 블로그

0개의 댓글