Yepchani's place

들어가며자바스크립트에는 숫자를 다루는 데이터 타입인 Numbert가 있습니다. 이번 시간에는 Number 타입에 대해서 알아보도록 하겠습니다. Number일반적으로 사용되는 숫자 데이터 타입입니다. 64비트 부동 소수점 형식을 사용해 정수와 소수를 모두 표현할 수 있습니다.자바스크립트의 숫자는 255 또는 3.14와 같은 리터럴 형태로 표현됩니다. 255와 같은 숫자 리터럴은 정수가 아닌 부동 소수점 값입니다.255 === 255.0; // true255 === 0xff; // true (16진법)255 === 0b11111111; // true (이진법)255 === 0.255e3; // true (십진수 지수 표기법)Number() 함수를 이용해 Number 타입이 아닌 값을 Number 타입으로 변..

들어가며 자바스크립트에는 두 값이 같은 지를 비교하는 일치 연산자 '==='가 있습니다. 이번 시간에는 이 연산자가 무엇이고, 어떻게 비교를 수행하는지 알아보도록 하겠습니다.  일치 연산자 '==='일치 연산자(strict equality)는 두 피연산자가 동일한지 비교한 후, boolean 결과를 반환합니다. 다만, 동등 연산자(equality) '=='와 달리 다른 타입의 값은 다른 것으로 간주합니다. 일치 연산자(===와 !==)는 IsStrictlyEqual semantic을 제공합니다. 비교 규칙은 아래와 같습니다.같은 타입일 경우Object(객체): 두 피연산자가 같은 객체를 참조할 때만 true를 반환합니다.String(문자열): 두 피연산자가 동일한 문자를 동일한 순서로 가질 때만 true..

들어가며자바스크립트에는 두 값이 같은 지를 비교하는 동등 연산자 '=='가 있습니다. 이번 시간에는 이 연산자가 무엇이고, 어떻게 비교를 수행하는지 알아보도록 하겠습니다. 동등 연산자 '=='동등 연산자(equality)는 두 피연산자가 동일한지 비교한 후, boolean 결과를 반환합니다. 이때 자바스크립트가 자동으로 타입 변환을 수행한 후 비교합니다. 이 때문에 예기치 못한 상황이 발생할 수 있습니다. 동등 연산자(==와 !=)는  IsLooselyEqual semantic을 제공합니다. 비교 규칙은 아래와 같습니다.같은 타입일 경우Object(객체): 두 피연산자가 같은 객체를 참조할 때만 true를 반환합니다.String(문자열): 두 피연산자가 동일한 문자를 동일한 순서로 가질 때만 true를 ..

들어가며이번 시간에는 자바스크립트에서 중요한 개념 중 하나인 콜 스택(Call stack)에 대해 알아보도록 하겠습니다.콜 스택이란콜 스택은 자바스크립트에서 함수 호출을 관리하는 데이터 구조입니다.구조스택(Stack)콜 스택은 스택이므로 LIFO(Last In First Out, 후입선출) 구조를 가집니다.프레임(Frame)콜 스택을 이루는 각 블록을 말합니다.함수가 호출되면, 해당 함수의 실행 컨텍스트가 프레임에 담겨 콜 스택에 추가됩니다.실행 컨텍스트는 자바스크립트에서 코드가 실행될 때 생성되는 환경을 의미합니다.어떻게 작동할까콜 스택은 다음과 같이 작동합니다.함수가 호출되면, 해당 함수의 실행 컨텍스트가 프레임에 담겨 콜 스택에 추가됩니다.함수가 실행을 완료하면, 스택에서 해당 프레임이 제거됩니다...

들어가며자바스크립트에서 데이터 구조를 다루다보면 '이터러블(iterable)'이라는 개념을 마주할 수 있는데요. 이번 시간에는 이터러블이 무엇인지, 어떻게 작동하는지, 그리고 이를 활용하는 방법에 대해 알아보겠습니다. 이터러블? 그게 뭐죠?자바스크립트에서 '이터러블'하다는 건 객체(object)가 반복 가능한 구조임을 의미합니다. 즉, 이터러블 객체는 내부에 있는 요소들을 효율적으로 순회할 수 있는 메서드를 제공합니다. 모든 객체가 이터러블한 건 아니다일부 내장 타입(e.g. Array, Map)은 기본 반복 동작을 가지고 있는 이터러블 객체입니다. 반면, 일반 객체는 기본적으로 이터러블하지 않지만, 필요에 따라 이터러블로 만들 수 있습니다. 그럼 이터러블 객체가 되기 위해서는 어떤 조건을 갖춰야 할까요..

들어가며자바스크립트에서 데이터를 효율적으로 다루기 위해 다양한 데이터 구조를 사용하는데요. 그중 키-값 쌍을 저장할 때 쓰이는 Object와 Map이 있습니다. 이번 시간에는 Object와 Map이 무엇이 다르고, 선택하는 데 있어 도움이 될 기준에 대해 알아보도록 하겠습니다. 같아보여도 다르다Object는 Map과 많이 유사한데요. 두 데이터 구조 모두 키-값 쌍을 저장, 조회, 삭제할 수 있습니다.다만 몇 가지 주요한 차이점도 존재합니다.  MapObjectAccidentalKeys기본 키가 존재하지 않습니다. 사용자가 명시적으로 추가한 키만 포함됩니다.프로토타입을 가지므로 기본 키들이 존재합니다. 이로 인해 사용자 정의 키와 충돌할 가능성이 있습니다.( Object.create(null)로 이 문제..

들어가며자바스크립트를 통해 코드를 자다 보면 종종 'RangeError: Maximum call stack size exceeded'라는 에러 메시지를 볼 수 있는데요.이번 시간에는 이 에러의 원인과 해결 방법에 대해 알아보도록 하겠습니다. 원인과 해결방법이 에러는 설명 그대로 최대 콜 스택 크기를 초과할 때 발생합니다. 자바스크립트 엔진은 함수를 호출할 때마다 '콜 스택'이라는 곳에 해당 함수 호출을 추가하고, 실행을 완료하면 제거하는데요. 이렇게 하나하나 쌓이는 걸 스택 프레임이라고 합니다. 이 스택 프레임이 너무 많이 쌓여 콜스택이 감당할 수 있는 최대 크기를 넘어서게 되면 문제가 발생합니다. 이 크기는 사용하는 엔진과 환경에 따라 달라질 수 있습니다. 주로 다음과 같은 경우에 발생합니다. 1. 함..

들어가며큐(Queue)는 중요한 자료구조 중 하나로, FIFO(First-In-First-Out) 특성을 가지는데요. 첫 번째로 들어간 요소가 가장 먼저 나옵니다. 이번 포스트에서는 자바스크립트를 사용하여 큐를 구현하는 세 가지 방법에 대해 알아보겠습니다. 1. 배열을 이용한 구현자바스크립트에서 가장 간단하게 큐를 구현하는 방법은 배열(Array)을 사용하는 것입니다.push 메서드로 새 요소를 추가하고, shift 메서드로 첫 번째 요소를 제거합니다. enqueue는 O(1)에 수행됩니다.dequeue는 O(n)에 수행됩니다. 배열에서 첫 번째 요소를 제거하면 모든 요소가 한 칸씩 앞으로 이동해야 하기 때문입니다. 아래는 구현 코드입니다.class Queue { constructor() { th..

들어가며 JavaScript를 사용하다 보면 객체나 배열과 같은 참조형 데이터를 다루게 되는데요. 참조형 데이터를 복사할 필요가 있을 때, 얕은 복사와 깊은 복사라는 개념이 중요하게 작용합니다. 이번 포스트에서는 JavaScript에서 얕은 복사와 깊은 복사에 대해 알아보겠습니다. 얕은 복사 (Shallow Copy) 얕은 복사는 이름처럼 복사하는 깊이가 얕은데요. 객체를 한 단계까지만 복사할 수 있습니다. 객체를 복사할 때 원시 값의 경우 값을 그대로 복사하지만, 객체의 경우 참조 값, 즉 객체가 저장되어 있는 메모리 주소를 복사하는데요. 그렇기 때문에 얕은 복사를 통해 만들어진 객체를 수정하면 원본 객체에 영향을 미칠 수 있으므로 주의해야 합니다. 몇 가지 예시를 들어볼게요. 1. 배열의 slice ..

이번 시간에는 자바스크립트의 데이터 타입에 대해 알아보도록 하겠습니다. 데이터 타입이란 데이터 타입이란 프로그래밍에서 변수 또는 객체가 가질 수 있는 값의 종류를 말합니다. 예를 들어, Number 타입은 숫자 값을, String 타입은 텍스트 문자열 값을 가질 수 있습니다. 데이터 타입의 필요성 데이터 타입은 다음과 같은 이유로 필요합니다. 1. 값을 저장하고 참조할 때 필요한 메모리 크기를 정해야 합니다. 2. 메모리에서 읽어 들인 2진수 값을 어떻게 해석해야 할지 알아야 합니다. 3. 연산자는 종종 피연산자의 데이터 타입에 따라 다르게 동작합니다. 예를 들어, "+" 연산자는 Number 타입에 대해서는 덧셈을 수행하지만, String 타입에 대해서는 두 문자열을 연결합니다. 데이터 타입의 종류 자..