알아야 할 JavaScript 개념

오늘날 인터넷에서 널리 사용되는 언어 중 하나인 JavaScript는 전 세계 수백만 개의 웹페이지에서 JavaScript를 사용하고 있습니다.

프로젝트에서 유용할 수 있는 JavaScript의 몇 가지 기본 개념에 대해 논의해 보겠습니다.

범위

범위는 변수, 개체 및 함수의 액세스 가능성을 결정합니다. 즉, 현재 실행 컨텍스트입니다. 값과 표현식이 "표시"되거나 ​​참조될 수 있는 컨텍스트입니다. 변수 또는 기타 표현식이 "현재 범위에"있지 않으면 사용할 수 없습니다. JS에는 3가지 유형의 범위가 있습니다.

블록 범위

기능 범위

전역 범위

폐쇄

클로저는 주변 상태에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 외부 함수가 반환된 후에도 내부 함수가 항상 외부 함수의 변수에 액세스할 수 있음을 의미합니다.

function init() {
var name = 'Dev'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();

콜백

콜백 함수는 다른 함수에 매개 변수로 전달되는 함수로 정의할 수 있습니다.

// function
function greet(name, callback) {
  console.log('Hi' + ' ' + name)
  callback();
}

// callback function
function callMe() {
  console.log('I am a callback function');
}

// passing function as an argument
greet('Peter', callMe);

약속

약속은 비동기 작업을 처리하는 좋은 방법입니다. 즉, Promise는 Promise가 생성될 때 반드시 알려지지 않은 값에 대한 프록시입니다. 핸들러를 비동기 작업의 최종 성공 값 또는 실패 이유와 연결할 수 있습니다.

이를 통해 비동기 메서드는 동기 메서드와 같은 값을 반환할 수 있습니다. 즉, 최종 값을 즉시 반환하는 대신 비동기 메서드는 미래의 특정 시점에 값을 제공하겠다는 약속을 반환합니다.

Promise는 다음 상태 중 하나입니다.

보류 중: 이행도 거부도 아닌 초기 상태.

fulfilled: 작업이 성공적으로 완료되었음을 의미합니다.

거부됨: 작업이 실패했음을 의미합니다.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(value => { return value + ' and bar'; })
  .then(value => { return value + ' and bar again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { console.log(value) })
  .catch(err => { console.log(err) });

비동기 및 대기

async 및 await 키워드를 사용하면 약속 체인을 명시적으로 구성할 필요 없이 비동기식 약속 기반 동작을 보다 깔끔한 스타일로 작성할 수 있습니다.

const showPost = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
}

showPost();

이 게시물이 도움이 되셨기를 바랍니다. 이 게시물을 공유하고 더 많은 유익한 게시물을 보려면 저를 팔로우하세요.