what is components?

캡슐화를 통하여 재사용이 가능한 독립된 모듈
index.html에서 스크립트 태그로 자바스크립트를 연결할때 type = "module"을 꼭 붙여줘야 한다!

components는

• render()를 통해 HTML요소를 반환하는 함수
• 독립적이고, 재사용이 가능한 작은 UI 조각
• javaScript 함수와 동일한 용도로 사용
  => 재사용도 쉽고, 효율적으로 관리 가능하다.

export

export let ex1;
export { ex1, ex2, ex3 };
export{ ex1 as a };
export function example() {}
export default function example(){}//다른거랑 같이 사용할 수 있지만 default는 하나만 있어야함

함수, 객체, 원시 값을 내보냄
다른 파일에서 import로 가져올 수 있음
default(기본값)는 한번만 사용 가능

default export는 한 파일 당 한 번만 사용 가능하며, import 할 때 이름을 자유롭게 사용할 수 있습니다.
named export는 한 파일에서 여러 개를 export할 때 사용 가능하며, import 할 때와 export 할 때의 이름이 동일해야 합니다.

import

import { ex1 } from "filename";
import { ex1, ex2, ex3 } from "filename";
import { ex1 as a } from "filename";
import * as ex from "filename";

import ex4 from "filename";
//default로 내보낸 것을 받아올때 사용, ex4의 이름은 마음대로 지정 가능!

다른 모듈에서 내보낸 것을 가져올 때 사용
*을 사용하여 내보내진 모든 값을 가져올 수 있음

Arrow function

function original (name) {
  return`Hi, ${name}`;}

const hello = (name) => {return `Hi, ${name}`}
//return 한 줄만 있으면 생략가능
namd => `Hi, ${name}`

기존의 함수를 간단하게 사용가능하지만 몇가지 제한점이 존재한다.

• this값이 바인딩되지 않음
• 생성자를 사용할 수 없음

Truthy / Falsy

let falsy = [
  false, 0, -0, On, "", null, undefined, NaN
];

Boolean이 필요할 때, 어떻게 판단하는지 정의된 값들이 있음
Truthy는 Falsy가 아닌 모든 값임!!

객체

//객체 리터럴
const person = {
  name:"john",
  age:24,
  gender: "male"
}

객체는 데이터와 함수의 집합
값을 가진 것을 프로퍼티(property)
함수를 가진 것은 메소드(method)

객체와 const

const person = {
  name:"john",
  age:30
}

person.name = "Bob";	//가능

person = {
  name:"Bob",
  age:30
}	//불가능!!

const newPerson = person;

newPerson.name = "newPerson";
console.log(newPerson.name); // newPerson
console.log(person.name); //newPerson

object가 복사되는 것이 아닌 주소가 복사되는 것이기 때문에 person의 값도 바뀜!!

const deepCopyPerson = JSON.parse(JSON.stringify(person));
deepCopyPerson.name = "deepCopyPerson";
console.log(deepCopyPerson.name);//deepCopyPerson
console.log(person.name);//newPerson

JSON.stringify(): 객체를 string으로 변환
JSON.parse(): 새로운 메모리 할당

rest / spread

const arr = [1, 2, 3];
let newArr = [...arr, 4, 5]; //spread 사용
let [first, ...rest] = newArr;///rest(나머지를 받음) 사용
	console.log(rest);//[2, 3, 4, 5]

반복 가능한 객체를 여러개 요소로 펼치거나(spread) 모아주는(rest) 방법
배열 혹은 객체 리터럴에서 사용 가능
깊은 복사 불가능!

class

class Person{ //예약어 앞글자는 대문자로 쓰는 것이 좋다
  name;//속성
  age;
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getName() {
    return this.name;
  }
}

객체를 생성하기 위한 템플릿
constructor : 생성된 객체를 초기화하기 위한 특수한 함수(생성자, 예약어)

let john = new Person("John", 32);
let bob = new Person("Bob", 23);

john.getName();// print "John"
bob.getName();// print "Bob"

new로 클래스를 호출하여 새로운 객체가 만들어짐!

ex
클래스: 레시피
인스턴스: 레시피로 만들어진 요리

같은 클래스로 만들어진 인스턴스는 모두 같은 프로퍼티와 메소드를 가짐.

상속

//객체를 생성하기 위한 템플릿
class User extends Person {
  level;
  
  constructor(name, age, level) {
    super(name, age);
    this.level = level;
  }
  getLevel() {
    return this.level;
  }

부모의 속성을 모두 가지고 올 수 있음
즉, Person + User 가 되는 개념

super는 부모의 생성자 호출
(부모의 생성자 호출은 자식 생성자(constructor 내에서만)에서만 호출 가능!)

class를 점차 더 강력하게 만들어줌
복잡한 코드를 간소화할 수 있음

class = 객체가 아닙니다.
this = 자기 객체 가리키는 것