자바스크립트 기초

Console 객체

콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공한다. 동작 방식은 각 브라우저마다 다르지만 사실상 표준으로 여겨지는 기능도 여럿있다.

console 객체는 아무 전역 객체에서나 접근할 수 있다.

호이스팅

로컬 범위의 맨 위로 끌어올려지는 것을 의미한다. var 선언은 undefined가 할당 되지만 let, const 선언은 할당이 되지 않는다.

Window 객체 및 DOM

window 객체는 브라우저에 의해 생성된다.

DOM

문서 객체 모델은 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 html 페이지를 인식하게 해준다.브라우저가 트리구조로 만든 객체 모델을 의미한다.

dom api를 통해서 dom을 조작할 수 있다.

브라우저가 만든 document 객체는 쿼리셀렉터 같은 메소드를 제공한다.

Intersection observer

브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는 지 안되는지 구별하는 기능을 제공

비동기로 발생하는데 scroll같은 이벤트 기반 요소 관찰에서 발생하는 렌더링을 성능이나 이벤트 연속 호출 같은 문제없이 사용한다.

Pure Function

함수형 프로그래밍 패러다임의 한 부분

같은 입력값이 주어졌을 때 같은 값을 리턴하고 사이드 이펙트를 만들지 않는 함수

사용 이유

1. 클린 코드를 위해

2. 테스트를 쉽게 하기 위해

3. 디버그를 쉽게 하기 위해

4. 독립적인 코드를 위해 (Decoupled, Independent)

다른 함수에 미치는 영향을 최소화 하고 어떤 결과값을 리턴하는지 알게된다.

커링(Currying Function)

js가 아닌 다른 언어에도 존재하는 기술

f(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것

커링은 함수를 호출하는 것이 아닌 변환하는 것이다.

const sum = (x,y) => x + y;
​
const curriedSum = x => y => x + y;
​
console.log(sum(10,20))
console.log(curriedSum(10)(20))

const makeFood = (ingredient1) => {
  return (ingredient2) => {
    return (ingredient3) => {
     return `${ingredient1} ${ingredient2} ${ingredient3}` 
    }
  }
}

function log(date, importace, mesage) {
  alert(`[${date.getHours()} ${date.getMinutes()} ${importance} ${message}]`)
}

function curry(f) {
  return function (a) {
    return function (b) {
      return function (c) {
        return f(a,b,c)
      }
    }
  }
}
​
const curriedLog = curry(log)
curriedLog(new Date())("DEBUG")("some bud")

function curry (func) {
  return function curried(...args) {
    if (args.length > )
  }
}

strict mode

제한된 버전을 선택하여 암묵적인 느슨한 모드를 해제하기 위한 방법이다.

1. 엄격 모드는 무시되던 에러를 발생시킨다.

2. 최적화된 작업을 어렵게 만드는 실수들을 바로 잡는다.

"use strict"

<script src="./script" type="module"></script>

OOP

객체지향 프로그래밍은 여러 개의 독립된 단위 "객체"들의 모임으로 컴퓨터 프로그램을 파악한다.

하나의 문제 해결을 위한 독립 단위인 객체로 만들었으며 객체로 알아보기 쉽고 재사용성이 높은 코드를 작성한다.

1. 자료 추상화

   자료 추상화는 불필요한 정보를 숨기고 중요한 정보를 표현하여 프로그램을 간단하게 만드는 것이다.

2. 상속

   새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게 하는 기능이다.

3. 다형성

   한 요소에 여러 개념을 넣어 놓는 것

   같은 메서드라도 인스턴스에 따라 다양한 기능을 수행할 수 있는 것

4. 캡슐화

   클래스 안에서 관련 메서드 변수 등을 하나로 묶는 것

    

javascript prototype

let user = {
  name : "john",
  age : 45
}
console.log(user.hasOwnProperty("age"))

정의하지 않은 메서드는 어디에서 생기는 걸까?

프로토 타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말한다. 이를 프로토타입 체인 (prototype chain)이라고 한다.

이로 인해 더 적은 메모리를 사용할 수 있고 코드를 재사용 할 수 있다.

ES6 Classes

class를 통해 OOP를 구현할 수 있다.

실제 내부에서는 prototype을 사용하여 작동된다.

constructor는 인스턴스 생성과 필드의 생성과 초기화를 의미한다.

this는 클래스가 생서알 인스턴스

constructor는 new에 의해 자동으로 호출된다.

static은 인스턴스 메서드가 아닌 독립적으로 사용되는

Sub Class(Inheritance)

슈퍼클래스의 속성을 서브 클래스에서 확장하여 사용할 수 있다.

class parentClass {
  
}
class childClass extends parentClass {
  constructor () {
    super()
  }  
}
​

super()

인스턴스화된 객체에서 다른 메서드를 호출하기 전에 주행해야 하는 사용자 지정 초기화를 제공

super 키워드는 자식 클래스 내에서 부모 생성자를 호출할 때 사용된다.

소감

기본적인 js 문법 보다는 oop 개념과 제가 몰랐던거 위주로 학습하였습니다.