TIL4 - 객체 지향

(아래 글은 2022.02.17에 학습한 내용을 정리한 글입니다.)

오늘은 객체의 기초를 복습하면서 객체 지향 중 생성자와 new에 대한 내용을 공부했다.

No.1 객체 (복습)

객체란?

서로 연관된 데이터들을 같은 이름으로 그룹화하여 정리하는 것. 객체는 {}를 사용하는 객체 리터럴이나 new Object()를 사용하는 객체 생성자로 나뉜다. 객체 생성자는 단락 2번에서 다루겠다.

• 객체 리터럴
  중괄호 안에 key : value로 구성된 프로퍼티를 지정한다. 또는 key : function(){}으로 구성된 메소드를 생성한다. 중괄호 안을 비우는 것도 가능하다. 프로퍼티나 메소드를 구분하는 기호로 ,를 사용한다.
  name["key"] = value를 사용할 경우 key를 여러가지 단어나 코드의 형태로 구성할 수 있다.
  key를 선택할 경우 key만 가져온다.
  name.key 또는 변수[key]를 사용할 경우 key가 가진 value를 가져온다.
  name.key = "value"을 사용할 경우 해당 value를 가진 key를 프로퍼티로 추가할 수 있다.
  name.key = function(){}을 이용하면 해당 함수를 가진 key를 메소드로 추가할 수 있다.

• 객체와 반복문
  for...in문을 이용해서 객체 내의 프로퍼티를 반복적으로 출력할 수 있게 된다.

  let name = {a: 1, b: 2, c: 3};
  for(let key in name) {
  	console.log(`${key} : ${name[key]}`);
  }

  위와 같이 작성할 경우 name 객체 내에서 key : value를 차례대로 가져와 텍스트의 형태로 출력하게 된다.

  아래는 객체 안에 또 다른 객체를 추가하여 메소드와 분리한 상태로 프로퍼티를 지정한 코드이다.

  let score = {
  	'list' :  {a: 10, b: 6, c: 80},
  	'show' : function() {
  		for(let name in this.list){
  			console.log(`${name} : ${this.list[name]}`);
  		}
  	},
  };
  score.show();

  맨 아래의 코드로 함수를 호출하면 show 메소드가 socore 객체 안의 list 객체 내의 프로퍼티들을 불러와 for문을 실행하게 된다.

No.2 객체 지향

객체 지향

서로 연관되어 있는 변수와 메소드를 객체로 묶고, 서로 연관성이 없는 변수와 메소드를 따로 묶어서 분리하는 것.

• 생성자와 new
  생성자 : 객체를 만드는 역할을 하는 함수.

  다음은 함수를 호출할 때 함수의 앞에 new를 붙여 생성자로 만드는 과정이다. new를 붙이지 않을 경우 생성자가 아닌 일반적인 함수가 되기 때문에 주의해야 한다.

  function Person(){};
  let p = new Person();
  p.name = "a";
  p.hi = function(){
  	return 'Hi, '+this.name;
  }
  console.log(p.hi());

  허나, 위 코드를 이용할 경우 함수를 호출했을 때 생성자에 정의된 객체만 정의한 후 리턴하기 때문에 다른 생성자가 함수를 호출할 경우 객체를 반복해서 정의해야 한다.

  아래와 같이 수정하여 함수가 결과를 반환하도록 하고, 생성자가 함수를 호출할 때 대입할 값을 지정하여 아래와 같이 코드를 작성하면 호출한 함수가 객체를 정의한 후 이를 리턴할 수 있게 된다. 이로서 다른 프로퍼티와 메소드를 담을 객체가 필요할 때 객체를 반복해서 정의하는 수고를 덜게 되는 동시에 코드 또한 한결 깔끔해지는 것을 볼 수 있다.

  function Person(name) {
  	this.name = name;
  	this.hi = function() {
  		return 'Hi, '+this.name;
  	}
  };
  //
  let p1 = new Person('a');
  let p2 = new Person('b');
  //
  console.log(p1.hi());
  console.log(p2.hi());