반응형

JavaScript 21

[JS] Number

들어가며자바스크립트에는 숫자를 다루는 데이터 타입인 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 타입으로 변..

Javascript 2024.11.20

[JS] 일치 연산자 '==='에 대해 알아보자

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

Javascript 2024.11.18

[JS] 동등 연산자 '=='에 대해 알아보자

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

Javascript 2024.11.17

[JS] Call stack

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

Javascript 2024.11.15

[프로그래머스] 단속카메라

문제단속카메라https://school.programmers.co.kr/learn/courses/30/lessons/42884  예시 코드function solution(routes) { routes.sort((a, b) => a[0] - b[0]); let camCnt = 0; let lastCamPos = -Infinity; for (const [start, end] of routes) { if (start > lastCamPos) { camCnt++; lastCamPos = end; } else lastCamPos = Math.min(lastCamPos, end); } return camCnt;} 풀이모든 차량을 커버할 수 있는, 최소한의 단속 카메라 개수를 ..

[JS] iterable? 그게 뭐죠?

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

Javascript 2024.11.13

[프로그래머스] 등굣길

문제등굣길https://school.programmers.co.kr/learn/courses/30/lessons/42898  예시 코드function solution(m, n, puddles) { const board = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0)); for (let i = 0; i Array(n + 1).fill(0)); dp[0][1] = 1; const MOD = 1000000007; const PUDDLE = 1; for (let i = 1; i  풀이목적지까지 도달할 수 있는 최단 경로의 수를 구하는 문제입니다.2차원 좌표 위를 움직이고, 이동 방향이 오른쪽 또는 아래로 한정되어 있어 DP를 사용할 수 있습니..

Coding Problem 2024.11.12

[JS] Object와 Map, 무엇을 선택해야 할까?

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

Javascript 2024.11.11

[JS] parameter와 argument는 뭐가 다를까?

들어가며개발을 하다 보면 parameter와 argument에 대해 많이 듣게 되는데요. 이 두 용어가 혼용되기도 하다 보니 헷갈릴 때가 있습니다.이번 시간에는 과연 이 둘이 대체 뭐가 다른지 알아보도록 하겠습니다. Paramater매개변수라고도 불립니다. 함수를 정의할 때 입력값을 받을 수 있는 변수입니다.function foo(parameter1, parameter2) { // some code} Argument인자라고도 불립니다. 함수를 호출할 때 함수에 입력으로 전달되는 값입니다. 값을 직접 전달할 수도 있고, 변수에 담아 전달할 수도 있습니다.const argument1 = 'say';foo(argument1, 'hi');function foo(parameter1, parameter2) { c..

Programming 2024.11.09

[JS] Maximum call stack size exceeded 에러

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

Javascript 2024.11.07