본문 바로가기

study/JavaScript

 (10)
Js - 화살표 함수(Arrow Function) 1. 화살표 함수 사용법 2. 화살표 함수의 this 화살표 함수는 es6에서 나온 문법이며, function을 사용하여 함수를 만드는 것보다 간단하게 함수를 작성할 수 있다는 장점이 있다. 화살표 함수의 특징을 보자면 아래와 같다. this, super에 대해 바인딩할 수 없다. 메소드로 사용할 수없다. call, apply, bind 메소드를 사용할 수 없다. 생성자 함수로 사용할 수 없다. 항상 익명 함수이다. 1. 화살표 함수 사용법 // 매개 변수가 없는 화살표 함수 const foo = () => { console.log("sik"); }; // 매개 변수가 있는 화살표 함수 const foo = (a, b) => { return a + b; }; foo(1, 2) // 3 // return이..
Js - this에 대하여 1. 일반 함수에서 호출하는 this 2. 메소드에서 호출하는 this 3. 생성자 함수에서의 this 4. 콜백 함수에서의 this 5. 화살표 함수에서의 this 우선 간단히 중요한점을 요약 하자면 전역에서 사용한 this 전역 객체에서 사용한 this는 항상 window이다. 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. 자바스크립트 런타임에서 모든 변수 및 함수는 window라는 전역 객체의 프로퍼티와 메소드이다. 함수 내부에서 사용한 this 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다. function 키워드로 선언된 함수는 일반 함수이다. 객체안에 선언된 함수는 전역에 선언된 함수와 비교하기 위해 메소드라고 한다. 전역에 선언된 함수와 function..
Js - 자바스크립트 동작 원리(런타임 환경) 1. 자바스크립트 엔진(Js Engine) 2. Browser Web APIs 3. Callback Queue 4. Event Loop 그동안 자바스크립트가 어떻게 동작하는지 정확히 이해하지 못하고 프레임워크를 쓰기에 급급했던것 같아 자바스크립트 동작 원리에대해 공부한 후 정리를 하려고 한다. 자바스크립트는 위의 이미지와 같은 구조를 가지고있다. 자바스크립트의 런타임 환경은 Js엔진(Memory Heap , Call Stak), Web APIs, Callback Queue, Event Loop 등으로 이루어져 있으며, 각각 맡은 역할이 다르다. 자바스크립트를 처음 접하는 사람들은 멀티 스레드 언어로 종종 오해하는 경우가 있다. Web ApIs, Callback Queue, Event Loop를 활용하여 ..
Js - 불변성(immutability) React와 Vue의 불변성 차이 1. 불변성이란? 2. JavaScript 메모리 구조 3. 원시타입과 참조 타입의 데이터 저장방식과 재할당 비교 4. React와 Vue에서의 데이터 불변성 1. 불변성이란? 불변성은 값이나 상태를 변경할 수 없는 것을 의미한다. 프로그래밍에서 불변성은 데이터 원본의 훼손을 막는 것을 의미한다. 간단히 말하자면, 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다. 2. JavaScript 메모리 구조 자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고있다. call stack: 실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간이다. 이곳에 원시 타입들이 저장된다. heap memory: 참조 타입들이 할당되는 곳입니다. 메모리 누수..
Js - 어휘적 환경(Lexical Environment)과 클로저(Closure) 목차 1. 어휘적 환경(Lexical Environment)란? 2. 실행 컨텍스트와 어휘적 환경 3. 어휘적 환경의 작동 방식 4. 클로저란? 5. 클로저 예시 1. 어휘적 환경(Lexical Environment)란? 코드 Block, Function, Script를 실행하기 앞서 생성되는 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 저장하는 객체이다. 코드를 실행하면서 참조가 필요한 변수의 값을 어휘적 환경 객체에서 식별자 이름을 키로 찾는다. 렉시컬 환경은 환경 레코드(Environment Record)와 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조로 구성되어있다. 환경 레코드 모든 지역 변수를 프로퍼티로 저장하고 있는 객체이다. this 값과 같은 기타..
Js - 스코프(Scope) 목차 1. 스코프란 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 3. 스코프 예시 4. 스코프 체인(Scope Chain) 5. 함수의 상위 스코프 결정 6. 함수의 실행 1. 스코프란 자신이 선언된 위치에 따라 본인의 유효범위가 결정된다. 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 자신이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것이다. 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 자바스크립에서는 전역, 지역 스코프가 존재한다. 전역 스코프 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역 스코프 해당 지역 스코프에서만 접근할 수 있으며, 지역을 벗어난 곳에서는 접근할 수 없다. 블..
Js - 호이스팅 간단히 이해하기 호이스팅이란 코드를 실행하기 전에 변수와 함수의 선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. 코드를 실행하기 전에 변수와 함수의 선언을 해상 스코프의 최상단으로 올린 것처럼 보이는 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. 코드 실행 전 이미 메모리에 선언된 변수나 함수가 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. => var키워드와 함수 선언문만 오류 없이 동작하며(undefined), let, const 변수는 참조 오류가 발생한다. 선언이 코드 실행보다 먼저 메모리에 저장되는 과정으로 인한 현상이다. 변수의 호이스팅 모든 ..
Js - JSDoc 진행하던 프로젝트를 어느정도 마무리 지어 놓고나니 주석이 부족함을 느끼게 되었다. 효율적인 주석을 달기위해 구글링 결과 JSDoc에 대하여 알게 되었고 현재 프로젝트는 vue.js로 구현되어 있으며, Type Script를 사용하지 않아 타입 추론에 불편함이 존재하였다. JSDoc은 VsCode와 같은 에디터에서도 기능을 지원해준다고 하며 JSDoc을 이용하면 타입 추론도 가능해서 프로젝트에 반영 중 너무 편리한 기능인것 같아 기록하려 한다. JSDoc이란 JavaScript 소스 코드에 대한 설명을 하기 위해 사용하는 마크업 언어라고 한다. JSDoc의 주목적은 JavaScript 앱 또는 라이브러리 API를 문서화하는 것이며 모듈, 네임스페이스, 클래스, 메서드, 파라미터 등과 같은 항목을 문서화할때..

티스토리툴바