내직업은 IT종사자/javascript (15) 썸네일형 리스트형 ealry return 은 좋은 것일까? Early Return 패턴코드를 작성할 때 기능에 따라 여러 조건문을 사용하게 되는데 그때마다 어떻게 하면 가독성 높게 코드를 짤 수 있을까 고민하게 됩니다 (매번... 너무어려워 ㅠㅠ)그 중에 Early Return패턴을 종종 사용하게되는데 문득 early return 을 사용하는 것이 좋을까? 안좋을까? 라는 고민을 하게 되었습니다. 1. Early Return 이란? Early Return은 함수에서 조건문을 만족할 때 일찍 반환하는 것을 의미합니다. 2. Early Return 의 장단점 2-1. 장점- early return은 들여쓰기 즉 중첩 조건문을 줄여 코드를 간결하고 읽기 쉽게 만들어 줍니다.- 코드의 비선형적인 흐름을 선형으로 바꾸어 주어 가독성을 높혀줍니다- 조건이 .. 블로킹(Blocking)과 논블로킹(Non-blocking) 그리고 동기(synchronous) 과 비동기(asynchronous)의 정의 및 차이점 (헷갈리지않기!) Blocking 과 Non-Blocking이란? 공부를 하다가 블로킹, 논블로킹, 동기, 비동기가 예전부터 너무너무 헷갈렸어요 머리속으로는 얼추 알겠는데 막상 구현 및 적용해볼때 헷갈리는..?그래서 찾아보다가 제가 이해하기 쉽게 잘 적어주신 두 능력자님 블로그을 보게 되었습니다!해당 내용을 기억하기 쉽게 짬뽕해서 정리해보고자 합니다 :) [요약]동기/비동기는 전체적인 작업에 대한 순차적인 흐름 순서에 관련이 있다면,블로킹/논블로킹은 전체적인 작업의 흐름 자체를 막을 것인가, 아닌가의 차이입니다. 1. 동기와 비동기의 정의동기와 비동기의 핵심 문구는 "결과값을 기다린 다는 것" 입니다 [동기/비동기 ]* synchronous 는 작업 시간을 함께 맞춰서 실행한다는 뜻동기(synchronous): 작.. 1차원 객체를 spread operator(스프레드 연산자)로 복사하면 얕은 복사 일까 깊은 복사 일까? ✍깊은복사와 얕은 복사 관련 게시글 https://joyhong-91.tistory.com/41 [javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모 joyhong-91.tistory.com ✔1차원 배열, 1차원 객체는 복사를 하면 깊은 복사(deep copy)가 됩니다 복사한 객체를 수정하면 기존 객체에 영향 없습니다. const arr1Dth = [1,2,3,4]; const obj1Dth = {key: 'key1', value: 'valu.. 쿠키, 세션, 웹 스토리지 차이 (cookie, session, web storage) 1. 쿠키, 웹스토리지 (로컬스토리지, 세션스토리지) 생성 배경 HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않습니다. 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다. 2. 쿠키(cookie)란? 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일 입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지됩니다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 클라이언트에 300개의 쿠키 저장 가능, 하나.. [javascript] lodash.js 와 native 속도 차이, 그래도 lodash를 사용하는 이유 목차 lodash의 정의와 장점 lodash적용 방법(CDN, npm install, 프로젝트 적용방법) 자주쓰이는 함수, native vs lodash 속도비교 번외 헷갈렸던 점 기록... 1. lodash 의 정의와 장점 편리하게 코드를 작성하고 웹표준에 효율적으로 맞출 수 있게 해주는 Node.js 패키지 입니다 객체, 배열 등의 데이터 구조를 간편하게 함수형으로 다룰수 있고, 쉽게 변환하고 쉽게 값을 추출할 수 있어서 편리하게 코드를 작성할 수 있습니다. 그렇기 때문에 빠른 작업과 간결한 코드를 사용할 수 있습니다. 예를들어 array나 object를 반복문을 돌면서 처리해야할 것들을 한줄로 구현할 수 있습니다. -es6와 성능을 비교하자면 몇몇 함수에서 es6 가 lodash보다 속도가 더 빠.. [javascript] javascript engine 이벤트 루프(Event Loop) 와 틱(tick) 목차 자바스크립트 엔진에 대해서 자바스크립트 엔진 동작 원리 런타임 호출스택 비동기콜백 & event loop 1. 자바스크립트 엔진에 대해서 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기), 대체적으로 웹 브라우저에서 사용됩니다. 엔진에 의한 인터프리터 방식이므로 별도의 컴파일 과정이 필요없다. 즉 웹브라우저에서 즉시 해석되어 실행됩니다. 자바스크립트는 웹브라우저 뿐만아니라 Node.js, Electron, React Native 등의 프로젝트와 그 밖의 다양한 곳에서 동작합니다. *브라우저 별 엔진 종류 스파이더몽키(SpiderMonkey) 최초의 자바스크립트 엔진. 넷스케이프 브라우저를 위해 브렌던 아이크(JS 창시자)에 의해 개발되었다. 엔진은 C++로 구현 그 뒤로 (자바스크립트 .. [javascript] javascript는 메모리관리가 어떻게 될까? (feat. 메모리 누수 사례) 목차 메모리의 생명주기 메모리의 저장공간 Heap과 Stack 가비지콜렉터 메모리 누수 사례 1. 메모리의 생명주기 자바스크립트에서 변수나 함수를 사용할 때 JS엔진은 메모리를 할당하고 더이상 필요하지 않으면 해제 합니다. 메모리 할당은 '이 공간을 내가 쓰겟다'라고 찜해놓는 과정이며, 메모리 해제를 하면 공간이 확보되어 또 다른 용도로 사용할 수 있게 됩니다. [메모리 할당] js 엔진에서 알아서 처리되는 과정이며, 자바스크립트는 생성한 객체에 필요한 메모리를 할당 합니다. (* 메모리관점에서 객체는 변수 타입 object뿐만 아니라 함수와 함수의 스코프까지 칭합니다.) [메모리사용] 변수에서 읽거나 쓰는 것 [메모리 해제] js 엔진에서 알아서 처리되며, 할당되었던 메모리가 해제되면서 해제된 메모리는.. [javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모델에는 힙과 콜스택 영역으로 나눠져 있습니다. (힙: 참조타입, 콜스택: 원시타입) 1. 원시값, 참조값 이란? 그리고 복사가 필요한 이유 1.1 원시값이란? 원시값은 기본자료형을 의미합니다. 예: Number, String, Boolean, Null, undefined 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 1.2 원시값은 어떻게 작동하는가? 자바스크립트에서 원시타입을 선언(declare)하면 이는 stack에 저장됩니다. * stack이란 LIFO(last in first out: .. 이전 1 2 다음
