this — 호출 방식에 따라 달라지는 자바스크립트의 핵심 키워드
·
Frontend/Javascript Essentials
자바스크립트를 배우다 보면 헷갈리는 개념 중 하나가 바로 this다.같은 코드처럼 보여도 어떻게 호출했느냐에 따라 가리키는 대상이 달라지기 때문이다.이번 글에서는 this의 본질과 동작 방식을 직관적으로 정리해본다. 1. this란 무엇인가?this는 자기 자신을 참조하기 위한 변수다.자바스크립트 엔진이 함수를 실행할 때마다 암묵적으로 생성하며, 함수 내부에서 지역 변수처럼 사용할 수 있다.this는 자신이 속한 객체 또는 생성될 인스턴스를 가리키며, 그 바인딩은 함수를 어떻게 호출했는지에 따라 동적으로 결정된다. 2. 왜 this가 필요한가?1. 객체의 메서드가 자기 자신을 참조하기 위해this가 없다면 person.name처럼 객체 이름을 직접 적어야 한다. 코드가 복잡해지면 이런 방식은 유지보수가 ..
호이스팅(Hoisting)
·
Frontend/Javascript Essentials
자바스크립트를 배우다 보면 “선언이 끌어올려진다”는 말을 자주 듣게 된다.하지만 정확히 언제, 왜 이런 일이 벌어질까?이 글에서는 호이스팅이란 무엇인지, 평가 단계와의 관계, TDZ, var의 문제점,그리고 호이스팅이 왜 중요한 개념인지를 함께 살펴본다. 1. 호이스팅이란?호이스팅(Hoisting)은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 미리 메모리에 등록하는 현상을 말한다.이로 인해 선언문이 실제 코드 아래에 있어도 마치 위로 끌어올려진 것처럼 작동한다.(Hoist 의 사전적 의미는 "무언가를 들어올리거나 들어올리는 행위" 이다.)console.log(name); // undefined (에러 아님)var name = "Jay";자바스크립트 엔진 내부에서는 다음과 같은 순서로 동..
비동기 처리: CallBack → Promise → async/await
·
Frontend/Javascript Essentials
자바스크립트에서 비동기 처리를 처음 접하면 대부분 콜백 함수를 사용한다.하지만 전통적인 콜백 패턴에는 몇 가지 문제점이 있다. 1. 콜백 패턴의 문제점1. 콜백 헬 (Callback Hell)비동기 함수 내부에서 또 다른 비동기 작업을 수행해야 할 때, 콜백 함수가 중첩되며 코드 복잡도가 급격히 증가한다.getData((res1) => { getMoreData(res1, (res2) => { getExtraData(res2, (res3) => { console.log(res3); }); });});코드가 계속 오른쪽으로 들여쓰기되어 가독성이 나쁘다.또한 비동기 처리 결과를 함수 외부로 반환하거나 상위 스코프 변수에 할당하기 어렵다.2. 에러 처리의 어려움콜백 내부에서 발생한 에러는..
322.Coin Change
·
Coding Test/LeetCode
난이도: 중간(Medium)Link: LeetCode 322 - Coin Change풀이 날짜: 2025/10/13(못품)1. 문제 이해여러 가지 종류의 동전(coins)과 목표 금액(amount)이 주어졌을 때,가장 적은 수의 동전으로 목표 금액을 만들 수 있는 최소 개수를 구하는 문제다.예를 들어, 위 예시에서 가능한 조합은 다음과 같다.11 = 5 + 5 + 1 (3개)11 = 2 + 2 + 2 + 2 + 2 + 1 (6개)→ 따라서, 최소 개수는 3개가 된다. 그리고, 만약 주어진 동전들로는 금액을 만들 수 없다면, -1을 반환한다. 2. 접근 아이디어 및 자료구조이 문제는 전형적인 Bottom-up DP (Dynamic Programming) 구조를 가진다.핵심은 “금액 i를 만들기 위한 최소 ..
198. House Robber
·
Coding Test/LeetCode
난이도: 중간(Medium)Link: LeetCode 198풀이 날짜: 2025/10/13 1. 문제 이해여러 집이 일렬로 있을 때, 도둑이 인접한 두 집을 동시에 털 수 없다는 규칙 아래에서, 훔칠 수 있는 금액의 최댓값을 구하는 문제다.혼동하지 말아야 할 것은, 연속된 집은 털 수 없지만, 중간에 몇 집을 건너뛰어도 된다는 것이다. 2. 접근 아이디어 및 자료구조이 문제는 전형적인 1D DP 구조를 가지는데, 인접한 집을 털 수 없으므로i번째 집을 털었을 때의 최댓값 = i-2번째까지 턴 최댓값 + 현재 집 금액 이다.i번째 집을 털지 않을 경우 = i-1번째까지 턴 최댓값이 두가지 값을 비교하여 더 큰 값을 누적하는 방식으로 진행한다.이를 점화식으로 표현하면 아래와 같지만, dp[i] = max(d..
70. Climbing Stairs
·
Coding Test/LeetCode
난이도: 쉬움 (Easy)링크: LeetCode 70풀이 날짜: 2025.10.131. 문제 이해한 번에 1계단 또는 2계단을 오를 수 있을 때, n개의 계단을 오르는 서로 다른 방법의 총 수를 구하는 문제이다. 예를 들어,n = 2 → (1+1, 2) → 총 2가지n = 3 → (1+1+1, 1+2, 2+1) → 총 3가지즉, n번째 계단에 도달하는 방법은(n-1)번째에서 한 칸, 또는 (n-2)번째에서 두 칸 올라오는 경우의 합이다.한번더 풀어서 설명하면, n-1 번째까지 오르는 경우의 수 + n-2 번째까지 오는 경우의 수 를 합하면 n번째에 오르는 경우의 수인 것이다.점화식은 dp[i] = dp[i-1] + dp[i-2] 이다. 2. 접근 아이디어 및 자료구조이 문제는 1차원 DP(1Dimensi..