🌊 비동기 프로그래밍 const foo = () => {}; const bar = () => {}; foo(); bar(); 위 예시 이미지와 코드를 보면 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 실행 컨텍스트 스텍에 함수 실행 컨텍스트가 푸시 되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. (들어온 순서대로 스택에 들어가 실행된다.) 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는..

🌊 타이머 : 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 제공하는 함수이다. 타이머 생성 함수 : 일정 시간이 경과된 이후 콜백 함수를 호출, 비동기 처리 방식으로 동작한다. setTimeout : 단 한 번 동작한다. setInterval : 반복해서 동작한다. 타이머 제거 함수 clearTimeout clearInterval 타이머 함수 setTimeout / clearTimeout const timeout = setTimeout(func|code[, delay, param1, param2]) func : 타이머가 만료된 뒤 호출될 콜백함수 delay : 타이머 만료 시간은 밀리초..

🌊 AJAX AJAX(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작하며 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax는 웹페이지의 변경에 필요한 데이터만 ₩₩비동기 방식₩으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 렌더링 하지 않고, ₩₩변경할 필요가 있는 부분₩만 한정적으로 렌더링 하는 방식 JSON(JavaScript Object Notation) JSON은 클라이언트와 서버 간의 HTTP 통신을 ..

🌊 재귀함수 : 재귀 함수는 자기 자신을 호출하는 함수를 말합니다. 재귀 함수를 이용하면 반복적인 작업을 해야하는 문제를 좀 더 간결한 코드로 풀어낼 수 재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴. function recursion () { console.log("This is") console.log("recursion!") recursion() } 재귀로 문제 해결하기 문제를 좀 더 작게 쪼갠다. 1번과 같은 방식으로, 문제는 더 작아지지 않을 때 까지, 가장 작은 단위로 문제를 쪼갠다. 가장 작은 단위의 문제를 풂으로써 전체 문제를 해결한다. //arrSum 함수는 배열[1,2,3,4,5]의 합을 반환하는 함수. arrSum([]) === 0; //

🌊 생성자 함수 Object 생성자 함수 : new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // new Object를 이용하여 빈 객체를 생성한다. const animal = new Object(); // 프로퍼티 추가 animal.name = '오리너구리'; animal.type = '포유류'; console.log(animal); // { name: '오리너구리', type: '포유류' } 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수의 종류 String Number Boolean Function Array Date RegExp..

🌊 프로토타입 체인 : 자바스크립트 엔진의 특성상 객체의 프로퍼티에 접근할 때 해당 객체에 프로퍼티가 없으면 부모 역할을 하는 프로퍼토타입을 순차적으로 탐색한다. __proto__ : 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. __proto__ 접근자 프로퍼티는 상속을 통해 사용된다. __proto__ 접근자 프로퍼티를 통해 프로토타입을 접근하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다. (프로토타입 체인은 단방향으로 구현되어야한다) 모든 객체가 __proto__접근자를 사용할 수 있는 것이 아니기 때문에 __proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은..

🌊 배열 고차 함수 💡 고차함수란? 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 둔다. 함수형 프로그래밍은 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 일환이라고 할 수 있다. Array.prototype.sort (원본 배열 직접 변경) : 배열의 요소를 정렬한다. (기본적으로 오름차순) const jobs = ['teacher', 'programmer', 'engineer', 'singer', 'pilot']; jobs.sort(); console.log(jobs) // ['engineer', 'pilot', 'programmer', 'singer',..

🌊 프로토타입과 클래스 : Java Script는 프로토타입(Prototype) 기반 언어이다. → 모든 객체들이 메소드와 속성들을 상속 받기 위해 템플릿으로써 프로토타입 객체를 가진다는 의미 (출처 : MDN) → 너무.. 어려운 말이다..! 여러 자료를 찾아보다 동기분께서 추천해주신 애플코딩의 프로토타입 설명을 듣고 (https://youtu.be/wUgmzvExL_E) 감이 잡힌 것 같다. 클래스와 인스턴스, 프로토타입의 관계 class food { constructor(name, type) { this.name = name; this.type = type; } eat() { console.log(`${this.name}을 맛있게 먹다.`) } } let ogu = new food('chicken'..