✔️ 객체

• 배열은 어떤 값들이 순서가 가지도록 저장하는 구조
• 객체는 순서 없이 값들을 저장할 수 있는 구조

👉🏻 객체의 각 요소들은 key(이름)와 value(값)로 구성되어 있다.

var cowokers ={
	"programmer" : "myName"
    	"designer" : "yourName"
};
//key에 띄어쓰기가 들어갈 경우 []를 사용해야함
document.write(coworker.programmer)
document.write(coworkers["programmer"])

//요소 추가
coworkers.bookkeeper = "someone";
document.write(coworkers.bookkeeper)

👉🏻 객체의 순회

for(var key in coworkers) {
  document.write(key+'<br>') //key
  document.write(coworkers[key]+'<br>') //value
}

👉🏻 메서드

coworkers.showAll= function(){
  for(var key in this){
    document.write(key + ' : ' + this[key]+'<br>');
   	if(key==="showAll"){break;}
  }
 
 coworkers.showAll();

• 객체에 해당하는 함수들을 메서드라고 부른다.
• 객체에 해당하는 변수들은 프로퍼티(property)라고 한다.

프로퍼티는 객체를 위해 데이터를 저장한다. 메소드는 객체가 요청받을 수 있는 액션이다.

👉🏻 new 연산자와 생성자 함수

생성자 함수(constructor function)

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;
  //메서드를 추가함
  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };

  // return this;  (this가 암시적으로 반환됨)
}
let user = new User("보라");
//===
let user = {
  name: "보라",
  isAdmin: false
};

bora.sayHi(); // 내 이름은 이보라입니다.

• 생성자의 의의 : 재사용할 수 있는 객체 생성 코드를 구현하는 것.
• 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.

👉🏻 new Function 문법

let func = new function ([arg1, arg2, ... argN], functionBody);

새로 만들어질 함수는 인수 arg1...argN과 함수 본문 functionBody로 구성된다.

//인수 두 개가 있는 함수
let sum = new Function('a','b','return a+b');
alert (sum(1,2)); //3

// 인수가 없는 함수
let sayHi = new Function('alert("Hello")');
sayHi(); //Hello

new Function을 사용하면 서버에서 전달받은 문자열을 이용해 새로운 함수를 만들고 이를 실행하는 것도 가능하다.

👉🏻 옵셔널 체이닝 '?.'

✔️ 객체지향 Javascript(OOJS)

MDN의 문서를 통해 OOJS에 대해 살펴보겠다.

객체는 우리가 모델링하고자 하는 일이나 기능 혹은 필요한 행동들을 표현하는 프로그램 코드와 연관 데이터로 구성된다. 객체는 데이터(함수 포함)를 감싸서(encapsulate) 객체 패키지(namespace)안에 보관한다. 객체는 네트워크를 통해 쉽게 전송될 수 있도록 데이터를 저장하는 용도로도 많이 사용된다.

👉🏻 클래스

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

• 클래스를 만든 후, new MyClass()를 호출하면 내부에서 정의한 메서드가 들어있는 객체가 생성된다.
• 객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화할 수 있다.
• 클래스는 함수이고, 정확히 말하면 생성자 메서드이다. 클래스 내부에서 정의한 메서드는 className.prototype에 저장된다.
• 클래스로부터 객체의 인스턴스가 생성될 때는 클래스의 생성자 함수가 호출된다. 클래스에서 객체 인스턴스가 생성되는 과정을 인스턴스화(instantiation)라고 한다.

✔️ 객체 프로퍼티 설정

👉🏻 프로퍼티 플래그

객체 프로퍼티는 값(value)와 함께 플래그(flag)라는 특별한 속성 세 가지를 갖는다.

• writable – true이면 값을 수정할 수 있다. 그렇지 않다면 읽기만 가능하다.
• enumerable – true이면 반복문을 사용해 나열할 수 있다. 그렇지 않다면 반복문을 사용해 나열할 수 없다.
• configurable – true이면 프로퍼티 삭제나 플래그 수정이 가능하다. 그렇지 않다면 프로퍼티 삭제와 플래그 수정이 불가능하다.

👉🏻 프로퍼티 getter와 setter

객체의 프로퍼티는 두 종류로 나누어진다.

• 데이터 프로퍼티 : 지금까지 살펴본 모든 프로퍼티
• 접근자 프로퍼티 : 값을 획득(get)하고 설정(set)하는 역할을 맡는 함수.

getter(획득자)와 setter(설정자)

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};