HTML

async, defer

• async - html파싱을 하다가 script를 만나면 script를 비동기로 다운하고 계속 html을 파싱
  async 를 다운이 완료되면 html파싱을 멈추고 script실행
• defer - 중간에 script가 있으면 비동기로 다운로드를 진행하고 html 파싱을 끝낸 후 script 실행

async = 다운로드 병렬, 실행 순서가 보장되지 않음
defer = 다운로드 병렬, 실행 순서 보장

하지만 현재에는 인터넷 속도가 빨라져 두 가지 다 같은 결과를 보여줄 확률이 큼

JavaScript

연산자

==

• 데이터가 같으면 참 (자료형 검사 하지 않음)

const a = "1";
const b = 1;
a == b // true;

===

• 데이터와 자료형이 같으면 참 (자료형 까지 비교)

const a = "1";
const b = 1;
a === b // false;

var, let, const

var

• 변수 중복 선언 가능
• 호이스팅이 변수 초기화까지 이루어짐
• 함수 스코프 -> if문 안에서 선언해도 함수 내에서 접근 가능
• 전역객체 global or window의 속성을 가짐
• 키워드를 생략할 시 암묵적 전역변수로 선언 됨

let

• 변수 중복 선언 불가능
• 호이스팅이 할당까지는 이루어 지지만 초기화는 안이루어짐
• 블록 스코프를 가짐
• 재할당 가능

const

• 변수 중복선언 불가능
• 호이스팅이 할당까지는 이루어 지지만 초기화는 안이루어짐 선언 시 초기화가 필수적
• 블록 스코프를 가짐
• 변수를 변경할 수 없음

함수

함수표현식

const speak = function sum(){
  console.log("함수 표현식 입니다");
  sum(); // 재귀적 호출
}
speak(); // 함수 호출

const speak = function(){
  console.log("함수 표현식 입니다");
}
speak(); // 함수 호출

• 함수표현식에서 function 이름을 정한다면 함수 내부에서 선언할 수 있음.
• 호이스팅이 이루어지지 않아서 react, next.js에서 많이 사용.

함수선언식

function speak() {
  console.log("함수 선언식 입니다");
}
speak(); //함수 호출

• 호이스팅 돼서 최상단으로 끌어올려짐.
• 호이스팅으로 인해 예측하지 못한 동작이 이루어질 수 있어, 기피하는 방식

화살표 함수

function speak = () => {
  console.log("화살표 함수 입니다");
}
speak(); //함수 호출

new function

Prototype

function Shape(width, height) {
  this.width = width;
  this.height = height;
}

Shape.prototype.getArea = function () {
  console.log("i'm shape");
  return this.width * this.height;
};


const rect1 = new Shape(10, 20);

console.log(rect1.__proto__);
console.log(rect1.__proto__.getArea()); // NAN
console.log(rect1.getArea()); // 200 10 * 20

__proto__생략해도 getArea()는 접근 가능
prototype는 생략하게 되면 Shape 객체 자체에 추가되기 때문에 생략하지 않아야 함

Prototype

• function 객체만 가지고 있는 프로퍼티
• 해당 함수를 통해 생성된 객체의 프로토타입 객체를 가리킴
• 생성자 함수의 prototype 프로퍼티를 수정하면, 그 함수로 생성된 모든 객체의 프로토타입이 변경 됨
• 프로토타입 기반 상속을 구현할 때 중요한 역할을 함

__proto__

• 모든 객체가 가지고 있는 내부 슬롯(internal slot)
• 객체의 프로토타입을 가리키는 숨겨진 프로퍼티
• __proto__ 접근자 프로퍼티를 통해 접근할 수 있음
• 직접 수정하는 것은 권장되지 않으며, 객체의 프로토타입 상속 관계를 나타냄

Class

// 클래스 문법
// 클래스는 class 키워드를 사용해서 선언
// 클래스는 내부에 constructor메소드를 가지고 있음
class order{
  constructor(color){
    this.color = color;   
  }
  getColor(){
  return this.color;
  }
}
const shape1 = new Shape("blue");
console.dir(shape1);
console.log(shape1.getColor());

// 상속
// extends키워드로 상속을 진행

class Rectangle extends Shape{
}

내장 객체

배열 내장 객체

.sort