[Javascript] ES5+ 기초강의 7 - JavaScript에서 Obejct

---

1. JavaScript에서 Object

• Object는 JavaScript 데이터 타입의 하나
• Object와 관련된 data and funcationality의 집합
• object = { key : value };
• JavaScript에서 거의 대부분의 ojbects는 instances of Object이다.

 

1.1 Literals and Properties

Object 사용 전

Object 없이 Primitive 데이터 타입으로 Object 구현 시 문제점
- 데이터를 각각 선언해야 함
- 새로운 값을 추가할 경우에 데이터의 관리가 힘듦
- 관련 함수 구현 시 각각을 파라미터로 전달해야 해서 함수 선언 및 호출에서 수정이 발생

 

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

const name = 'ellie';
const age = 4;

print(name, age);

 

파라미터를 추가할 경우

 

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

const name = 'ellie';
const age = 4;
const job = 'developer';

print(name, age, job);

 

Obejct 사용

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

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

printObj(ellie);

 

파라미터를 추가할 경우

 

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

const ellie = { name: 'ellie', age: 4, job: 'developer' };

printObj(ellie);

 

2. JavaScript에서 Object 생성 방법

1. object literal 
2. object 생성자

const obj1 = {};           // 'object literal' 문법(syntax)
                           // JavaScript는 { } 로 class 생성 가능
const obj2 = new Object(); // 'object 생성자' 문법(syntax)

 

JavaScript의 특징
- dynamically-typed language : runtime에 데이터 타입을 결정
- Object 선언 후에 data field를 추가 및 삭제할 수 있음.

 

// JavaScript
// - dynamically-typed language : runtime에 데이터 타입을 결정
// - Object 선언 후에 data field를 추가 및 삭제할 수 있음
const andy = { name: 'andy', age: 20 }
printObj(andy);

andy.hasJob = false;       // Object에 field(속성) 추가
console.log(andy.hasJob);  // 결과: false

delete andy.hasJob;        // Object에 field(속성) 삭제
console.log(andy.hasJob);  // 결과: undefined

 

3. Computed properties : Object 접근 방법

Object 속성 접근 방법 
- object_name.field_name    : 일반적인 방법
- object_name['field_name'] : Computed properties
                                                속성을 배열처럼 접근, key값은 반드시 문자열로 지정

 

// 2. Computed properties 
// - object 속성 접근 법 : object_name.filed_name;
// -                     : object_name['field_name'];
// - 속성값을 배열(Map)처럼 접근할 수 있음.
// - key값은 항상 문자열로 지정해야 함
console.log(ellie.name);
console.log(ellie['name']);

ellie['hasJob'] = true;     // ellie.hasJob = true; 와 같음
console.log(ellie.hasJob);  // 결과: true

 

• '.'을 사용해야 하는 경우
  - 바로 값을 받아올 경우
• computed properties를 사용하는 경우
  - 어떤 키를 조회할지 모를 경우
  - 함수 호출에서 key 값을 넘겨줄 때는 어떤 키를 참조할지 알 수 없음.

// printValue : obj의 속성값을 출력하는 함수
function printValue(obj, key) {
    // coding 시 키 값을 할 수 없음
    console.log(obj, obj[key]);
}
printValue(ellie, 'name');   // 출력 : {name: 'ellie', age: 4, hasJob: true} 'ellie'
printValue(ellie, 'age');    // 출력 : {name: 'ellie', age: 4, hasJob: true} 4
printValue(ellie, 'hasJob'); // 출력 : {name: 'ellie', age: 4, hasJob: true} true

console.log(ellie.name);     // 출력 : 'ellie'
console.log(ellie.age);      // 출력 : 4
console.log(ellie.hstJob);   // 출력 : true

 

4. Property value shorthand : 속성 값 속기 방법

• Object literal 방식으로 객체를 생성할 때
  - key와 value의 명칭이 동일하다면 생략 가능

// JavaScript에 Class가 없을 때 사용했던 방법
function makePerson(name, age) {
    return {
        // name: name, 
        // age:  age
        name, // Property value shorthand
        age   // Property value shorthand
    };
}

 

// 3. Property value shorthand : 속성값 속기
// - Key와 Value의 명칭이 동일하다면 생략 가능
const person1 = { name: 'bob',   age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave',  age: 4 };

const person4 = makePerson('andy', 19);
console.log(person4);        // 출력 : {name: 'andy', age: 19}

 

5. Constructor function : 생성자 함수

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

const person5 = new Person('mike', 14); 
console.log(person5);        // 출력 : Person {name: 'mike', age: 14}
                             // Person이 붙어서 출력됨.

 

6. in operator : in 연산자

• 속성 값이 존재하는지 확인

// 5. in operator: in 연산자
// - property existence check (key in obj)
// - 속성값이 존재하는 지 체크
console.log('name' in ellie);   // 출력 : true
console.log('age' in ellie);    // 출력 : true
console.log('random' in ellie); // 출력 : false
console.log(ellie.random);      // 출력 : undefined

 

7. for .. in vs for .. of 

for .. in

// Object에서 key값을 순차적으로 조회
for (let key in ellie) {
    console.log(key);
}

 

for .. of

// for (value of iterable)
const array = [1, 2, 4, 5];

// old style
for (let i=0; i<array.length; i++) {
    console.log(array[i]);
}
// new style : for..of
for (let value of array) {
    console.log(value);
}

 

8. Cloning : 복제

// 7. Cloning
// Object.assing(dest, [obj1, obj2, obj3, ...])
const user  = { name: 'ellie', age: '20' };
const user2 = user; // 동일한 주소값을 참조

user2.name = 'coder';
console.log(user);  // 출력 : {name: 'coder', age: '20'}

 

• JavaScript는 call by reference로 처리하기 때문에
  - 값을 대입하거나 파라미터로 전달할 경우 동일한 객체를 전달함
  - 복제를 위해서는 추가 작업이나 새로운 방법을 사용

기존의 방법

const user3 = { };          // 빈 객체 생성
for (let key in user) {
    user3[key] = user[key]; // 새로운 속성값 추가
}
console.log(user3);         // 출력 : {name: 'coder', age: '20'}

 

새로운 방법 1 : Object 클래스의 assign 메서드 사용

// new way #1
const user4 = { };          // 빈 객체 생성
Object.assign(user4, user); // Object 클래스의 assign 메서드 사용

console.log(user4);         // 출력 : {name: 'coder', age: '20'}

 

새로운 방법 2 : assign 메서드 속기 방법

// new way #2 : shorthand
user4.name = 'newbie';                    // user4 객체 값 수정
const user5 = Object.assign({}, user4);   // user4 객체 복제

console.log(user5);  // 출력 : {name: 'newbie', age: '20'}

 

새로운 방법 3 : 두 개의 객체를 사용하여 생성

• 2개의 객체를 사용하여 새로운 객체를 생성할 때
  - 같은 속성이 있을 경우 후순위의 값이 설정됨.

// new way #3
// - 객채를 섞을 경우 같은 속성은 후순위의 값이 설정됨
const fruit1 = { color: 'red'};
const fruit2 = { color: 'blue', size: 'big'};

const mixed1  = Object.assign({}, fruit1, fruit2);
console.log(mixed1); // 출력 : {color: 'blue', size: 'big'}

const mixed2  = Object.assign({}, fruit2, fruit1);
console.log(mixed2); // 출력 : {color: 'red', size: 'big'}