자바스크립트 개발자라면 반드시 이해해야 할 핵심 개념 중 하나가 바로 '실행 컨텍스트(Execution Context)' 입니다.이 글에서는 실행 컨텍스트의 개념부터 세부 구성 요소까지 상세히 살펴보겠습니다. 1. 실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성하는데요.코드의 실행 순서와 스코프를 관리하며, 변수, 객체, 함수 등의 식별자 결정을 담당합니다.쉽게 말해서 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역입니다. 스코프와 코드실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리됩니다.실행컨텍스트의 렉시컬 환경이 스코프를 관리하며실행컨텍스트의 스택이 실행순서..

JavaScript의 Set 객체는 고유한 값들의 집합을 저장하는 데 사용되며, 중복된 값을 허용하지 않는다. 이러한 Set 객체는 다양한 상황에서 유용하게 활용될 수 있는데 한눈에 보기 쉽도록 Set 객체에 대해 자세히 알아보겠다. 목차 1. Set 객체 소개 2. Set 객체 생성 3. Set 메서드 4. Set 반복(iteration) 5. Set과 배열/객체 비교 6. Set을 활용한 유용한 예시 7. Set의 성능과 주의할 점 8. Set의 브라우저 호환성 1. Set 객체 소개 Set이란? Set 객체는 JavaScript에서 고유한 값들의 집합을 저장하는 자료 구조이다. 중복된 값을 허용하지 않으며, 값들의 삽입 순서를 유지해준다. 이렇기 때문에 Set은 고유한 값들의 집합을 효과적으로 관리..

모던 자바스크립트 deep dive에서 this 관련 부분을 읽던 도중에 헷갈려서 자세히 공부한 내용을 블로그에 남김. 외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않는다 외부 함수인 메서드와 중첩 함수 또는 콜백 함수의 this가 일치하지 않는다는 의미는, 함수의 호출 방식에 따라 this가 가리키는 대상이 달라진다는 것을 의미한다. const obj = { value: 100, outerFunc: function() { console.log("outerFunc's this:", this); // {value: 100, outerFunc: ƒ} const innerFunc = function() { console.log("innerFunc's this:", this); // w..

*부족한 내용들은 천천히 보충해나갈것임. JS에서 Class를 활용해서 모듈화해서 각각의 Class에 해당하는 기능들을 만들고 조합하는 방법에 대해 짧게 기록해보려 한다. Q. 자바도 아닌데 자바스크립트에서 왜 Class 를 활용하나? A. Class를 활용하면 객체의 상태와 메서드를 하나의 단위로 묶어서 관리할 수 있고 이를 통해 유지보수성이 좋아지고 중복 코드가 줄어들며 코드의 가독성도 높일 수 있다. 즉, 객체의 청사진을 만들어 속성과 메서드를 정의한 다음 필요할 때 인스턴스화 할 수 있고 이를 통해 코드베이스 전체에서 해당 객체를 쉽게 관리하고 조작할 수 있다. 예를 들어, 아래와 같이 Person 클래스와 Phone 클래스가 있다고 가정해보자 class Person { constructor(na..

// 1. function Person(name, age) { this.name = name; this.age = age; this.getName = function () { return this.name + '입니다.'; } } // 2. Person.prototype.getName = function (){ return this.name + '입니다.' } 1번과 2번은 JavaScript에서 객체 지향 프로그래밍을 구현하는 방식에 차이가 있다. 1번은 생성자 함수를 사용하여 객체를 생성하는 방식이다. Person 함수는 name과 age라는 인자를 받아 해당 값을 객체의 프로퍼티로 설정한다. 또한, getName이라는 메소드를 객체의 프로토타입에 추가하여 객체가 이 메소드를 호출할 수 있도록 한다...

Javascript에서 다음과 같은 메소드를 사용한 경험이 있을 것이다. // 대문자로 변경하는 경우 const test_1 = "hello world!"; test_1.toUpperCase(); // 소수점 표현하는 경우 const test_2 = 1.0001; test_2.toFixed(1); "hello world!" 와 1.0001 는 원시타입이다. 즉, 객체가 아니기에 가지고 있는 메서드가 없는 것이다. 하지만 메서드를 사용할 수 있는 이유가 자바스크립트 엔진에서 Boxing 과정이 이루어지기 때문이다. Boxing 원시타입을 래퍼 객체로 wrapping하는 과정을 말한다. test_1 변수를 기준으로 설명하고자 한다. 우선 test_1.toUpperCase() 를 실행하게 되면 javascri..

reduce 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다. 이 함수는 배열에서 숫자의 합이나 평균 등을 계산할 때 유용하게 사용된다. 누적해서 callback function을 각 요소마다 갈겨서, 결과 값을 반환해내는 식으로 반복하는거다. reduce 함수는 다음과 같은 구문을 사용한다. // 기본 구문 형식 array.reduce(function(total, currentValue, currentIndex, arr), initialValue) // 초기값인 initValue를 지정하지 않을 때. let result = arr.reduce(callback); // 선택적으로 초기 값(initValue)도 지정할 수 있다. let result = arr.reduce(c..