Javascript16 Arrow function를 사용하는 경우 ES6으로 업데이트되면서 자바스크립트에는 화살표 함수(Arrow function)가 생겼다화살표 함수는 어떤 경우에 사용할까 1. 간결한 문법으로 함수 코드를 작성하고 싶은 경우Arrow 함수는 일반 함수보다 문법이 간단하다예시// 일반 함수const add = function(a, b) { return a + b;};// Arrow 함수const add = (a, b) => a + b; 인자 => 명령어의 형식인자가 여러 개인 경우 괄호로 묶어야 하며명령어가 여러 줄인 경우 중괄호를 사용하고 return 문을 명시해야 한다 2. this 바인딩일반 함수 내부에서 this는 window를 가리킨다Arrow 함수는 자신의 this를 가지지 않고 외부 컨텍스트의 this를 그대로 사용한다예시functi.. 2024. 11. 1. require과 import 차이점 require과 import는 자바스크립트에서 모듈을 가져오는 두 가지 방법이다 require사용되는 환경 : 주로 Node.js구문 : const module = require('module-name');동기적 : 모듈을 불러올 때, 해당 모듈이 로드될 때까지 코드의 실행이 멈춘다모듈 캐싱 : 한 번 불러온 모듈은 캐시되어 이후에 같은 모듈을 요청할 경우 캐시된 버전을 사용한다실행 시점 : 구문이 실행되는 시점import사용되는 환경 : ES6(ECMAScript 2015)에서 도입된 구문으로, 주로 브라우저와 최신 Node.js에서 사용 구문 : import module from 'module-name'; 동기적 : 모듈을 불러오는 동안 다른 코드가 계속 실행된정적 분석 : (= 자바스크립트 코드가 .. 2024. 10. 31. null, undefined, undeclared, NaN 차이점 null의미의도적으로 값이 없음을 나타내기 위해 사용된다어떤 변수가 "아무것도 가리키지 않음"을 명시적으로 표현할 때 사용된다타입 : object이는 자바스크립트의 오래된 버그로, 실제로는 객체가 아닌 특별한 값예시let value = null;console.log(value); // null undefined 의미 : 변수가 선언되었지만 아직 값이 할당되지 않은 상태타입 : undefined예시let value;console.log(value); // undefined var 변수가 호이스팅됐을 때도 undefined로 초기화된다 undeclared 의미 : 변수가 아예 선언되지 않은 상태타입 : ReferenceError 에러 발생 해당 변수가 선언되지 않았기 때문예시console.log(nonExi.. 2024. 10. 30. 실행 컨텍스트 실행 컨텍스트 (= 실행 문맥)은 자바스크립트에서 코드가 실행되는 환경을 의미한다 실행 컨텍스트의 구성 요소변수 환경 : 현재 컨텍스트에서 사용할 수 있는 함수 선언, 변수와 그 값을 저장한다스코프 체인 : 변수에 접근할 수 있는 방법을 정의한다this 바인딩 : 현재 컨텍스트에서 this가 어떤 객체를 가리키는지를 결정한다 실행 컨텍스트의 종류전역 컨텍스트 : 프로그램이 실행될 때 생성되는 기본 컨텍스트모든 코드가 이 컨텍스트 내부에서 실행되며 전역 변수와 함수가 여기에 정의된다함수 컨텍스트 : 함수가 호출될 때 생성되는 컨텍스트함수는 각각 자신만의 실행 컨텍스트를 가지고 있으며, 함수가 호출될 때마다 새로운 컨텍스트가 만들어진다Eval 컨텍스트 : eval 함수를 사용하여 코드를 실행할 때 생성되는 .. 2024. 10. 29. 이벤트 전파 이벤트 전파란이벤트가 위아래로 퍼져 나가는 과정이다 예를 들어 버튼을 누르는 이벤트가 발생한다면, 그 이벤트가 위로 올라가거나, 아래로 내려가며 전달되는 것 이벤트 캡처링이벤트가 위에서 아래로 내려간다최상위 요소에서 이벤트 타겟 요소로 이벤트 타겟이벤트가 실제로 클릭된 요소에 전달된다 이벤트 버블링이벤트가 다시 위로 올라간다이벤트 타겟 요소에서 최상위 요소로 이벤트 캡처링과 버블링 단계가 존재하는 이유더 많은 유연성과 제어를 제공하기 위해서 이벤트 캡처링 과정에서 부모 요소가 타겟 요소보다 이벤트를 먼저 감지함으로써필요한 작업을 사전에 수행하거나, 이벤트 전파를 막을 수 있다 이벤트 버블링 과정에서 타겟 요소에서 이벤트가 발생한 이후 부모 요소로 전달되는 과정에서 상위 요소들이 이벤트에 추가적으로 반응하.. 2024. 10. 27. 마이크로태스크 큐(Microtask Queue)와 태스크 큐(Task Queue) 앞서 이벤트 루프에 대한 게시물에서Web API를 통해 수행되는 비동기 작업의 경우 콜백 큐에 저장되었다가이벤트 루프에 의해 콜 스택에 들어간 후 수행된다고 정리했다 비동기 작업의 경우 Web API를 통해 수행되는 작업도 있지만, 프로미스 메서드의 콜백 함수에 의해 수행되는 작업도 있다 마이크로태스크 큐(Microtask Queue)프로미스의 then, catch, finally 메서드의 콜백 함수와 같은 더 빠른 비동기 작업을 위한 큐이벤트 루프는 콜 스택이 비어 있을 때, 태스크 큐의 콜백보다 먼저 마이크로태스크 큐에 있는 콜백을 실행한다태스크 큐(Task Queue)일반적인 비동기 작업(예: setTimeout, setInterval 등)으로부터 생성된 콜백 함수들이 저장되는 큐콜백 큐와 같은 의.. 2024. 10. 26. Javascript의 동작 원리 (이벤트 루프) 콜 스택 (Call Stack) - 후입선출자바스크립트 코드가 실행되는 순서를 관리한다함수가 호출될 때마다 콜 스택에 쌓이고, 함수 실행이 끝나면 콜 스택에서 제거된다 Web API브라우저에서 제공하는 기능들ex. setTimeout, HTTP 요청(Ajax), DOM 조작 등비동기 작업이 필요할 때 Web API를 사용하면, 그 작업이 끝날 때까지 다른 작업을 계속 진행한다작업이 완료되면 해당 콜백 함수를 콜백 큐에 넣는다 콜백 큐 (Callback Queue) - 선입선출비동기 작업의 결과로 실행할 함수를 저장하는 공간콜 스택이 비어 있을 때만 실행된다즉, 현재 실행 중인 코드가 모두 끝나야 큐에서 함수를 꺼내 실행할 수 있다 이벤트 루프 (Event Loop)콜 스택과 콜백 큐를 연결해주는 다리.. 2024. 10. 26. 비동기 처리 앞서 자바스크립트는 싱글 스레드 논 블록킹 언어로비동기 처리를 통해 작업이 효율적으로 이루어진다는 내용을 다루었다https://08x0040x.tistory.com/125 자바스크립트의 주요 비동기 처리 방식으로 세 가지를 들 수 있다콜백프로미스async / await콜백특정 작업이 완료된 후 실행할 함수를 지정하는 방식이다.콜백을 통해 자바스크립트는 비동기 작업이 끝난 후 어떤 행동을 할지 정의할 수 있다 예시function fetchData(callback) { setTimeout(() => { const data = "데이터 수신"; callback(data); // 데이터가 준비되면 콜백 실행 }, 2000); // 2초 후에 데이터 수신}function han.. 2024. 10. 25. JavaScript 특성 자바 스크립트의 중요한 특성은 싱글 스레드 논 블록킹 언어란 점이다 스레드 :프로그램 내에서 작업을 수행하는 흐름 싱글 스레드 :스레드가 하나로, 한 번에 하나의 작업만 수행할 수 있다 비동기 처리 :특정 작업이 완료될 때까지 기다리지 않고, 다른 작업을 먼저 실행하는 방법ex. 웹에서 데이터를 가져오는 요청을 보낼 때, 요청이 완료될 때까지 기다리지 않고 다른 작업을 수행한다.(요청이 완료되면 그 결과를 처리하는 콜백 함수를 호출함으로서 해당 작업을 이어 수행) 논 블록킹 :비동기 처리를 지원하는 방식으로 특정 작업을 완료될 때까지 프로그램의 실행을 멈추지 않도록 돕는다 멀티 스레드의 경우에는?여러 작업이 한 번에 실행됨으로 동시성 문제가 발생할 수 있다. 동시성 문제 :여러 스레드가 동시에 공유 자원.. 2024. 10. 25. 이전 1 2 다음
