본문 바로가기

Study/Javascript

 (44)
🚀 [JavaScript] sort() 메서드 완전 정리 sort()는 코딩테스트를 풀면서 정말 많이 나오는데정리를 한 번 해야할 필요성을 오늘 많이 느꼈다.........그래서 시작!! 🎯 기본 개념배열.sort(비교함수)비교함수 : "어떤 기준으로 정렬할지" 알려주는 함수원본 배열을 직접 수정함 🔧 비교함수의 작동 원리sort((a, b) => { // a와 b 두 요소를 비교해서 // return -1 → a가 앞에 위치 (순서 유지) // return 1 → b가 앞에 위치 (순서 바꿈) // return 0 → 순서 변경 없음}) 📊 부등호에 따른 결과 변화🔼 오름차순 (작은 것 → 큰 것)[3, 1, 4, 2].sort((a, b) => { if (a b) return 1; // a가 크면 b..
🚀 [JavaScript] toString()의 다른 기능: 진법 변환 JavaScript를 배우면서 toString() 메서드를 단순히 "숫자를 문자열로 바꾸는 메서드"로만 알고 있었는데.......toString()에는 훨씬 강력한 기능이 숨어있다. 바로 진법 변환이다! 🔢 진법이란?진법(radix 또는 base)은 수를 표현하는 방법이다.우리가 일상적으로 사용하는 숫자는 10진법을 자주 사용한다.(컴퓨너틑 2진법(0,1)을 사용하고, 프로그래밍에서는 16진법(0~9, A~F)을 주로 사용한다!!) 2진법: 0, 18진법: 0, 1, 2, 3, 4, 5, 6, 710진법: 0, 1, 2, 3, 4, 5, 6, 7, 8, 916진법: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 🎯 toString()toString() 메서드..
모던 자바스크립트 Deep Dive 47장 에러 처리 47.1 에러 처리의 필요성 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.console.log('[Start]');foo(); // ReferenceError: foo is not defined// 발생한 에러를 방치하면 프로그램은 강제 종료된다.// 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다.console.log('[End]');  try ... catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.console.log('[Start]');try { foo();} catch (error) { c..
모던 자바스크립트 Deep Dive 46장 제너레이터와 async/await 46.1 제너레이터란? ES6 에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터와 일반 함수의 차이는 다음과 같다.제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉, 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 다시 말해, 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도할 수 있다는 것을 의미한다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을..
모던 자바스크립트 Deep Dive 45장 프로미스 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.    45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬// GET 요청을 위한 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력한다. console.log(JSON.parse(xhr.response)); } else { cons..
모던 자바스크립트 Deep Dive 44장 REST API REST(REpresentational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 API를 구현한 것을 의미한다.   44.1 REST API의 구성REST API는 자원(resource), 행위(verb), 표현(representatioins)의 3가지 요소로 구성된다. REST는 자체 표현 구조(self-descriptiveness)로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.구성요소내용표현 방법자원(resource)자원URI(엔드포인트)행위(verb)자원에 대한 행위HTTP 요청 메서드표현(representaions)자원에 대한 행위의 구체적 내용페이로드    4..
모던 자바스크립트 Deep Dive 43장 Ajax 43.1 Ajax 란?Ajax(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax는 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 이를 통해 브라우저에서도 데스크톱 애플리케이션과 유사한 ..
모던 자바스크립트 Deep Dive 42장 비동기 프로그래밍 42.1 동기 처리와 비동기 처리함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택이라고도 부른다)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.const foo = () => {};const bar = () => {};foo();bar(); (이미지) 함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다.=> 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 함수 실행의 시작을 의미한다.=> 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 ..

티스토리툴바