오늘도 커밋하는 북극곰

점점 이도저도 아닌 개발자가 되어가는중

javascript 7

클로저(Closure)

클로저(Closure)클로저는 함수가 자신이 정의된 스코프 밖에서도 그 스코프 내의 변수들에 접근할 수 있게 해주는 기능입니다. 클로저의 기본 개념클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 주며, 외부 함수가 종료된 이후에도 그 변수를 “기억”할 수 있습니다. 이를 통해 자바스크립트에서 변수와 함수의 생명주기를 관리하는 데 강력한 도구가 됩니다. 클로저의 동작 원리 1. 스코프 체인: 자바스크립트에서 변수는 자신이 선언된 스코프와 그 상위 스코프에서만 접근 가능합니다. 2. 함수의 일급 객체성: 자바스크립트에서는 함수가 일급 객체로 취급되어 변수에 할당되거나 다른 함수의 인자로 전달될 수 있습니다. 이 때문에 함수가 반환된 이후에도 원래 스코프의 변수를 “기억”할 수 있습니다.funct..

개발/JavaScript 2024.09.11

스코프(Scope)

스코프(Scope)변수, 함수, 객체가 접근 가능한 범위를 정의하는 개념입니다.이는 코드가 실행되는 환경과 해당 환경 내에서 변수나 함수에 접근할 수 있는지를 결정합니다. 자바스크립트의 스코프는 크게 두 가지로 구분할 수 있습니다: 전역 스코프와 지역 스코프 ES6 이후 블록 스코프도 중요한 개념으로 추가되었습니다. 1. 전역 스코프(Global Scope)전역 스코프는 프로그램 전체에서 접근할 수 있는 범위를 의미합니다. 전역에 선언된 변수나 함수는 어디에서나 접근 가능합니다.var globalVar = "I am global";function printGlobal() { console.log(globalVar); // "I am global"}printGlobal();console.log(globa..

개발/JavaScript 2024.09.11

async/await

async/await비동기 코드를 더 쉽게 작성할 수 있도록 돕는 기능입니다. 이 두 가지는 자바스크립트의 Promise와 함께 동작하며, 비동기 작업을 마치 동기 코드처럼 작성할 수 있게 해 줍니다. 1. async 함수async 키워드는 함수 앞에 붙여서 해당 함수를 비동기로 만듭니다. 비동기 함수는 항상 Promise를 반환하며, 반환된 값이 Promise 객체로 감싸집니다. 즉, 함수 내부에서 값을 반환하면 그 값은 자동으로 Promise.resolve()를 통해 처리되고, 에러가 발생하면 Promise.reject()가 호출됩니다.async function fetchData() { return "데이터가 성공적으로 로드되었습니다!";}fetchData().then(result => cons..

개발/JavaScript 2024.09.10

Promise

1. PromisePromise는 자바스크립트에서 비동기 작업을 처리하기 위해 제공되는 객체입니다.현재 작업이 완료되었는지(혹은 실패했는지)를 나타내고, 나중에 작업이 완료되면 결과를 사용할 수 있도록 합니다. 기본 개념Pending (대기): 초기 상태, 작업이 아직 완료되지 않음Fulfilled (성공): 작업이 성공적으로 완료됨Rejected (실패): 작업이 실패함. Promise 구조Promise 객체는 new Promise() 생성자를 통해 만들 수 있습니다. 이 생성자는 두 개의 콜백 함수, resolve와 reject를 받습니다. resolve는 작업이 성공했을 때 호출되며, reject는 작업이 실패했을 때 호출됩니다. const promise = new Promise((resolve, ..

개발/JavaScript 2024.09.10

콜백 함수(callback)

콜백 함수(callback)콜백은 비동기적 작업을 수행할 때 자주 사용되며, 그 외에도 함수의 동작을 동적으로 변경하고자 할 때 유용합니다. 콜백은 자바스크립트의 중요한 특징인 일급 객체(first-class object) 개념에서 비롯되는데, 자바스크립트에서는 함수를 변수에 할당하거나 다른 함수의 인수로 전달할 수 있습니다. 주요 특징함수의 인수로 전달됨: 콜백 함수는 다른 함수에 인수로 전달됩니다.나중에 실행됨: 콜백 함수는 인수로 전달된 함수가 호출될 때 특정 조건이 만족되거나 특정 시점에서 실행됩니다.비동기 작업에서 중요: 비동기 작업(예: 타이머, 이벤트 처리, AJAX 요청 등)에서 자주 사용됩니다. 작업이 완료되었을 때 콜백 함수가 호출되어 후속 작업을 처리합니다. 콜백 함수 사용 예시 기본..

개발/JavaScript 2024.09.10

비동기 처리(Asynchronous Processing)

비동기 처리(Asynchronous Processing) 란?프로그램이 실행될 때, 특정 작업이 완료될 때까지 기다리지 않고, 그 작업이 끝나는 것과 상관없이 다른 작업을 동시에 진행하는 방식입니다. 동기 처리 VS 비동기 처리 1. 동기 처리(Synchronous Processing)- 모든 작업이 순차적으로 진행됩니다. 즉, 앞의 작업이 끝나야 다음 작업을 진행할 수 있습니다. - 만약 시간이 오래 걸리는 작업(예: 파일 읽기, 네트워크 요청 등)이 있으면, 해당 작업이 완료될 때까지 프로그램이 대기 상태에 머무르게 됩니다. - 동기 처리의 특징은 직관적이지만, 시간이 오래 걸리는 작업이 있으면 프로그램이 멈추는 문제가 있습니다. function syncTask() { console.log('첫 번..

개발/JavaScript 2024.09.10

호이스팅(Hoisting)

호이스팅(Hoisting)이란?변수 선언과 함수 선언이 코드의 실행 전에 해당 범위의 최상단으로 끌어올려지는 자바스크립트의 동작 방식을 의미합니다.즉, 자바스크립트는 코드가 실행되기 전에 변수와 함수의 선언을 먼저 처리하지만, 변수의 값 할당은 그 위치에서 이루어집니다. 1. 변수 호이스팅변수는 var, let, const 키워드를 사용하여 선언되며, 선언 방식에 따라 호이스팅의 동작 방식이 다릅니다. 1-1. var 키워드의 호이스팅var로 선언된 변수는 선언만 끌어올려지고, 초기화(값 할당)는 실제 코드의 위치에서 이루어집니다. 즉, 선언된 변수는 호이스팅 되어 사용 가능하지만, 값은 할당된 위치 이후부터 접근할 수 있습니다. console.log(a); // undefinedvar a = 10;co..

개발/JavaScript 2024.09.10