'🔥 Front-End/JavaScript' 카테고리의 글 목록

2022. 7. 24. 23:52 🔥 Front-End/JavaScript

ES(ECMA Script) ECMAScript(ES5나 ES2015의 ES는 ECMAScript의 줄임말이다.)는 Ecma 인터내셔널에서 정의한 ECMA-262 기술 규격에 정의된 표준 스크립트 프로그래밍 언어입니다. 간단히 말하자면 표준화된 스크립트 언어입니다. 대중적으로 유명한 ES6의 경우 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고, 기존 코드를 더 간결하게 작성할 수 있는 새로운 문법이 추가되면서 더 가독성 및 유지 보수성이 향상되었습니다. 그 덕에 웹에서 사용하는 자바스크립트 유명 라이브러리들(lodash, React, Vue 등)의 개발 환경도 ES6로 바뀌었습니다. 따라서 최신 자바스크립트 라이브러리들도 ES6를 사용할 때 훨씬 편리하게 사용할 수 있습니다. ES6에서 새로 추..

[JS] TDZ

2022. 7. 21. 02:08 🔥 Front-End/JavaScript

TDZ(Temporal Dead Zone)는 무엇인가? const 변수를 선언하고 초기화하면 변수에 접근할 수 있습니다. 예상한대로 동작합니다. const white = '#FFFFFF'; white; // => '#FFFFFF' 이번에는 선언 전에 white 변수에 접근해보도록 하겠습니다. white; // throws `ReferenceError` const white = '#FFFFFF'; white const white = '#FFFFFF' 구문 전 줄까지, white 변수는 TDZ에 있습니다. TDZ에 있는 white 변수에 접근하게 되면 , ReferenceError: Cannot access 'white' before initialization 자바스크립트 에러가 발생합니다. TDZ의 영향을..

[JS] 실행 컨텍스트, 호이스팅, 함수 선언문과 함수 표현식

2022. 7. 21. 01:40 🔥 Front-End/JavaScript

실행 컨텍스트(Execution Context) 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아 올립니다. 실행 컨텍스트는 전역공간이 생성될 때, 함수가 호출될 때 생성됩니다. 실행 컨텍스트와 콜 스택 예제 코드 실행시, 전역공간이 활성화되면서 전역 컨텍스트가 생성되고 함수 호출 순서대로 콜스택에 실행 컨텍스트가 쌓이는것을 확인할 수 있습니다. 실행 컨텍스트가 담고 있는 정보 Variable Environment environmentRecord (snapshot) : 현재 컨텍스트 내의 식별자들에 대한 정보 outerEnvironmentReference (snapshot) :..

[JS] 클로저(Closure)

2022. 7. 21. 00:49 🔥 Front-End/JavaScript

클로저의 의미 및 원리 이해 앞에서 실행컨텍스트에 대해 배운 지식을 바탕으로 클로저를 정의해본다면, 클로저란 외부 함수의 변수를 참조하는 내부 함수를 외부로 전달할 때 외부 함수의 실행 컨텍스트가 종료된 후에도 외부 함수를 참조할 수 있는 현상이라고 생각합니다. 제가 왜 클로저를 정의했는지 예제를 통해 살펴보겠습니다. 우선 외부 함수에서 변수를 선언하고 내부 함수에서 해당 변수를 참조하는 형태의 간단한 코드를 작성해보겠습니다. var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner(); }; outer(); outer 함수에서 변수 a를 선언했고, outer의 내부 함수인 inner 함수에서 a의 값..

[JS] 스코프(Scope)

2022. 7. 21. 00:32 🔥 Front-End/JavaScript

스코프 스코프(Scope, 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 개념으로 확실한 이해가 필요하다. 먼저 아래 예제의 실행 결과에 대해 생각해보자. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 이름이 같은 변수 x가 중복 선언되었다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야 하는가? 자바스크립트는 어떻게 변수를 식별하는 것일까? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분..

[JS] JavaScript 객체와 불변성

2022. 7. 20. 22:46 🔥 Front-End/JavaScript

기본형 데이터와 참조형 데이터 데이터 타입의 종류 자바스크립트 데이터 타입은 기본형, 참조형 이렇게 크게 두가지로 볼 수 있습니다. 기본형은 할당이나 연산시 복제되고 참조형은 참조됩니다. 엄밀히 말하면 둘 모두 복제를 하긴 하지만, 다만 기본형은 값이 담긴 주솟값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다릅니다. 불변값(Immutable Value) 기본형 데이터들은 모두 불변값(immutability을 띕니다. 기본형이 궁금하시다면, [JS] 모던자바스크립트 Deep Dive - 데이터 타입 6장 데이터 타입(Data Type) ES6부터는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(Primitive Type)과 객체 ..

[JS] JavaScript의 자료형과 JavaScript만의 특성

2022. 7. 19. 23:38 🔥 Front-End/JavaScript

느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript는 Java, C, TypeScript 등 엄격히 타입선언을 해야하는 언어와는 달리 느슨한 타입을 지닙니다. let foo = 42 // foo가 숫자 foo = 'bar' // foo가 이제 문자열 foo = true // foo가 이제 불리언 이처럼 변수에도 따로 타입 지정을 해주지 않아도 되며, 값에 따라 자동으로 타입이 지정됩니다. 즉, JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당) 가능합니다. JavaScript 형변환 이전에 정리한 글을 참조해주세요. [JS] 4. 암시적 형변환, 명시적 형변환, Nominal, 구조화, 덕 타이핑 오픈소스 깃허브 주소:..

[JS] JavaScript의 append를 이용한 HTML 요소 생성하기

2022. 5. 15. 00:16 🔥 Front-End/JavaScript

위와 같이 홈페이지 상품 목록을 생성한다고 가정해보겠습니다. HTML에 요소들을 직접 생성해서 하드코딩할 수도 있겠지만, 데이터가 변경될 때마다 HTML 요소를 계속해서 직접 수정해줘야하는 번거로움이 생깁니다. 반면, 배열과 JavaScript를 이용하면 데이터가 변할때마다 변경사항을 자동으로 반영할 수 있습니다. JavaScript를 이용하면 DOM 객체에 접근하여 HTML 요소를 직접 생성, 수정, 삭제할 수 있습니다. 아래의 비어있는 HTML 요소인 div 클래스 row에 상품 리스트를 추가해보겠습니다. 상품 리스트가 배열안에 객체 형식으로 담겨있습니다. let products = [ {id: 0, price: 70000, title: "꽃무늬 원피스"}, {id: 1, price: 50000, t..

티스토리툴바