본문 바로가기
JavaScript

20210111#(18) JavaScript Array(객체)

by zho 2021. 1. 11.

위 코드는 자바스크립트에서 객체를 만드는 2가지 방법이다.

객체란 서로 관련 있는 함수와 변수를 묶은 공간이다. 객체 안에서의 변수를 property, 함수를 method라고 칭한다.

 

이때 만약 다른사람을 추가하게 된다면 객체의 정의가 중복될 것이다. ex) jiho, navy가 있으면

 

const person1 = {

'name' : 'jiho',

'info' : function(){

     return 'My name is ' + this.name;

  }

}

document.write(person.info());

 

const person2 = {

'name' : 'navy',

'info' : function(){

     return 'My name is ' + this.name;

  }

}

document.write(person.info());

 

위와같이 정의가 중복이 되는데, 이는 코드도 길어지고 보기에도 지저분하다. 객체의 구조를 재활용할 방법이 필요한데, 이때 사용하는 것이 생성자(Constructor)이다.

 

생성자는 객체를 만드는 역할을 하는 함수이다. 다음 예시를 보자.

함수를 호출할 때 new 를 붙이면 새로운 객체를 만든 후 리턴한다. 위 코드를 설명하자면 새로운 객체를 p1, p2에 담았다고 보면 된다. 하지만 생성자를 이용해도 여전히 info = function(){ return 'My name is' + this.name;} 은 중복이 된다...

 

생성자에서 이 객체의 변수 즉 프로퍼티를(jiho, navy) 정의하고 있는걸 볼 수 있다. 이를 초기화라고 한다.

중복되는 코드없이 깔끔한 코드가 됐음을 볼 수 있다. 참고로 생성자 함수는 일반 함수와 비교하기 위해 첫 글자를 대문자로 표시한다. (생활코딩 생성자와 new https://opentutorials.org/course/743/6570)

객체가 늘어날 수록 이러한 구조는 더욱 유용할 것이다.

 

끄ㅡ읕

728x90