내장객체

자바스크립트의 내장객체 아래 사이트에 잘 정리되어 있다
내장객체 목록

new 생성자

new 생성자를 통해서 새로운 객체를 만들어 낼 수 있다

function User(name,age){
  this.name = name,
  this.age = age
}


const a = new User('park' , 20)

a = {
name = 'park',
age = 20
}

excute context

자바스크립트 코드가 실행되는 환경을 의미한다
환경에는 global,local 등 다양한 환경이 존재한다

전역 실행 컨텍스트

실행 컨텍스트의 기본이다, 함수 밖에 있는 코드는 전역 실행 컨텍스트에 있다.
브라우저의 경우 window 객체를 생성하여 이를 글로벌 객체로 설정한다.
프로그램에는 오직 한개의 전역 실행 컨텍스트만 있을 수 있다

함수 실행 컨텍스트

함수가 실행될 떄마다 해당 함수에 대한 새로운 실행 컨텍스트가 만들어진다.
각 함수는 고유의 실행 컨텍스트를 갖지만, 함수가 실행되거나 call될 떄만 생성된다.
함수 실행 컨텍스트의 수는 제한이 없다.

Call stack

자바스크립트는 단일 스레드 프로그래밍 언어이므로
한 번에 하나의 일만 처리가능하는 말입니다.

function multifly(x,y){
	return x * y
}
function printSquare(x){
	const s = multifly(x,x);
    console.log(s)
}
printSquare(3)

해당 코드를 실행 시
함수 printSquare가 먼저 콜스택에 오르고
그다음 multifly가 오른 뒤 함수는 종료되었기 떄문에
삭제 후에 printSquare에있는 conosole.log함수가 다시 콜스택에 오른 뒤
실행을 마치면 console.log가 없어진 뒤 마지막 printSquare 까지 콜스택에서 사라집니다.

stack Overflow

함수 호출 수가 호출 스택의 실제 크기를 초과하게 되면 오류를 발생하고 함수를 종료시킵니다.

closure

함수 안에서 다른 자식 함수를 선언하는 형태
자식 함수에서 부모 함수의 변수에 접근할 수 있어
전역(global)변수를 줄이고 코드 재사용을 높일 수 있다

callback

함수가 온전히 실행된 뒤, 실행되는 함수
자바스크립트의 이벤트 응답 체계를 명확히 하기 위해 필요하다

function add(x, y) {
  return x + y;
}

function result(value) {
  console.log(value);
}

result(add(1, 2));

해당 코드를 콜백함수로 바꾸게 되면

function add(x, y, callback) {
  callback(x + y);
}

function result(value) {
  console.log(value);
}

add(1, 2, result);

값은 같지만 실행 되는 순서나 동작순서가 달라진다
내가 의도한 대로 함수를 순차적으로 호출 할 수있다

callback 지옥

자바스크립트는 순차적으로 코드를 실행 시켜주지않아
순차적으로 값을 불러와 호출 되는 상황이 필요할 때 이러한 상황이 발생한다

Promise

자바스크립트 비동기 처리에 사용되는 객체
비동기 처리란 '특정 코드의 실행이 완료 될떄까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미

  const getJson = (url) => {
    return new Promise((resolve,reject) => {
      fetch(url)
        .then((res) => {
          resolve(res)
        })
        .catch(reject(err))
    })
  }

getJson이라는 함수에서 Promise를 리턴해주는데
fetch를 사용해서 데이터를 가져오는데 성공한다면 resolve에 res를 담고 실패한다면 reject에 err를 담는다

getJson()실행후 getJson.then || .catch로
then은 성공적으로 수행이 되었을 떄의 값을 가져오고
catch는 실패했을 떄 값을 가져 온다

Promise로 콜백 지옥을 탈출 할 수 있다

getJson("jsondata/pikachu.json")
  .then((result) => {
    console.log("promise 1:" + result);
    return getJson("jsondata/muslemon.json"); // 리턴으로 다른 주소값을 넣었을 떄 response를  그 다음 then문에서 사용할 수 있다
  })
  .then((result) => {
    console.log("promise 2:" + result);
    return getJson("jsondata/jamanbo.json");
  })
  .then((result) => {
    console.log("promise 3:" + result);
  })
  .catch((err) => {
    console.log("rejectd" + err);
  });

async/await

async/await 문법을 사용하면 Promise를 보다 쉽고 효율적으로 사용할 수 있다.
async 함수는 기본적으로 promise를 반환한다는 것을 기억해야한다.
await 키워드는 반드시 async 함수 안에서만 사용해야 한다.
async밖에서 에러를 .catch로 잡을 수도 있지만
async안에서 try-catch구문으로 비동기 코드 에러 처리가 가능하다.

async fucntion myFunc(){  //함수 선언식
	await delay(1000) // 1초동안 실행 되는 함수가 실행완료까지 기다려라
}

const myFunc = async function(){ // 함수 표현식
	await delay(1000) // 1초동안 실행 되는 함수가 실행완료까지 기다려라
}

const myFunc = async () =>{  //화살표 함수
	await delay(1000) // 1초동안 실행 되는 함수가 실행완료까지 기다려라
}

간단한 async/await 예제

async function myFunc() {
  await test(1000);  //살행이 끝날 떄 까지 기다림
  console.log(1);  await로 선언하지않으면 기본값으로 promise.resolve()로 실행
  console.log(2);
  await test(1000); 
  console.log(3);
  console.log(4);
}

function test(ms) {  프로미스를 반환 하는 함수이고 입력값만큼 기다렸다가 resolve()실행
  return new Promise((resolve) => setTimeout(resolve, ms));
}

myFunc();

Fetch

function transColor(e){
    e.preventDefault()
    const color = inputcolor.value

    fetch('data.json')
    .then(res => res.json())
    .then(datas => {
        const foundData = datas.find(data => data.color === color)
        hexaElem.innerHTML = foundData.value
    })
    
}

const sub = document.querySelector("#buttonSubmit")
const hexaElem = document.querySelector('#hexaCode')
const inputcolor = document.querySelector('#inputColor')



sub.addEventListener('click', transColor)

data.json이라는 파일을 fetch로 불러와서
then(res => res.json()) 고정적으로 해줘야 하는 부분이라고 하는데 json파일만을 가져오기 위해 하는 작업인거같다
여기까지 실행이 되었다면 datas에 받고 foundData라는 변수에 datas.find라는 함수를 사용해서 인풋 창에있던 value값과 같은 value를 가진 객체를 반환 하여 foundData에 저장한다
그리고 hexaelem.innerHTML에 찾은 foundData의 color색상이 들어있는 foundData.value의 값을 넣어준다

Axios

Axios라는 라이브러리를 사용해서 fetch보다 더 간결하게 표현 할 수 있다

const sendHttpRequest = (method, url, data) => {
  return fetch(url, {
    method: method,
    body: JSON.stringify(data),
    headers: data ? { "Content-Type": "application/json" } : {},
  }).then((response) => {
    if (response.status >= 400) {
      return response.json().then((err) => {
        const error = new Error("Network Error");
        throw error;
      });
    }
    return response.json();
  });
};
const getData = () => {
  sendHttpRequest("GET", "https://reqres.in/api/user").then((result) => {
    console.log(result);
  });
};
const sendData = () => {
  sendHttpRequest("POST", "https://reqres.in/api/register", {
    email: "eve.holt@reqres.in",
    password: 'pistol',
  })
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });
};

위는 fetch를 이용해서 get방식과 post방식을 표현한 것

const getData = () => {
  axios.get("https://reqres.in/api/user").then((res) => {
    console.log(res);
  });
};
const sendData = () => {
  axios.post("https://reqres.in/api/register", {
    email: "eve.holt@reqres.in",
    password: "pistol",
  },
  {
    headers:{
        'Content-Type': 'application/json'
    }
  }).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(error)
  })
};

위는 Axios를 사용해서 표현 한 것
훨씬 간결한 것을 알 수 있다

This

let i = {
    name: 'diela',
    f1: () => {
        console.log(this)
    },
    f2:function(){
        console.log(this)
    }
}

화살표 함수 사용시 this는 함수가 생성된 환경을 가리키도록 고정된다
F2는 일반 함수로 this는 함수를 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
F2는 객체의 메서드로 호출될 때 객체가 this로 할당된다
하지만 setTimeout으로 두개의 함수를 호출 했을 때 둘 다 this는 global를 가리킨다
setTimeout은 콜백함수이기 떄문이다
this를 변경하기위해 bind라는 것을 활용해서 this가 가리키는 값을 지정해 줄 수 있다

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const a = module.getX;
console.log(a());  // undefined

const b = a.bind(module);
console.log(b()); // 42

a라는 변수에는 module에있는 getX라는 함수를 집어 넣어서 실행을 시키는데 실행을 시킬때의 this는 a를 가리키기 때문에 x의 값을 찾을 수 없어 undefined가 나오게 되고
b변수에는 bind를 사용해서 this가 module를 가리키게 하여 실행을 시켰을 때 module에있는 X값을 출력하게 되어
42라는 숫자가 출력된다