자바스크립트 애플리케이션에서 데이터 정렬은 필수적인 기능입니다. 이번에는 배열을 정렬하는 sort() 메서드의 기본 사용법부터, 까다로운 숫자 정렬을 완벽하게 처리하는 방법까지 핵심만 살펴보겠습니다.1. sort()의 기본 작동 방식 (문자열)sort() 메서드는 기본적으로 배열의 요소를 문자열(string)로 변환한 후, 유니코드 값 순서대로 정렬합니다. 문자열 배열에 대해서는 기대한 대로 알파벳 순서(오름차순)로 잘 작동합니다.특징: sort() 메서드는 **원본 배열 자체를 변경(mutate)**합니다. 사본을 만들지 않고 바로 원본을 수정한다는 점에 유의해야 합니다.JavaScriptconst owners = ['Jonas', 'Zach', 'Adam', 'Martha'];owners.sort()..
Javascript
JavaScript에서 데이터를 다루다 보면 배열 안에 또 다른 배열이 들어 있는 **'중첩 배열(Nested Array)'**과 마주치게 됩니다. 이 복잡한 구조를 깔끔하게 하나의 배열로 펼쳐주는 마법 같은 메서드가 바로 **flat()**과 **flatMap()**입니다. ES2019에 도입된 이 두 친구의 핵심 기능을 쉽고 빠르게 파헤쳐 봅시다!1. 중첩 배열을 펼치는 flat() 메서드**flat()**은 이름 그대로 중첩된 배열을 평평하게(Flatten) 만들어주는 역할을 합니다. 복잡하게 얽힌 배열 구조를 단숨에 정리해 주죠.기본 사용법 (1단계 깊이): 인자 없이 사용하면 기본적으로 1단계 깊이의 중첩만 해제합니다. 대부분의 경우 1단계만으로 충분합니다.JavaScript// 예시: 1단계 ..
forEach가 생겨난 이유함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 한다. 특히 for 문은 반복을 위한 변수를 선언해야 하며, 조건식과 증감식으로 이루어져 있어서 함수형 프로그래밍이 추구하는 바와 맞지 않는다. const numbers = [1, 2, 3];const pows = [];// for 문으로 배열 순회for (let i = 0; i forEach 메서드는 for문을 대체할 수 있는 고차 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다. 즉, forEach 메서드는 반복문을..
Set 정의Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분배열Set 객체동일한 값을 중복하여 포함할 수 있다.OX요소 순서에 의미가 있다.OX인덱스로 요소에 접근할 수 있다.OX 이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. Set 객체의 생성Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set();console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로..
안녕하세요! 자바스크립트 개발을 하다 보면, 객체에 저장된 데이터를 다루는 경우가 참 많죠. 그런데 map 함수처럼 유용한 배열 메서드들은 객체에 바로 사용할 수 없다는 불편함이 있습니다.이때 **Object.entries()**가 아주 유용합니다. 이 메서드는 객체를 [key, value] 쌍으로 이루어진 배열로 변환해 주어, 객체 데이터를 배열처럼 다룰 수 있게 만들어줍니다.Object.entries()의 기본 사용법Object.entries()는 객체를 인수로 받아, 그 객체의 모든 열거 가능한 속성([키, 값]) 쌍을 2차원 배열로 반환합니다.예를 들어, 아래와 같은 사용자 정보 객체가 있다고 가정해 볼게요.JavaScriptconst user = { name: '김개발', age: 30, ..
안녕하세요! 자바스크립트를 사용하다 보면 || 연산자를 이용해 변수에 기본값을 할당하는 경우가 많죠. 예를 들어, options.width 값이 존재하지 않을 경우 100을 할당하고 싶다면 보통 이렇게 작성합니다.JavaScriptoptions.width = options.width || 100;그런데 만약 options.width에 0이나 false와 같은 "Falsy" 값이 들어 있다면 어떻게 될까요? || 연산자는 0과 false를 false로 간주하기 때문에 100이라는 기본값이 할당되어 버립니다. 개발자의 의도와는 다른 결과가 나오는 거죠.바로 이 문제를 해결하기 위해 ??= (Nullish Coalescing Assignment) 연산자가 등장했습니다!??=는 null 또는 undefined일..
ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. // 좌항의 피연선자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌황의 피연산자를 반환한다. var foo = null ?? 'default string'; console.log(foo); // "default string" null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||을 사용한 단..
https://codesmoothie.tistory.com/27 지난번 포스팅에서 자바스크립트의 엔진과 런타임에 대해서 알아보았다. 이번 포스팅에서는 자바스크립트의 실행 컨텍스트와 콜 스택이 어떻게 동작하는지 살펴보자. 실행(Execution) 컨텍스트(Contexts)란 무엇인가? 이제 막 컴파일링 끝난 기계 코드가 있다고 가정해보자. (컴파일에 대한 개념은 지난 포스팅 참조) 그 직후 코드는 실행(Execution)할 수 있는 준비를 마치게 되며, 상위 레벨 코드(top-level code)를 위한 Global execution context를 생성한다. 여기서 상위 레벨 코드란 어떠한 함수에도 들어가지 않는 코드를 의미한다. 다시 말해, 자바스크립트 엔진이 코드를 실행할 때 처음에는 함수 밖에 있는..
https://codesmoothie.tistory.com/26 [Javascript] 자바스크립트란 어떤 언어인가? 자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하 codesmoothie.tistory.com 지난 블로그에서 자바스크립트란 어떤 언어인지 전체적으로 알아보았다. 그렇다면 자바스크립트 엔진이란 무엇일까? 자바스크립트 엔진(Engine) 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램이다. 모든 브라우저 자체에 자바스크립트 엔진이 존재한다. 가장 잘 알려진 ..
자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하다. 조금 더 자세하게 정의하자면 아래와 같다. Javascript is a high-level, prototype-based, object-oriented, multi-paradigm, interpreted or just-in-time compiled, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non..
