자바스크립트 기초 #7 | Objects

Objects

 

- 자바스크립트의 데이터 유형 중 하나

- 자바스크립트의 거의 모든 object는 Object의 인스턴스

- Object는 key와 value의 집합체

- object = { key : value };

 

1. Literals and properties

1) Primitive type

변수 하나당 한 개의 값만 넣을 수 있음

const name = 'sh';
const age = 2;
pPrint(name, age);
function pPrint(name, age) {
    console.log(name);
    console.log(age);
}

 

2) Object 생성 방법

- 'object literal' syntax

const obj1 = {};

- 'object constructor' syntax

const obj2 = new Object();

 

3) Object type

function oPrint(person) {
    console.log(person.name);
    console.log(person.age);
}
const sh = {name: 'sh', age: 2};
oPrint(sh);


// 자바스크립트는 동적 언어로서
// Runtime(프로그램이 동작하고 있을 때) 결정되기 때문에 뒤늦게 프로퍼티 추가 가능
sh.hasJob = true;
console.log(sh.hasJob);
// 하지만 에러 발생 가능성이 높기 때문에 사용하지 않는 것을 추천

// 삭제 또한 가능
delete sh.hasJob;
console.log(sh.hasJob);

 

 

2. Computed properties

계산된 properties

 

1) object에 접근하는 방법

- ' . ' 

console.log(sh.name);

- '[ ]'

// key는 항상 string 타입으로 지정 '' 사용
console.log(sh['name']); // ''를 쓴 이유는 string 형태로 출력하기 위해

 

// 위에서 했던 console.log(sh.hasJob);을 다르게
sh['hasJob']=true;
console.log(sh.hasJob);

 

++

// 어떠한 경우에 어떤 방법을 쓰는가?
// 1. '.'
// 코딩하는 순간 키에 해당하는 값을 받아오고 싶을 때
// 2. '[]'
// 정확히 어느 키를 사용하는지 모를 때
// 즉, runtime에서 결정될 때
// 동적으로 key에 해당하는 value를 받아와야 하는 경우 유용하게 사용 가능

// 평소에는 .을 사용, 실시간으로 사용할때? 는 []를

// ex)
function printValue(obj, key) {
    console.log(obj[key]); 
    // 사용자에게 obj를 입력받아 그에 해당하는 key를 출력할 때, 
    // 우리는 key가 무엇인지 모르는 상태
}
// 동적으로 key에 해당하는 value를 받아와야 할 때 사용
printValue(sh, 'name');
printValue(sh, 'age');

 

 

3. Property value shorthand

- object를 필요할때마다 만들게 되면 동일한 key와 value를 반복해서 만들어야 됨

- 함수를 이용해 값만 전달해주면 간단하게 생성 가능

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
// person4 .. 를 만들고 싶을 때 더욱 편하게 만드는 방법
const person4 = new Person('sh', 5); // Person 호출

// class, template 같은! class가 없었을 때 아래 방법을 많이 사용했음
// function makePerson(name, age) { 
//     return { 
//         name, // key와 value의 이름이 동일하다면 생략 가능
//         age,
//     };
// }
// const person4 = makePerson('sh', 5); // 호출

+ 4 참고

 

 

 

4. Contructor function

function Person(name, age) { 
    // this = {};
    this.name = name; 
    this.age = age;
    // return this;
}
// 다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수는 보통 대문자로 시작하며
// return 대신 this를 사용함
// 이렇게 하면 자바스크립트 엔진이 알아서 오브젝트를 생성해줌

console.log(person4);

 

 

5. in operator: property existence check (key in object)

// obj 안에 키가 있는지 없는지 확인
console.log('name' in sh); // true
console.log('age' in sh); // true
console.log('random' in sh); // false
console.log(sh.random); // undefined

 

 

6. for..in vs for..of

 

for (key in obj)

- obj가 갖고 있는 key들이 블럭을 돌때마다 key 지역변수에 할당됨

console.clear(); // 이전 기록 삭제
for (key in sh) {
    console.log(key);
}

 

for (value of iterable)

- 배열, 리스트 등 순차적으로 iterable 한 것들에 사용

- 기존 for문을 간단하게 작성 가능

const array = [1, 2, 4, 5];
// for (let i = 1; i < 4; i++) {
//     console.log(i);
// }
for (value of array) {
    console.log(value);
}

 

 

7. Fun cloning

- Object.assign(dest, [obj1, obj2, obj3...])

const user = { name: 'ellie', age: '20' };
const user2 = user;

// 이렇게 obj를 생성하면 user와 user2는 같은 레퍼런스를 가리키는 형태가 되어
// user2의 name을 바꾸면 user에서의 name도 바뀜
// user2.name = 'coder';

console.log(user.name);

 

- Object 복제, 복사

// ole way 예전
const user3 = {}; // 텅 빈 obj를 만들고
for (key in user) { // loof를 이용해 수동적으로 값을 넣어줌
    user3[key] = user[key];
}
console.clear();
console.log(user3);

// 새로운 방법!

// Object js의 가장 기본적인 obj
// js의 모든 obj들은 이 Object를 상속함
// assign() 정의: assign<T, U>(target: T, source: U): T & U 등등 정의 들어가보면 됨

// 방법1)
const user4 = {}; // 텅 빈 오브젝트 생성
Object.assign(user4, user);
console.log(user4);

// 방법2)
const user5 = Object.assign({}, user); // return 값을 받아와서 작성
console.log(user5);

// 여러개의 소스 전달도 가능

 

 

 

---

// another example

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big
// red -> blue 값은 덮어 씌워진다는걸 유의하며 사용!