21.12.07 화 Js table

초록귤·2021년 12월 7일

filter, map 닌자코드 될 확률 높고, 못쓰는 경우도 있다.
for if else 조합으로 한 이유.

for(const iterator of data) {
if (iterator['gender']=='male') {
mail.push(iterator.age);
else {
female.push(iterator.age);
}
}

male.forEach(i => s+=i)
maleAverage = (s/male.length)

s=0;
female.forEach(i=> s+=i)
femaleAverage= (s/female.length)

function sortTable(key) {
if (click) {
click = false;
data.sort((a,b) => (a[key] <b[key] ? -1: (a[key]>b[key] ? 1:0)));
} else {

click => flag변수 
누를때마다 오름차순, 내림차순으로 동작하게끔.

renderTable(data)
데이터는 데이터를 직접 만진다..

차트그리기
1. chart.js. => 효율적(간단한 그래프)
2. d3 => 너무 고도화, 어렵다..
정해진 것대로 사용하기.
type: 정해진 정의대로 사용
borderwidth :

Js 테이블 랜더링 손글씨
( 에디터 도움없이 정확히 알고있나? 확인하기 위해 화이트보드 테스트 보는곳 많다(aws..))

수정하지않아야 할 변수 = const로 선언 ((실무))

map 은 새로운 배열로 반환
forEach는 반환값 없음 (undefined)

data.sort () >> 데이터 만진다.
정렬을 했으니까 다시 뿌린다! ( renderTable )

x =[1,2,3,4,5]
x = new Array(1,2,3,4,5)

-new object 객체 생성
new Map: key,value쌍
new Set: 중복 x

array.prototype.map() 과 Map은 다름

js sort 정렬

면접질문

프로퍼티 플래그는 상식 수준으로만.
getter(획득자)
setter(설정자)
fullName이라는 프로퍼티를 사용해 프로퍼티 값을 얻을 수 있다.
나머지 작업은 getter메서드가 뒷단에서 처리해준다. ![]
내가 어떤 값을 얻어낼 때 갖고오는 값.
set은 초기 설정값 .

getter메서드

* 변수이름 _시작 => 값 건드리지말아라! (암묵적 약속, 실제로 수정이 됨)

* 실제로 수정이 안되는 변수는 '#'이 붙는다

프로토 타입 ? =dna (유전자) 상속받은 객체
개발자가 특별히 할당하지 않더라도 모든 함수는 prototype 프로퍼티를 갖는다.
자바스크립트 객체는 명세서에서 명명한 prototype이라는 숨김 프로퍼티 갖는다. 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 된다.

null > Object.prototype> Array.prototype / Function.prototype / Number.prototype
부모 계속 타고 올라가서. 함수 이용
Array.protoType
(메서드를 가지고 있는 도구 주머니(집합))
기본 프로퍼티인 prototype은 constructor 프로퍼티 하나만 있는 객체를 가리키는데, 이 constructor 프로퍼티는 함수 자신 가리킨다.
(constructor: 자기자신, 부모와 연결해주는)
obj.toString === Object.prototype.toString (자기와 가까이 있는 것 사용) //true

proto ( native proto )
Prototype에 접근하기 위한 방법입니다. <호준쌤
비표준으로 시작했으나 지금은 표준에 부록에 실렸다.

대신 이 메서드들을 사용!

this 는 .앞에 있는 것 말함!

class : 찍어내는 공장(붕어빵 틀)

class 키워드 없이도 클래스 역할을 하는 함수 선언이 가능 but, syntax sugar(단순 편의문법)가 아닙니다.좀 더 엄격하게 강화된 문법.
오해하시면 xx.
최근 나왔기에 엄격모드로 실행된다.

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 사용법:
let user = new User("John");
user.sayHi();

constructor(인자) <-안쓰면 실행x

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 사용법:
let user = new User("John");
user.sayHi();

클래스는 {}안에서 , 를 붙히지 않는다.

instance : 찍혀져 나오는 생산품(붕어빵)

폴리필(충전솜) : 구브라우저 지원을 위해 문법 채워주는 것 -> ex) babel
- 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미
js에서는 오버로드x 오버라이딩

정적메서드

:)
내일
비동기 프로그래밍, 스택, 힙, callback hell, promise, async, await, 제발 좀 미리 읽자.