[JS] Object(객체)와 생성자 함수

본 포스팅은 유튜브 코딩앙마 님의
"자바스크립트 중급 강좌 : 140분 완성" 을 듣고 정리한 개인 공부글입니다.

객체 (Object)

연관된 property(속성)를 갖는 데이터들을 묶어서 저장하는 구조.

array가 같은 속성을 갖는 데이터들을 나열하는 구조라면, object는 서로 다른 속성들을 하나의 그룹으로 묶어서 정리한다.

 

자바스크립트를 쓰다보면 익숙해질 수밖에 없는 자료구조!

 

객체는 일반적으로 중괄호 `{ }` 를 사용하여 선언하는데, 이러한 객체 생성 방식을 객체 리터럴이라 부른다.

// 객체 리터럴 방식으로 객체 선언
const object = {
	prop1: value1,
	prop2: value2,
};

 

객체 내부의 속성 값은 두 가지 방식으로 접근이 가능하다.

 

첫째로 dot(`.`) 연산자를 사용해서 객체 내부로 들어갈 수 있으며,

둘째로 대괄호`[]`와 프로퍼티 key를 사용해서 접근할 수도 있다.

// 예시: 게임 플레이어 객체 생성
const player = {
	name: "mango",  // player의 이름 속성
	points: 10,    // player의 점수 속성
	life: 3,       // player의 수명 속성
};

// 객체를 통째로 불러오기
console.log(player);

// 객체의 각 속성들만 불러오기 (각각 접근 가능)
console.log(player.name); // 접근 방법 1
console.log(player["name"]); // 접근 방법 2

 

또한, 기존 프로퍼티 값을 새로운 값으로 바꾸거나 객체에 새로운 속성을 추가하는 작업도 가능하다.

// 객체 내 속성값 변경하기
player.points = 50; // 기존 속성의 value를 재할당(업데이트)

// 객체에 속성 추가하기
player.damage = 15; // 새로운 속성 damage 추가

 

객체 내부에 프로퍼티 존재 여부를 확인하기 위해서는 `in` 연산자를 사용할 수 있다.

const player = {
	name: "mango",  // player의 이름 속성
	points: 10,    // player의 점수 속성
	life: 3,       // player의 수명 속성
};

console.log('name' in player); // --> true
console.log('damage' in player); // --> false

// 없는 프로퍼티를 dot 연산자로 가져오면 undefined가 반환된다.
console.log(player.damage); // --> undefined

 

같은 맥락으로 객체를 순회하는 `for ... in` 반복문을 통해서 객체의 key 값을 하나하나 불러올 수 있다.

for(let key in player){
	console.log(key);           // name, points, life 
	console.log(player[key]);   // mango, 10, 3
}

 

객체 내에서 함수를 선언해주면 객체가 기능할 수 있는 메소드를 선언할 수 있다.

const calculator = {
  add: function (a, b) {
    console.log(a + b);
  },
  sub: function (a, b) {
    console.log(a - b);
  },
  mul: function (a, b) {
    console.log(a * b);
  },
  div: function (a, b) {
    console.log(a / b);
  },
};

// calculater 객체의 객체 메소드 실행
calculator.add(3, 8);
calculator.mul(15, 4);
calculator.div(50, 3);

💥 객체의 property-value 관계는 파이썬 딕셔너리의 key-value 관계와 유사하다.

💥 위 예시에서 객체 내 property를 수정하는 것은 가능하지만, 이미 선언된 object 자체를 변경할 수는 없다.

생성자 함수

비슷한 객체를 여러 개 만들어야 하는 경우에 사용하는 객체 생성 방식

// 생성자 함수
function User(name, age){
	this.name = name; // this(생성하는 객체)의 name 속성 값을 argument로 받아온 name으로 설정
    	this.age = age;
}

// 함수 호출 => user1이라는 객체 생성
let user1 = new User("mankkong", 25);

생성자 함수 이름의 첫 글자는 대문자로 설정한다.

함수 내부에서는 파이썬 문법의 `self` 대신 `this`를 사용한다. → `this`의 프로퍼티로 값이나 메소드를 저장

 

`new` 연산자를 사용해서 생성자 함수를 호출할 수 있다.

• ex) `new FuncName(param1, param2, …)`
  • → this라는 이름의 빈 객체 생성
  • → this 객체의 프로퍼티에 argument로 들어온 값 / 함수를 저장
  • → this를 반환