본문 바로가기

programming study/JavaScript

 (186)
ES6 - const & let 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. const & let 블록 단위로 변수의 범위가 제한 블록단위란, { }를 말함 const: 한 번 선언한 값에 대해서 변경할 수 없음 (상수 개념) 재할당 불가능 let: 한 번 선언한 값에 대해서 다시 선언할 수 없음 재할당 가능 재선언 불가능 ES6 - 블록 스코프 블록 단위로 변수의 범위가 제한 let sum = 0; for (let i = 1; i
ES6 & Babel 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. ES6 const & let, Arrow Function, Enhanced Object Literals, Moduels ECMAScript 2015와 동일한 용어 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식 ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 편하게 할 수 있음 2. Babel 모든 브라우저가 ES6를 지원하는 것은 아님 Transpiling이 필요 Babel은 ES6의 문법을 ES5로 변환 Refer..
Scope & Closure 본 내용은 10분 테코톡 엘라님의 강의를 토대로 작성하였습니다. 1. 스코프 스코프란? 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것 JavaScript를 포함한 모든 프로그래밍 언어에서 기본적인 개념 전역에서 선언된 경우 -> 전역변수 전역 스코프를 가짐 지역에서 선언된 경우 -> 지역변수 지역 스코프를 가짐 스코프 체인 함수의 중첩: 함수는 전역에서 선언될 수도 있고 또다른 함수 내부에서 선언될 수 있음 중첩 함수: 함수 내부에서 선언된 함수 외부 함수: 중첩 함수를 포함하는 함수 함수가 중첩이 된다면 각각 함수의 스코프도 중첩이 됨 -> 스코프가 함수의 중첩에 의해 계층적인 구조를 가질 수 있음 스코프체인:..
Generator & Iterator (2) - Generator 본 내용은 10분 테코톡 파노님의 강의를 토대로 작성하였습니다. 1. Generator Function Generator Function은 Generator Instance를 생성 new 키워드를 사용한 인스턴스 생성([[constructor]])이 아닌, 일반적인 함수호출([[call]])을 통해 인스턴스를 생성 Generator 함수의 특별한 동작 function* generatorFunction() {}; const generator = generatorFunction(); typeof generator; // 'object' Generator Syntax function* : Generator 함수 선언 키워드 yield : Generator 함수 내부에서 사용하는 키워드 next ..
Generator & Iterator (1) - Iteration Interface 본 내용은 10분 테코톡 파노님의 강의를 토대로 작성하였습니다. 1. 일반적인 배열 순회 방법 배열의 length 프로퍼티를 이용하여 for문으로 인덱스를 증가시켜 데이터에 접근 해당 객체에 대한 length 정보가 필요 index는 0이상의 정수로써 순차적으로 증가해야함 단점 : 코드가 명령적이고 의도가 잘 드러나지 않음 for of 문을 사용하여 순회하는 것이 더 명시적임 const arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { const element = arr[i]; console.log(element); } 2. Iteration Interface ECMAScript 명세에 정의 세 개의 인터페이스로 구성 Iterable Iterator It..
ES Modules 본 내용은 노마드 코더님의 Export Default 과연 제대로 알고계십니까? 강의를 토대로 작성하였습니다. 1. 모듈 코드를 파일 단위로 나누어 모듈화 코드를 모듈화하여 사용하는 것이 편리성, 유지보수 측면에서 좋음 다이나믹 모듈을 이용하면 애플리케이션 로딩을 빠르게 할 수 잇음 import, export 하여 사용 2. Named Export & Syntax Import Named Export Math.js 모듈에서 각기 다른 3개의 함수를 export // math.js export const plus = (a, b) => a + b; export const minus = (a, b) => a - b; export const divide = (a, b) => a / b; Syntax Import ..
불변성 본 내용은 10분 테코톡 인치님의 강의를 토대로 작성하였습니다. 1. 불변성이란? 변하지 아니하는 성질 함수형 프로그래밍에서 중요하게 여겨지는 개념 2. 자바스크립트에서의 불변성 자바스크립트에서 원시타입은 불변하고, 참조타입은 가변적이다. 자바스크립트에서 메모리상 데이터값은 불변하다. 원시타입: Number, String, Boolean, Null, Undefined, Symbol 참조타입: Array, Object, Function, Date, RegExp … Low Level에서의 불변성 1 변수에 값을 할당할 떄 빈 변수 영역에 변수를 할당 빈 데이터 영역에 값을 할당 데이터가 저장된 주소를 변수의 영역에 저장 변수의 값을 검색할 때 변수 영역에 저장되어 있는 데이터 주소 값으로 이동 변수에 새 값..
타입스크립트 입문 - 인터페이스 본 내용은 인프런 장기효(캡틴판교)님의 타입스크립트 입문 - 기초부터 실전까지 강의를 토대로 작성하였습니다. 1. 인터페이스란 상호 간에 정의한 약속 또는 규칙 변수가 어떤 타입으로 이루어져 있는지 명시적으로 알 수 있음 함수에게 필요한 파라미터가 어떤 타입을 가졌는지, 어떤 타입을 가진 값을 반환하는 지 알 수 있음 코드의 의도를 파악하기 용이 예시 // User 인터페이스는 age를 숫자로, name을 문자로 가지는 객체임을 약속 interface User { age: number; name: string; } var siru: User = { age: 6, name: '시루', } 2. 함수에 인터페이스 적용하기 함수의 인자를 정의하기 함수의 인자에 인터페이스를 적용할 수 있음 인자의 인터페이스와 ..

티스토리툴바