투투

자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다. 여기서 숫자, 문자열, 불리언, null, undefined, Symbol은 원시 타입이다. 이번에는 이러한 원시 타입의 특징을 자세히 알아보려고 한다. 원시 타입과 객체 타입의 차이점 원시 타입과 객체 타입의 차이점은 크게 세 가지가 존재한다. 원시 타입의 값은 변경 불가능한 값이고 객체 타입의 값은 변경 가능한 값이다. 변수에 원시 타입의 값을 할당하면 실제 값이 저장되고 객체 타입의 값을 할당하면 참조 값이 저장된다. 원시 타입의 값은 값에 의한 전달, 객체 타입의 값은 참조에 의한 전달이 된다. 여기서 변경 불가능한 값, 실제 값이 저장, 값에 의한 전달은 원시 타입의 특징이라고 할 수 있다. 이 3가지 특징이 무엇을 의..

https://github.com/yjs03057/33-js-concepts#1-%ED%98%B8%EC%B6%9C-%EC%8A%A4%ED%83%9D GitHub - yjs03057/33-js-concepts: 모든 자바스크립트 개발자가 알아야 하는 33가지 개념 모든 자바스크립트 개발자가 알아야 하는 33가지 개념. Contribute to yjs03057/33-js-concepts development by creating an account on GitHub. github.com 위의 링크를 참고하여 자바스크립트 개발자가 알아야 할 33가지를 공부해보자. 특히 첫 번째는 콜 스택에 대한 내용인데 더 큰 개념으로 실행 콘텍스트를 이해하는 것이 중요하다고 생각하여 실행 콘텍스트에 대한 내용을 정리하고 콜..

함수형 프로그래밍에서 if문과 for문 사용을 지양해야 한다고 책에서 읽고 공부를 하였다. 하지만 왜 그래야 하는 것인지 오랫동안 이해되지 않았고 시간이 지난 후에 다시 함수형 프로그래밍에 대해서 공부를하니 조금씩 이해가되어 정리를 하려고 한다. 10명의 사람들이 있다고 가정해보자. 여기서 각 사람들의 나이와 이름을 알고있고 10명의 사람 중에서 20살 이상인 사람들의 이름을 알아보려고한다. 이를 코드로 작성해보고 함수형 프로그래밍을 발전시키면서 if문과 for문을 왜 사용하면 안되는지 이해해보자. const personList = [ { age: 17, name: "alex" }, { age: 15, name: "paul" }, { age: 21, name: "harry" }, { age: 27, na..

자바스크립트의 객체를 사용할 때 언제 사용할 수 있는 객체인지 아니면 환경에 제약없이 사용할 수 있는 함수인지를 파악하고 있어야 한다. 네이티브 객체 네이티브 객체는 ECMAScript 명세에 정의된 객체를 말하며 애플리케이션의 환경과 관계없이 항상 사용할 수 있다. 아래의 객체들은 모두 네이티브 객체가 된다. Object() 생성자 함수 Function 객체 Boolean, Number, String, Array Math, Date, Error, RegExp Symbol 호스트 객체 호스트 객체는 런타임 환경에 따라 정의된 객체를 의미한다. 즉 브라우저와 Node.js 환경에서 사용되는 객체가 다르다는 것이다. 전역 객체 전역 객체는 모든 객체의 유일한 최상위 객체를 의미한다. 브라우저에서는 windo..

Webpack이 무엇인지 알아보기 전에 Webpack을 사용하는 이유가 궁금했다. 먼저 Webpack을 왜 사용하는지 이해하고 Webpack의 개념과 활용법을 정리해보려고 한다. Webpack의 등장 배경 대부분의 기술들은 기존의 문제들을 해결하기 위해 발전하거나 새롭게 탄생한다. Webpack도 기존의 문제들을 해결하기 위해 개발되었다. 따라서 Webpack의 등장 배경을 알아본 후에 Webpack이 무엇인지 이해할 필요가 있다. 기존의 문제점은 다음 4가지이다. 자바스크립트 변수 유효 범위 브라우저별 HTTP 요청 횟수의 제한 사용하지 않는 코드의 관리 Dynamic Loading & Lazy Loading 미지원 위의 4개의 문제 형태와 Webpack으로 어떻게 해결할 수 있는지 알아봅시다. 자바스..

async와 await는 ES8에서 도입되었으며 Promise를 좀 더 쉽게 사용할 수 있다. 또한 가독성이 높게 비동기 처리를 동기처럼 동작할 수 있도록 구현할 수 있다. async 함수 async 함수는 async라는 키워드를 사용하여 정의할 수 있다. 다음은 async 함수를 다양하게 정의한 것이다. async 함수는 항상 Promise를 반환한다. 아래의 코드처럼 Promise를 반환하지 않더라도 Promise로 감싸서 반환하게 된다. // 함수 선언문 async function foo() { return 1; } // 함수 표현식 const foo = async function () { return 2; }; // 화살표 함수 const foo = async () => 3; await 키워드 a..

Javascript의 Array 관련 메서드인 forEach와 map은 ES5부터 나왔다. 두 개의 메서드가 모두 배열 내의 원소를 탐색하는 것이기 때문에 프로젝트에스 forEach와 map을 자주 사용하였다. 하지만 언제 forEach를 사용하는 것이 좋고, 언제 map을 사용하는 것이 좋은지 구분지을 필요가 있었다. 따라서 forEach와 map의 차이점을 파악하고 각각의 메서드를 언제 사용하는 것이 좋은지 알아보려고 한다. 먼저 forEach와 map이 어떻게 동작하는지 알아보자. forEach forEach는 콜백 함수를 인자로 전달받아 배열 내의 각 원소에 대해 콜백 함수를 실행하도록 한다. 다음 코드에서 1부터 5까지의 숫자를 갖는 numbers라는 배열을 선언하였다. 이를 forEach를 통..

모듈화가 필요한 이유 모듈은 관련된 기능을 하나의 파일에서 코드로 작성하여 실행시키는 것이다. 이렇게 관련된 기능끼리 나눠서 여러 개의 파일을 만들어 모듈화를 진행할 수 있다. 모듈화는 다른 코드와의 결합도를 줄이고 재사용성을 높일 수 있다는 장점이 존재한다. Javascript의 모듈 시스템 Javascript는 본래 웹 페이지의 보조 작업을 수행하기 위해 만들어진 언어이며 모듈화 기능을 제공하지 않았다. 따라서 서로 다른 파일에서 작성한 코드이지만 스코프를 공유하여 서로의 파일에 영향을 주었다. 아래의 코드를 보자. a.js이라는 파일에서는 x를 선언하고 5로 초기화하였다. 해당 파일에서 x를 출력하면 5가 출력된다. 그리고 b.js라는 파일에서는 x를 선언하기 전에 출력하고 x에 새로운 값인 3을 ..

오픈 소스 프로젝트에 참여하고자 특정 프로젝트의 코드를 분석해보면서 this가 많이 쓰여져있는 것을 확인했다. 하지만 this의 정확한 동작 방법과 의미를 이해하지 못하고 있다는 것을 깨달았다. 따라서 this가 무엇이고 특정 상황에 따라 어떻게 동작하는지 공부해보려고 한다. this의 필요성 먼저 this가 왜 필요한지 알 필요가 있다. 다음의 코드는 "모던 자바스크립트 Deep Dive"를 참고하였다. 원의 반지름을 통해 지름을 구하는 getDiameter라는 메서드가 circle 객체에 포함되어있다. 아래의 코드에서 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 getDiameter가 호출되는 시점에는 객체 리터럴의 평가가 완료되어 circle에 생성된 객체가 할당된 상태일 것..

자바스크립트의 Nullish Coalescing(null 병합 연산자 ??)를 알게된 후에 null과 undefined의 차이를 정확히 알지 못한다는 것을 깨달았고 이번 기회에 정확한 개념을 짚고넘어갈 필요가 있었다. 먼저 null 병합 연산자를 공부하면서 왜 null과 undefined의 차이를 알아야했는지 살펴보자. 아래의 코드는 어떠한 문자열을 입력받아 출력하는 함수인 printMessage를 작성한것이다. 이때 전달받은 인자가 null 또는 undefined일 때는 "Empty Message"를 출력하게된다. 하지만 아래의 코드는 함수형 프로그래밍 관점에서 작성했을 때 좋은 코드는 아니다. 왜냐하면 if문과 같은 제어문을 사용하여 message를 "어떻게"에 치중되어있기 때문이다. 이를 좀 더 직..