javascript 오브젝트(object)

object

• 변수 하나 당 값을 하나만 담을 수 있다.
• object는 key와 value의 집합체이다.
• 오브젝트는 우리가 접근할 수 있는 변수와 그 변수가 가지고 있는 값으로 나눠진다.

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

const ellie = { name(key): "ellie"(value), age(key): 4(value) };

print(ellie);

이렇게 object를 이용해서 name과 age를 지정하고, function에 만들어서 print로 ellie를 호출해주면 된다.

object를 만드는 방법

const obj1 = { } //object literal
const obj2 = new Object(); //object constructor

new라는 키워드를 이용해서 object를 만들 수도 있다.

자바스크립트에서는 클래스가 없어도 괄호를 이용해서 오브젝트를 생성할 수 있다.

자바스크립트는 타입이 런타임때 결정되는 언어여서

뒤늦게 하나의 prop을 추가할 수 있다.

const ellie = { name: "ellie", age: 4 };

print(ellie);

ellie.hasJob = true;

delete ellie.hasJob;

이렇게도 가능한데, 유지보수하기가 굉장히 힘들고 생각지 못한 에러가 발생해서 가능하면 피해서 코딩해야 한다.

그리고 이렇게 삭제도 가능하다.

object[’key’] computed properties

계산된 prop 라는 뜻이다.

console.log(ellie.name);
console.log(ellie['name']);

이렇게 . 말고 다른 방법도 있다. obj 안에 있는 변수의 이름을 string 형태로 접근이 가능하다. 배열에서 받아오는 것 처럼 가능하다. (꼭 ‘ ‘ 가 있는 string 타입으로 지정해야 한다)

ellie['hasJob'] = true;
console.log(ellie.hasJob);

이렇게도 가능하다.

그러면 자바스크립트에는 두가지의 방법이 있는데, 어떨 때 어떤 방법을 써야 적절할까?

ellie.name 처럼 . 을 사용할 때는 코딩하는 그 순간 그 키에 해당하는 값을 받아오고 싶을 때 코딩한다.

ellie[’name’] 처럼 [ ] 을 사용할 때는, 우리가 정확하게 어떤 키가 필요한 지 모를 때, 즉 런타임에서 결정될 때 이것을 사용한다.

우리가 실시간으로 원하는 키를 받아오고 싶다면 computed prop을 사용하면 된다.

const ellie = { name: "ellie", age: 4 };

function printValue(obj, key) {
	console.log(obj.key);
}

printValue(ellie, 'name');

이렇게 보여졌을 때, ellie라는 obj에 obj.key 니까 그 순간 obj로 가서 key가 있는 지 확인한다. (하지만 없다) 그러므로 undefined가 뜬다.

const ellie = { name: "ellie", age: 4 };

function printValue(obj, key) {
	console.log(obj[key]);
}

printValue(ellie, 'name');

하지만 이렇게 바꾸어주었을 때에는 그 순간 가는것이 아닌 printValue에 name을 얻어오고 나서 실행하므로 name에 맞는 값이 뜬다.

property value shorthand

파라미터 값을 간단하게 만든다

const person1 = {name: 'bob' age: 2};
const person2 = {name: 'steve' age: 3};
const person3 = {name: 'dave' age: 5};
const person4 = makePerson('ellie', 4};

function makePerson(name, age) {
	return {
		name: name, -> 그냥 name 하나로 생략가능
		age: age, -> age 하나로 생략 가능
	};
}

자바스크립트에 class가 없을 때에는 이렇게 function으로 틀을 작성함

이렇게 key와 value 값이 겹치는 경우에는 하나로 생략이 가능하다.

그리고 person 오브젝트들을 다 만들 필요 없이, 그냥 함수를 사용해서 헷갈리지 않게 간단히 만들어준다.

저 makePerson도 괜찮지만, 자바스크립트에서는 조금 더 깔끔하게 만들어준다.

const person4 = new Person('ellie', 3);

function Person(name, age) {
	this.name = name;
	this.age = age;
}

이렇게 클래스처럼 선언해서 생성해준다. 이것을 constructor function 이라고 한다.

in operator

해당하는 오브젝트 안에 키가 있는 지 없는 지 확인하다.

console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);

이렇게 ellie 라는 오브젝트 안에 name, age, random 이 있는 지 알아볼 수 있는 것이다 random은 없으니까 false를 출력한다.

for … in , for … of

for ( key in obj )

for (key in ellie) {
	console.log(key);
}

이렇게 하면 ellie 안에 있는 모든 키들을 받아올 수 있다.

for (value of iterable)

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
	console.log(array[i]);
}

이렇게 할 수도 있찌만.
for (value of array) {
	console.log(value);
}
이렇게 하면 간단하게 모든 value를 출력가능하다.

cloning (복제)

이렇게 보면 메모리 구조를 살펴보면 같은 ref를 가리키고 있기 때문에 같은 값을 가리키고 있다. 여기서 user2.name 의 값을 변경하면, user의 name 값도 변한다.

근데 이렇게 되면 복제해서 값을 변경할 때 문제점이 있다.

const user3 = {};
for (key in user) {
	user3[key] = user[key];
}
console.log(user3);

옛날 방법으로는 이렇게 수동적으로 복사를 한 것을 알 수 있다.

const user4 = ();
Object.assign(user4, user);
console.log(user4);

이렇게 assign 함수를 통해 복사할 수도 있다.

이렇게 mixed 로 assign을 한다고 하면 실행결과는

이렇게 fruit2 의 파라미터 값만 나오게 된다. 왜냐하면 뒤에 있을 수록 동일한 파라미터라면 값이 덮어 씌워지기 때문이다.