[12.07] TIL

오늘은 손코딩을 통해 데이터를 렌더링하는 방법을 알아보았다.

그 전에 관련 메서드에 대해 알아보자.

filter 메서드

필터는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const fruits = ['apple', 'banana', 'coconut', 'mango']; 
const result = fruits.filter(word => word.length > 5);
//['banana', 'coconut']
//5글자 이상의 과일의 이름만 필터링 함 

map 메서드

맵은 배열의 값을 뽑아 새로운 배열로 반환해준다.

let fruits = ['apple', 'banana', 'coconut', 'mango']; 
fruits.map(value => value + 'yum');
//['appleyum', 'bananayum', 'coconutyum', 'mangoyum'] 출력

프로퍼티 property

프로퍼티는 객체 안에 만들어지는, 키와 값을 가진 것이다.
프로퍼티는 '플래그'라고 불리우는, 다음과 같은 속성 세가지를 가진다:

• writable : 값이 true라면 수정이 가능하다. false라면 읽기 전용!
• enumerable : true라면 반복문 사용하여 나열가능하다.
• configurable : true라면 생성과 삭제가 가능하다.

플래그를 확인하는 방법과 변경하는 방법은 다음과 같다.

let colors = {
  name : "red", 
} 

//플래그 확인하는 방법 
let desc = Object.getOwnPropertyDescriptor(colors, 'name');  
// {value: 'red', writable: true, enumerable: true, configurable: true} 
//위와 같은 값이 출력되어 true인지 확인 가능하다 

//프로퍼티를 추가하는 방법 
Object.defineProperty(colors, "use", {
  value: "paint"
});
//{name: 'red', use: 'paint'} 키와 값이 들어간다 

writable의 값을 변경해보자

Object.defineProperty(colors, "name", {
  writable: false
});
//{value: 'red', writable: false, enumerable: true, configurable: true} false가 되었다. 엄격모드에서 error가 발생한다. 

enumerable의 값을 변경해보자

let fruit = {
  name: "apple",
  toString() {
    return this.name;
  }
};
for (let key in fruit) alert(key); // name, toString 출력 

Object.defineProperty(fruit, "toString", {
  enumerable: false
});

for (let key in fruit) alert(key);//toString은 출력이 안됨 

configurable

configurable이 false면 객체에서 제거가 불가능하다.

Object.defineProperty(fruit, "name", { 
  configurable: false
});
delete fruit.name; // false값을 반환한다 

getter 와 setter (get / set)

게터와 세터의 본질은 함수로 접근자 프로퍼티이다. 획득자와 설정자이다.

let person = {
  name: "June",
  surname: "Park",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};
alert(person.fullName);

프로토타입

프로토타입은 상속 받은 객체 즉 유전자와 같은 것 이다.

//__proto__  는 [[prototype]]에 접근하기 위한 방법이다 
// 비표준으로 시작했으나 지금은 표준의 부록에 실림 


function 사람(이름, 나이) {
  this.이름 = 이름; 
  this.나이 = 나이; 
} 
let 영희 = new 사람('영희', 10); 
let 철수 = new 사람('철수', 11); 

사람.prototype; 
사람.prototype.수명=100;
영희.수명; //100 출력 가능 

Class

클래스는 공장 또는 붕어빵틀 / 인스턴스는 생산품! 또는 붕어빵!

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

클래스는 syntactic sugar(편의 문법)의 플러스 알파이다.