JS 객체의 생성, 프로퍼티, 내장메서드

객체

자바스크립트를 이루고 있는 거의 모든 것들이 객체이다. 원시타입(Primitives)를 제외한 나머지 값들(함수, 배열, 정규표현식 등) 모두 객체이다. 이에 대해서는 나중에 더 학습하기로 하고, 우선 객체는 키(Key)와 값(Value)로 이루어진 속성(property)들의 집합이다. 배열과 마찬가지로 다양한 데이터를 한번에 다룰 수 있다.

 

---

 

객체 생성

객체 리터럴

const myself = {
  name: 'hahagarden',
  age: 28,
};

가장 일반적인 방식이다. 중괄호 안에 프로퍼티의 키와 값을 작성한다. 아무것도 작성하지 않으면 빈 객체({})가 된다.

Object 생성자 함수

const myself = new Object();
myself.name = "hahagarden";
myself.age = 28;

생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다. 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공한다. 일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다. 출처

배열을 new Array()으로 생성하던 것과 같다.

생성자 함수

프로퍼티의 키가 같은데 값만 달라지고 수십개의 객체를 생성해야 한다면? 만약 게임 캐릭터와 같이 여러 객체를 만들어야 하는데, 50마리를 만들려면 객체 리터럴이나 Object 생성자 함수로는 50번을 다 작성해야 할 것이다. 복사-붙여넣기를 하면 조금 편해지지만 코드의 길이도 50배 이상 길어질 것이다.

function User(name, age) {
  let married = false;
  this.name = name;
  this.age = age;
}

const myself = new User("hahagarden", 28); // { name: 'hahagarden', age: 28 }
const user01 = new User("김개발", 1); // { name: '김개발', age: 1 }
const user02 = new User("박코딩", 2); // { name: '박코딩', age: 2 }
const user03 = new User("최객체", 3); // { name: '최객체', age: 3 }
const user04 = new User('이코드', 20); // { name: '이코드', age: 20 }

한 줄로 하나의 객체를 생성할 수 있다. User 생성자 함수를 만들어 놓고 같은 모양의 객체, 인스턴스를 여러 개 생성할 수 있다. 과자틀로 과자를 찍어내듯이 반복해서 재사용할 수 있다.

 

• 생성자 함수 이름은 일반적으로 대문자로 시작한다. 이것은 생성자 함수임을 인식하도록 도움을 준다. 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
  이는 생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다는 것을 의미한다. 따라서 일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지하려는 노력을 한다.
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다. 출처
  
  위 User 생성자 함수 예시의 let married = false;처럼 생성자 함수 내에서 this로 바인딩되지 않고 선언된 일반 변수는 외부에서 참조할 수 없다. 주석에서 출력된 내용과 같이 married는 출력되지 않고, 프로퍼티 키로 접근하려고 하면 undefined로 나올 것이다.

 

---

 

프로퍼티

객체의 데이터를 의미한다.
프로퍼티의 키는 문자열(또는 심볼)인데 자바스크립트에서 유효한 이름이면 따옴표를 생략할 수 있다. 예약어는 예상치 못한 에러를 불러올 수 있으므로 사용하지 않는다.
프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값이 올 수 있다.

메서드

프로퍼티의 값에 함수가 온다면 일반 함수와 구분하기 위해 메서드라고 부른다. 객체의 데이터인 프로퍼티를 참조하고 조작할 수 있는, 데이터와 관련된 동작들이다.

프로퍼티 값 읽기

dot notation(마침표 표기법)과 braket notation(대괄호 표기법)이 있다. 키 이름이 자바스크립트의 유효한 이름이고 예약어가 아닌 경우 마침표 표기법과 대괄호 표기법 모두 사용할 수 있다. 그러나 유효한 이름이 아니거나 예약어인 경우 대괄호 표기법을 사용해야 한다.

obj.1 // SyntaxError
obj.name // ok
obj.'first-name' // SyntaxError
obj['first-name'] // ok

프로퍼티 삭제

delete 프로퍼티키

프로퍼티 갱신

const myself = {
  name: 'hahagarden',
  age: 28,
};
myself.age = 29;
/* { name: 'hahagarden', age: 29 } */

객체에 원래 있던 프로퍼티에 새로운 값으로 덮어쓸 수 있다.

프로퍼티 동적 생성

const myself = {
  name: 'hahagarden',
  age: 28,
};
myself.gender = 'female';
/* { name: 'hahagarden', age: 28, gender: 'female' } */

객체에 원래 있던 프로퍼티가 아니면 새로운 프로퍼티가 생성된다.

 

---

 

in 연산자

속성 in 객체명

속성이 객체에 존재하는지 여부를 boolean으로 반환한다.

 

---

 

for-in문

const animals={
    cat: '고양이',
      dog: '강아지',
};
for (let prop in animals) {
  console.log(prop + ':' + animals[prop])
}

객체의 프로퍼티 키를 순회하기 위한 문법이다. 배열순회는 for-of문이다.

 

---

 

객체 내장메서드

• Object.keys(obj)객체의 키 값들로 이루어진 배열을 반환한다.
• const animals={ cat: '고양이', dog: '강아지', }; console.log(Object.keys(animals)); // [ 'cat', 'dog' ]
• Object.values(obj)
• console.log(Object.values(animals)); // [ '고양이', '강아지' ]
• Object.assign(target, ...source)
  target(목표) 객체에 source(출처) 객체를 복사해서 붙여 넣는다. source 객체들이 반영된 target 객체를 반환한다.
• Object.is(value1, value2)
  value1과 value2 두 값이 같은지 비교한다. 비교연산자인 ===, ==과도 다르다. mdn에 따르면 특별한 경우가 있는데 알아두면 될 것 같다.

 

---

 

회고

객체 연습문제를 풀다가 객체의 길이를 구해야 했다. 놀랍게도 String과 Array에는 length 속성이 있는데 객체는 없다. 그래서 객체의 길이를 알기 위해서는 Object 객체 내장메서드를 사용한다.

const animals={
    cat: '고양이',
      dog: '강아지',
};
Object.keys(animals).length; // 2

페어프로그래밍으로 배열과 객체를 불태웠다. 슬슬 공부할 것이 많아지고 기초를 다지는 것이 중요해진다.