JavaScript
![[JavaScript] Map, Set 살펴보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhfWSR%2FbtrAb8KkjtX%2FeW7zlPIxQddIxpeVYk5Is1%2Fimg.png)
[JavaScript] Map, Set 살펴보기
Map and Set Map Object(객체)와 비슷한 모양새, 차이점이 있다면 Object(객체)의 경우 key 값이 문자열만 가능하지만 Map의 경우 대부분의 데이터 타입이 가능하다. key를 이용하여 set, get 할 수 있음 key들은 중복될 수 없음 key로 사용가능한 데이터타입: string, symbol(ES6), function, object, number key - value 페어로 이루어진 컬렉션이다. const counts = new Map(); // string type counts.set('apple', 1); counts.set('banana', 3); // number type도 가능 counts.set(1, 1) // boolean type도 가능 counts.set(fa..
[JavaScript] 최신문법 정리
Nullish Coalescing Operator(??) 좌항이 null 또는 undefined일 경우에 우항을 반환해준다. const one = null ?? "One" const two = undefined ?? "Two" const three = false ?? "Three" console.log(one, two, three) // One Two false ...
[JavaScript] Clean Code JavaScript
3. Functions 이 게시물은 Rober C. Martin의 책 Clean Code 를 자바스크립트에 맞게 조정한 Ryan McDermott의 깃허브 리포지토리를 직접 타이핑함으로써 학습의 목적으로 작성하게 되었으며 3. Functions 의 부분에 해당합니다. 1. 함수 인자는 2개 이하가 이상적이다. 함수의 인자, 매개변수가 많아진다는 것은 그 함수에게 너무 많은 역활을 부여하고 있는 것이 아닌지 생각해 보아야 한다. 함수는 인자를 1 ~ 2 개 가지고 있는것이 가장 이상적이며 만일 3개 이상의 인자를 가져야 한다면 그러한 인자들로 구성된 하나의 객체를 함수의 인자로 넘겨주자. 함수 내부에서는 넘겨받은 객체를 ES2015/ES6 의 구조분해할당 을 통해 개별 변수에 값을 할당하여 사용할 수 있다..
[JavaScript] var, let, const의 비교(+ 블록레벨 스코프)
01. var 키워드는 어떤 문제가 있을까? var 키워드는 중복선언을 허용한다. (기존에 의도와 다르게 변수값이 다르게 할당되는 경우가 발생할 수 있다.) var 키워드는 함수 레벨 스코프만을 허용한다. (함수를 제외한 다른 문에서 선언된 함수는 모두 전역함수가 된다. 전역변수의 남발) var 키워드는 변수 호이스팅에 의해 undefined로 초기화 된다. 02. let 키워드 let 키워드는 동일한 스코프범위내에서 중복선언을 금지한다. (문법에러(SyntaxError)가 발생한다.) function을 포함한 모든 문의 코드블록({}) 을 지역스코프로 인정한다. let은 선언단계와 초기화단계가 구분되어 진행됨으로 _선언단계 후 초기화단계전 까지는 변수를 참조할 수 없는 구간_이 생긴다. 이 구간을 일시..
[JavaScript] 스코프, 렉시컬환경
1. 스코프(Scope)란? Scope를 직역하면 범위, 영역 이라는 뜻입니다. 즉 자바스크립트에서의 스코프는 식별자(변수, 매개변수, 함수)가 유효한 범위 를 말합니다. 스코프(유효범위)는 함수, 변수 등이 선언되는 환경을 기반으로 합니다. var x = 'global'; function foo() { var x = 'local'; console.log(x) } foo(); console.log(x); x라는 변수를 전역환경과 함수내부에서 각각 선언을 해주고 다른 값을 할당해 주었다. 자바스크립트는 어떤 변수를 참조할까? 각각 전역 스코프 와 foo 함수 스코프 를 가짐으로 아래의 결과가 출력 // local // global 그러므로 스코프 란 식별자를 검색할 때 검색 가능한 범위 라..
[JavaScript] 변수(Variable)
변수란 무엇인가? 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 하나의 값을 저장하기 위해 확보한 메모리 공간자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 변수는 왜 필요한가? 100 + 200 자바스크립트 엔진이 식을 계산하기 위해 알아야 할 부분 100, 200, + 기호가 뜻하는 바를 모두 알고 있어야한다. 100 + 200이라는 표현식의 의미도 해석(파싱)할 수 있어야 한다. 자바스크립트는 우선 좌변(100)과 우변(200)의 값(즉, 피연산자)을 메모리에 기억을 하고 CPU를 사용해 연산한다. 메모리 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체이며, 메모리 셀 하나의 크기는 1바이트(8비트)이다. 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를..
[JavaSCript] 자바스크립트 기본 내장객체 (Object, Number, Stirng, Date, Math, JSON )
자바스크립트 내장객체란? 브라우저의 자바스크립트 엔진에 기본적으로 내장되어있는 전역범위의 여러 객체를 말한다. 수많은 객체들이 존재하며 이 객체들을 이용하여 우리는 많은 일들을 해낼 수 있다. 자바스크립트 내장객체의 종류 1) Object 객체 작성중 2) Number 객체 작성중 3) String 객체 작성중 4) Date 객체 1970년 1월 1일을 UTC(국제표준시) 00:00으로 부터 현재까지 지난 시간을 밀리초로 나타낸다. let date = new Date() // 매개변수가 없다면 date변수가 선언된 시간을 할당받는다. // 이렇게 할당된 date 변수에서 원하는 부분을 가져오고 싶다면 이러한 method들을 사용할 수 있다. date.getFullYear(); // 년도 date.getH..
[JavaScript] 실행컨텍스트(Excution Context), 스코프체인, Variable Object
실행컨텍스트란(Execution Context) 실행컨텍스트란 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다. 즉 실행 가능한 코드가 실행되기 위해 필요한 환경이다. 자바스크립트 엔진은 코드를 실행하기 위해 여러가지 정보를 알고 있어야 한다. 실행에 필요한 정보들은 아래와 같다. 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(Scope) this 가장 먼저 자바스크립트 코드가 실행되게 되면 실행컨텍스트 스택에 GEC (Global Execution Context)가 가장 아래에 놓이게된다. 그 후 코드를 읽어가며 실행가능한 함수를 만나게 되고 그 함수를 실행하게 되면 FEC(Function Execution Context)가 GEC 위에 쌓이게 된다. 이렇게..
[JavaScript] DOM(Document Object Model)
DOM이란? Document Object Model 은 문서객체모델이며 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서내의 모든요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. DOM의 표준모델 W3C DOM 표준은 세가지 모델로 구분된다. Core DOM: 모든 문서 타입을 위한 DOM 모델 HTML DOM: HTML 문서를 위한 DOM 모델 XML DOM: XML 문서를 위한 DOM 모델 우리는 이중 HTML DOM을 가장 많이 접하게 될 것이다. HTML DOM을 통해 JavaScript로 HTML에 접근하고 조작 할 수 있다. 웹 프론트엔드에서의 DOM 여러 DOM Element로 구성된 하나의 웹 페이지는 Window를 최상위 부모로 하는 트리구조를 ..
JavaScript | 모던 자바스크립트 Deep Dive 공부기록(1)
위키북스의 이웅모 저자의 모던 자바스크립트 Deep Dive를 공부하면서 정리한 포스트입니다. 저작권 문제시 삭제하겠습니다. 개념과 동작원리 이해의 중요성 프로그래머의 역활은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고,이를 코드로 구현하는 것이다. 프로그래머가 구현한 코드는 의도한대로 정확히 동작해서 문제를 해결해야한다. 이를 위해서는 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측이 가능해야 하며 이를 명확히 설명할 수 있을만큼 이해해야 한다. 그러나 개념과 동작원리에 대해 정확히 이해하지 못한채로 단순히 복사, 붙여넣기만 할 경우에는 언제 어디서 어떻게 에러가 발생해도 이상하지 않은 상태가 되어버린다. 그렇게 되면 신입개발자의 성장에 있어서도 매우 큰 장애물이 되어 버릴..