Front-end/Javascript
-
[JavaScript Tips] 조건문 내 상수를 활용한 조건Front-end/Javascript 2023. 1. 26. 10:10
1. 상수를 사용한 조건 if ( status === 1 || statue === 2) { ... } API 응답으로 필드 값에 따른 조건 분기가 필요한 경우, 우리는 보통 API명세서를 확인하여 조건문을 활용한 코드를 만듭니다. 하지만 이후에 다른 프론트엔드 개발자가 이 코드를 봤을때 저게 어떤 값이고, 어떤 뜻인지 알기 어려울 확률이 큽니다. 조건문들은 상수를 통해 따로 관리한다면 이런 문제점들을 보완할 수 있습니다. // constant.js export const STATUS = { admin: 1, user: 2, .... } import { STATUS } from './constant.js'; if ([ STATUS.admin, STATUS.user].includes(status)) { ....
-
tc39 92nd, 93nd meetingFront-end/Javascript 2022. 9. 27. 11:11
https://dev.to/hemanth/updates-from-the-92nd-tc39-meeting-5fi6 Updates from the 92nd TC39 meeting There were several items on the agenda, this post focuses on feature proposals and their progress... dev.to https://www.ecma-international.org/technical-committees/tc39/?tab=activities
-
Lexical 🤪Front-end/Javascript 2022. 9. 7. 12:53
우리가 흔히 자바스크립트에서 말하는 렉시컬환경 (Lexical Environment)의 렉시컬이 무슨 뜻인지 궁금해서 찾아봤다. lexical [1] (adj) of or relating to words [2] (adj) of or relating to dictionaries 단어나 사전과 연관된 뜻인걸 알 수 있다. 이어서 lexical environment에 대해 알아보면 Lexical Environment ECMAScript 명세서 262 (8.1)에 따르면, 렉시컬 환경이란 A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and function..
-
자바스크립트의 메모리 관리Front-end/Javascript 2022. 6. 29. 19:38
메모리란? 하드웨어에서 메모리는 다수의 flip flop으로 구성되어 있습니다. 각각의 flip flop은 unique identifeier를 통해 위치를 알 수있기 때문에 읽거나 쓰는것이 가능해집니다. - text영역이 코드가 들어가는 영역입니다. 컴파일이 끝난 기계어가 들어갑니다. 프로세스가 종료될때까지 계속 유지됩니다. - data영역은 전역 변수, 정적변수, 배열 등이 저장되어 프로그램이 끝날때까지 존재합니다. * initialized data (data) - 런타임 이전에 초기화 * unitialize data (bss) - 런타임 이후 초기화 - heap 영역은 프로그래머가 동적으로 사용하는 영역입니다. 런타임시 크기가결정됩니다. - stack 영역은 지역변수, 매개변수들이 저장되고 함수 호출..
-
class 내부 메서드에서 화살표 함수를 사용한다면Front-end/Javascript 2022. 5. 12. 01:18
[ 1 ] constructor 메서드 내부에서 화살표 함수를 사용하여 속성을 추가했을때. 결과 : [ 2 ] 클래스 내부의 메서드를 화살표 함수로 작성했을때. 결과 : babel class properties transform 변환시 생성자 constructor 메서드 내부의 속성으로 이동한다. 참고 : https://babeljs.io/docs/en/babel-plugin-proposal-class-properties https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1 Arrow Functions in Class Properties Might Not Be..
-
화살표함수와 thisFront-end/Javascript 2022. 4. 30. 12:24
this 콜백함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제 고차 함수(함수를 받아서 함수를 리턴할수있는 함수) 의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백함수의 예제이다. 프로토타입 메서드 add의 내부에서 this는 메서드를 호출한 객체를 가리킨다. (위 예제에서는 coffee 객체). 클래스 내부의 모든코드에는 strict mode가 암묵적으로 적용된다. 따라서 map 메서드의 콜백함수에도 strict mode가 적용된다. 클래스 내부의 모든 코드에는 strict mode가 암묵적으로 적용된다. strict mode에서 일반 함수로서 호출된 모든 함수 내부의 this에는 전역 객체가 아니라 undefined가 바인딩 되므로 위 예제에서 map 메서드의 콜백함수 내..
-
클래스 (3)Front-end/Javascript 2022. 4. 29. 17:06
상속에 의한 클래스 확장 클래스 상속 상속에 의한 클래스 호가장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다. 상속을 통해 자신만의 고유한 속성만 추가하여 확장할 수 있다. extends 키워드 extends 키워드를 통해 상속받을 클래스를 정의한다. 상속을 통해 확장된 클래스를 subclass 라고 하고, 서브클래스에게 상속된 클래스를 superclass라고 부른다. 수퍼클래스와 서브클래스는 클래스간의 프로토타입 체인도 생성한다. 이를 통해 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다. 동적 상속 extends 키워드를 사용해 생성자 함수를 상속받아 클래스를 확장할 수도 있다. super 키워드 함수처럼 호출할 수도 있고 식별자처럼 참조할 수 있는 키워드다. super를 ..