Lighthouse of FE beginner

Overview자바스크립트는 소스코드를 4가지 타입으로 구분한다.전역 코드전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등 내부 코드는 포함되지 않는다.전역 스코프를 생성하며 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.함수 코드함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함하지 않는다.지역 스코프를 생성하며 지역변수, 매개변수, arguments 객체를 관리한다. 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결한다. 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.eval 코드: eval 함수에 인수로 전달되어 실행되는 소스코드모듈 코드: 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등 내부 코드는 포..

모던 자바스크립트 Deep Dive 스터디 6회차 OverviewJavaScript의 this바인딩은 다른 언어의 this 바인딩과 다르게 동작한다. 상황에 따라 다르게 동작하는 this 바인딩 이번 스터디에서 부셔본다. thisthis는 객체 자기 자신 혹은 전역 객체를 가르킨다. 자바스크립트의 this 바인딩은 상황에 따라서 다르게 바인딩이 된다. 렉시컬 스코프는 코드의 평가 시점에 결정되는 반면에 this 바인딩은 함수의 호출 시점(런타임)에 결정이 된다.this 바인딩바인딩은 식별자에 메모리 주소 값을 매핑 하는 것을 뜻한다. this 바인딩 역시 this 라는 식별자에 가르키는 객체의 주소를 매핑 하는 것 이다. 일반 함수에서의 this 바인딩일반 함수에서 this는 globalThis이다. 즉..

Overview자바스크립트에서 제공하고 있는 함수이지만 사용해서는 안되는 함수가 있습니다. 바로 eval 함수입니다.이번 포스팅에서는 왜 eval을 사용하면 안된다고 하는지 살펴보도록 하겠습니다. evaleval 함수는 내장 전역 함수입니다. 즉 사용자가 정의한 함수가 아닌 자바스크립트 언어에서 제공하고 있는 함수입니다. eval 함수는 문자열로 된 코드를 인자로 받습니다. 인자로 전달된 자바스크립트 코드가 식이면 런타임에 실행해 값을 생성하고, 문이라면 런타임에 코드를 실행합니다.eval("1 + 2"); // 3const value = eval("1 + 3"); // value에 4 할당eval("var x = 1 * 6");console.log(x); 간단한 코드를 살펴봅시다. 코드에서 value에..

모던 자바스크립트 Deep Dive 스터디 5회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다.Overview자바스크립트에서 변수를 선언하는데 사용하는 키워드는 var let const 가 있다.var 키워드는 코드의 평가 단계에서 식별자의 선언과 초기화(undefined)가 동시에 발생하며 메모리에서 어떤 일들이 발생하는지 2회차 스터디에서 자세하게 살펴봤다. 이번 스터디에서는 let, const 키워드에 대해서 살펴본다.[JavaScript] 변수와 데이터 타입 let 키워드는 재할당이 가능하고 선언과 초기화를 분리할 수 있다, const 키워드는 재할당이 불가능하며 선언과 초기화가 동시에 이뤄져야 한다, 이런 정보는 모두가 쉽게 ..

모던 자바스크립트 Deep Dive 스터디 5회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다. 스코프스코프란 식별자가 유효한 범위다. 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.자바스크립트에서는 var, let, const 어떤 키워드를 사용하느냐에 따라 스코프도 다르게 결정된다.var a = 'a';function foo(b) { var a = "new a"; var c = "c"; console.log(a, b, c); // new a, b}console.log(a, b, c) // Reference Error (b, c) 위 예제 코드를 살펴보면 a 식별자는 전..

OverviewSpread Operator는 ES6에 나온 연산자 입니다. 객체에 있는 프로퍼티나 배열 내 값을 전개하는데 사용합니다. 스프레드 연산자를 사용하면 객체나 배열을 복사할 수 있습니다. 이때 발생하는 복사는 깊은 복사, 얕은 복사 중 어떤 복사일까요?가볍게 생각하자면 얕은 복사는 단순히 메모리의 참조 주소 값을 전달하는 것이고, 깊은 복사는 메모리에 같은 모양의 새로운 객체를 생성하는 것을 의미합니다.결론부터 말하자면 스프레드 연산자를 통해 객체, 배열을 복사하는 행위는 얕은 복사입니다. 1-depth의 프로퍼티 까지는 깊은 복사로 복사가 됩니다. 하지만 2-depth 부터의 프로퍼티 값은 원본 객체의 참조 값을 유지합니다. 스프레드 연산자를 활용한 객체 복사의 동작 방식1-depth의 프로..

Overview이전 게시글에서 함수에 대해서 스터디를 진행 했습니다. 이번 포스팅에서는 함수의 클린 코드에 대해서 살펴보겠습니다. 함수의 클린 코드IIFE 사용을 지양한다.가급적이면 즉시 실행 함수(IIFE: Immediately Invoked Function Expression)를 사용하지 않습니다.(() => { console.log(this);})(); 요즘의 프론트엔드는 모듈화를 지향합니다. IIFE 함수는 즉시 실행이 되기 때문에 정의한 함수를 재사용 할 수 없습니다. IIFE 함수는 디버깅이 어렵다는 단점이 있고 함수의 선언문이 즉시 실행이 되기 때문에 IIFE 함수가 지속해서 쌓이다 보면 메모리 누수에 유의해야 합니다. 중첩 함수에서의 스코프중첩 함수를 선언할 시 스코프에 주의합니다. 그리..

모던 자바스크립트 Deep Dive 스터디 4회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다.함수자바스크립트에서 함수는 일급 객체이다. 즉 값처럼 변수에 할당하고 프로퍼티의 값이 될 수 있으며 배열의 요소가 될 수 있다.자바스크립트에서 함수를 사용하는 방식은 크게 함수 선언문, 함수 리터럴 표현식이 있다. 이번 스터디 회차에서는 함수가 메모리에 선언되는 방법과 호이스팅, 함수의 클린 코드를 집중적으로 살펴본다. 일급 객체일급 객체는 아래의 네 가지 조건을 만족해야 한다.무명의 리터럴로 생성이 가능하다. 런타임에 생성이 가능하다.const foo = function() {  console.log('foo')}변수나 자료구조(객체, 배열..

모던 자바스크립트 Deep Dive 스터디 3회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다. 객체자바스크립트에서는 원시 값을 제외한 모든 값이 객체이다. 배열, 함수, 정규식 등 모든 것들이 객체이다. 원시 값은 변경 불가능하다. 메모리에 한번 선언이 되고 원시 값의 값을 변경한다면 해당 주소의 값이 변경 되는 것이 아닌 새로운 공간에 메모리를 할당하고 해당 주소에 값을 매핑한다. 반면에 객체는 메모리에 선언된 후 해당 주소의 값을 변경할 수 있다. 이 말은 새로운 객체를 변수에 할당하는 것이 아닌 해당 객체의 프로퍼티 값을 변경해도 메모리의 주소가 달라지지 않는다는 것이다. 프로퍼티객체는 프로퍼티의 집합이고 프로퍼티는 문자열 또는..

Overview웹 애플리케이션을 만들다 보면 원하는 크기 만큼의 배열을 생성하고 싶을 때가 있습니다. 사실 자바스크립트의 배열은 일반적인 프로그래밍에서 정의하고 배우는 밀집 배열이 아니기 때문에 런타임 중 자유롭게 배열에 요소를 추가하고 삭제하고 할 수 있습니다. 컴파일 시점에 데이터의 갯수가 정해져 있고, 이를 배열로 구현해야 하는 경우에는 어떻게 해야 할까요? forconst dates = [];for (let i = 1; i for문을 활용해 계산된 days만큼 loop를 돌아서 날짜를 만들고, 생성한 날짜를 배열에 밀어 넣습니다. 가장 간단한 방법이면서 기초 문법만으로도 쉽게 구현할 수 있는 방법입니다. Array.fromArray.from은 정적 메서드로 순회가 가능하거나 유사 배열 객체를 얕게..