Lighthouse of FE biginner

모던 자바스크립트 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의 프로..

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

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

모던 자바스크립트 Deep Dive 스터디 2회차자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다.변수변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인 이름이다. 식별자변수의 이름을 식별자라고 한다. 식별자는 특정 값을 구분할 수 있도록 구유해야 한다. 식별자는 값이 저장된 메모리 주소와 1대1 매핑 관계를 맺으며 이 매핑 관계 또한 메모리에 저장되어 있다. 즉 식별자는 메모리에 올라가 있는 값을 가지고 있는 것이 아닌 해당 메모리의 주소 값을 가지고 있는 것 이다. 변수의 선언v..