Object(객체)

1.객채의 정의

 

primitive type

자바스크립트 자료형의 기본 타입으로 변경 불가능 한 값이다. 변수 하나당 하나의 값을 원칙으로 한다.

const name = 'yurim';
const gender = 'female';
const age = 29;

 

yurim이라는 사람에 대한 정보를 각각의 변수에 담아서 console창에 출력하는 함수를 만들고자 한다면

아래와 같이 각각의 변수들을 다 입력해주어야 할 것이다.

const print = (name,gender,age) => {
  console.log(name, gender, age);
}

print(name, gender, age);

 

이러한 방법은 인자의 값이 적을때면 큰 문제가 없지만 인자의 값이 많아질 경우 파라미터가 너무 많이 생기고,

결국 관리가 힘들고 하나의 그룹으로 묶어서 생각하기가 힘들어진다.

 

 

이를 개선하고자 사용되는 개념이 바로 Object이다

 

MOZILLA 사이트에서 정의된 내용을 찾아보면 Object란 , 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. 객체 리터럴 문법 (object literal syntax) 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에  복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다.

두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다.

 

즉 객체란 같은 속성 혹은 비슷한 속성을 묶어서 정의내린 하나의 덩어리같은 개념이다.

 

객체를 정의하는 방법은 2가지가 있다

 

//방법 1
const yurim01 = { name: 'yurim', gender : 'female', age : 29 }

//방법 2
const yurim02 = new Object();
yurim02.name = 'yurim';
yurim02.gender = 'female';
yurim02.age = 29;

 

이렇게 객체로 정의해준 값을 받아오는 함수를 실행시킬때는

const print = (user) => {
  console.log(user)
};

print(yurim01);
print(yurim02);

이렇게 하나의 파라미터만으로도 객체에 포함된 key:value값을 관리 할 수 있기 때문에

훨씬 더 직관적이고 깔끔하게 데이터를 관리 할 수 있다.

 

 

2. 객체의 vlaue에 접근하는 방법

위와 같이 객체는 객체 자체를 한꺼번에 꺼내 볼 수도 있지만, key값을 이용해서 원하는 vlaue에만 접근하는것도 가능하다.

//방법1 : 대부분 이 방법을 사용, 코딩하는 순간 vlaue값을 받아오고 싶을 때 사용된다.
print(yurim01.name);
//방법2 : 정확하게 어떤 키가 이용될지 모를 때 사용
print(yurim02['name']);

 

 

대부분 첫번째 방법이 사용되지만 2번이 사용되는 경우가 있다. 정확하게 어떤 키가 이용될지 모르는 상황에서는 2번의 방법을 사용하게 된다.

 

아래 console실행 함수에서 console.log(obj.key);를 입력하면

함수가 만들어지는 순간에 key값이 정의되지 않았기 때문에 undefined가 뜨게된다.

 

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

 

 

3. 객체를 만든 후에도 속성을 추가, 삭제 할 수 있다.

yurim01.hasjob = false;
delete yurim01.hasjob;

 

4. 자바스크립트에서 객체의 key, value값이 같으면 값을 각각 표기하지 않고 한번만 표기할 수 있다.

const makeNewPerson = (name, gender, age) => {
  return {
    name: name,
    gender: gender,
    age: age
  };
};

const changkyu = makeNewPerson("changkyu", "male", 30);

 

makeNewPerson이라는 함수를 만들어 changkyu라는 객체를 생성해보았다.

 

이때 모든 key값과 value값의 이름이 같을땐 한번씩만 표기함으로써 더 깔끔한 모양새로 객체를 만들 수 있다.

const makeNewPerson = (name, gender, age) => {
  return {
    name,
    gender,
    age
  };
};

 

5. 객체를 생성하는 함수는 class와 비슷한 역할을 한다.

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

const changkyu = new Person("changkyu", "male", 30);

 

위와 같이 class처럼 사용도 가능하다

 

6. in operator

console.log('name' in changkyu);  

위와 같이 'key' in Object를 사용해서 key값의 유무를 조회 할 수 있다.

 

7. 객체를 clone 시 주의사항

const yurim01 = { name: "yurim", gender: "female", age: 29 };
const yurim02 = yurim01;

yurim02.gender = 'male';

console.log(yurim01.gender);

 

위의 코드를 그대로 작성해보면 console창에는 female이 찍힐까 male이 찍힐까?

정답은 female이다.

객체를 변수에 할당하게되면 같은 객체가 +1되는것이 아니고, 

새로운 변수가 같은 값을 들여다 보게 된다.

따라서 object를 클론하고싶으면 새로운 객체를 선언 한 후 for문 등을 통해 새로 생성해주어야한다

(for문에 대해선 추후 따로 정리하여 포스팅 할 예정이다 :) )

 

 

 

참고: 드림코딩 엘리 유튜브 https://www.youtube.com/watch?v=1Lbr29tzAA8&t=133s