프론트엔드 개발

바로 전에, primitive type과 reference type의 차이점을 메모리에 어떻게 할당되는지 알아보았습니다. 오늘은 referenct type에서 객체를 복사할 때 얕은 복사와 깊은 복사의 차이점을 공부해보겠습니다. primitive type의 값을 복사할 때는, 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않습니다. const age = 29; let nextYearAge = age; nextYearAge += 1; console.log(age); // 29 console.log(nextYearAge); // 30 reference type의 값을 복사할 때는, 선언된 변수의 주소가 객체의 주소를 가리키고 있기 때문에, 아래와 같습니다 const me = ..

모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일 모듈화는, 거대한 문제를 작은 조각의 문제로 나누어 다루기 쉽도록 하는 과정 모듈화를 통해 얻는 장점으로는, 파일들간에 중복적으로 발생할 수 있는 이름 충돌 방지 서로 간의 코드를 분리함으로써 모듈성 높여준다. 모듈간의 재사용성을 높여준다. 모듈화를 하지 않았을 때 발생하는 점 아래 예시에서는 html에서 module1.js 파일과 module2.js 파일을 만들어서 예시를 해보겠습니다. index.html module 1 function callMyName () { console.log("taenami"); } module 2 callMyName("taenami"); // taenami 위에서 module1.js 파일에서 callMyName 함..

지난 시간에 var, let, const를 비교하면서 공부를 하였는데, 이번 시간에는 TDZ란 무엇이고, 추가적으로 공부를 하기 위해서 작성하였습니다 1. TDZ란? TDZ란 변수가 선언되고 초기화되기의 범위를 TDZ(Temporal Dead Zone)에 있다고 합니다. var, let, const를 보면서 TDZ에 대해 배워보겠습니다. 2. var와 let, const 비교 1) var console.log(myName); // undefined var myName = "taenami"; var는 선언하기 전에 사용할 수 있습니다. 위와 같이 선언한 myName이라는 변수는 error가 발생하는 대신, undefined가 나오는데, var로 선언된 변수는 *호이스팅 되기 때문입니다. 2) let, co..

JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. 함수 선언식과 함수표현식이란? 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a,b) { return a + b; } 함수 표현식 (function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은, 호이스팅에서 차이가 발생합니다. 함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다. 함수 표현식은 별도의 변수에..

ECMAScript 6부터 일 년 단위 릴리스(yearly release)로 변경된 이후로, 해마다 연도별 명세가 완성되고 공개되고 있다. 2020 6월18일 ECMAScript 2020(ECMA-262 11번째 에디션)이 공식적으로 릴리스 되었다. ECMAScript 2020 릴리스된 내용들을 살펴보겠다. Optional Chaining (?.) 연산자인 ?.는 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, undefined를 반환한다. const title = data && data.article && data.article.title // 위의 표현식은 다음의 optional chaining 연산자를 통해 동일하게 표현될 수 있다. const title = dat..

프로그래밍 패러다임 - 절차 지향 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 함수형 반응형 프로그래밍 함수형에 특화된 프로그래밍 언어들 F# Haskell OCaml Erlang 함수형 프로그래밍을 지원하는 언어들 Javascript Kotlin Go Python Java C++ 등 1958년 최초의 함수형 프로그래밍 언어인 LISP가 나오게 되었는데, 최근에 함수형 프로그래밍이 다시 화제가 된 이유는, 요즘 AI, IoT, 빅데이터, 비트코인이 화제가 되면서, 방대한 데이터를 빠르게 계산해서 병렬적, 안정적으로 처리하는 것의 중요성이 부각되면서 다시 주목받기 시작한 것 파이프라인과 비유해 보면, 인풋(입력)을 넣으면 처리과정을 거쳐서 아웃풋(결과)가 나오게 되는 것이며, 외부에서는 파이..

JavaScript는 CallStack, Event Queue를 이용하여 Single Thread 기반으로 동작한다. Single Thread 기반에서는 단 하나의 CallStack만 존재하기 때문에 네트워크 요청 등 비용이 많이 드는 연산을 수행하게 되면 매우 비효율적으로 동작된다. 이러한 문제점을 어떻게 해결해나갈까? 자바스크립트 자바스크립트 엔진은 실행할 전체 함수를 실행 직전에 간단히 변수 및 함수 선언들만 스캔하는 JIT 컴파일 과정을 거치기 때문에 컴파일 과정을 갖는 인터프리터 언어라고 부릅니다. 자바스크립트 엔진 자바스크립트 엔진의 대표적인 예는 Google V8 엔진입니다. V8 은 Chrome 브라우저와 Node.js에서 사용합니다. 엔진의 주요 두 구성요소는 Memory Heap : 메..

JS에서 prototype이 필요한 이유 function Person(name, fir, sec, thi) { this.name = name; this.fir = fir; this.sec = sec; this.thi = thi; this.sum = function() { return this.fir + this.sec + this.thi; } } const kim = new Person('kim', 100, 100, 100); console.log(kim.sum()); // 300 kim.sum = function(){ return (this.fir + this.sec )/ this.thi } console.log(kim.sum()); // 2 const park = new Person('park', 5..