본문 바로가기

전체 글

 (596)
[ JavaScript ES 6 ] Symbol 사용법 1. ES6에서 Symbol 자료형이 추가됨 심볼은 아래처럼 만들면 됨 var sym = Symbol('description'); 2. 심볼의 용도 Object 자료형의 비밀스런 key값 for in 문법으로 반복문 돌면 Symbol은 참조 안됨! Symbol은 enumerable하지 않기 때문! var secretWeight = Symbol('my secret weight'); var person = {name: 'oh'}; person[weight] = 100; 3. 심볼 넣는 다른 방법 var person = {name: 'kim', [height]: 170}; 4. 심볼 특징 1) 설명이 같아고 같은 Symbol이 아님. Symbol 생성할 때마다 고유한 Symbol임 var a = Symbol(..
[ JavaScript ES 6 ] for in, for of 반복문 1. for in 반복문 Object에 있던 값을 전부 하나씩 꺼내서 사용할 때 쓰는 문법 enumerable 한 것만 반복해줌 부모의 prototype도 반복해줌 class parent { } parent.prototype.name = "Park"; //var obj = {name: 'kim', age: 30}; var obj = new parent(); for (var key in obj){ if(obj.hasOwnProperty(key)){ // 부모꺼 빼고 내꺼만 출력 console.log(obj[key]); } } 2. for of 반복문 Array, 문자, arguments, NodeList, Map, Set 등에 사용 iterable한 자료형에만 사용 가능 -> Symbol.iterator가..
[ JavaScript ES 6 ] async, await 1. ES8부터 Promise 대신 async/await 문법 사용 가능 async를 function 앞에 붙이면 함수 실행 후에 Promise 오브젝트가 남음 But, async는 Promise와 달리 기본적으로 reject 처리가 안됨. 정 하고 싶으면 Promise.reject()를 리턴해야 함. async function add(){ return 1 + 1; } add().then(function(res){ console.log(res); }) 2. await은 then() 대신 사용 가능 var pro = new Promise(function(resolve, reject){ resolve(); }); var result = await pro; // Promise가 끝날 때까지 기다려! conso..
[ JavaScript ES 6 ] Promise 1. 콜백함수는 여러번 쓸수록 depth가 깊어지고 가독성이 안좋아지는 문제가 있음 -> 더 쉽게 쓰기 위해 탄생한게 Promise 패턴 // Callback func1(function(){ func2(function(){ func3(function(){ }) }) }); // Promise func1().then(function(){ }).then(function(){ }) 2. Promise는 코드 디자인 패턴이다. var pro = new Promise(); pro.then(function(){ }); 3. Promise는 이전 작업이 성공할 경우 then(), 실패할 경우 catch()를 사용해서 모든 경우에 대비할 수 있도록 해줌 4. Promise는 성공/실패 판정 기계 var pro = ne..
[ JavaScript ES 6 ] 비동기식 처리 1. JavaScript의 비동기식 처리 -> setTimeout(), 이벤트 리스너, ajax 2. 함수들을 좀 더 안전하게 순차적 실행을 하려면 콜백 함수 사용 콜백함수는 함수 디자인 패턴일 뿐, 순차적 실행을 '반드시' 지켜주진 않음. 오래 걸리는 연산은 그냥 비동기로 실행될수도 있음. function func1(paramFunc){ console.log(1); paramFunc(); } function func2(){ console.log(2); } func1(func2));
[ JavaScript ES 6 ] 웹브라우저 동작 원리 1. 웹브라우저 동작 원리 setTimeout() 이런거는 stack에서 바로 처리하는 게 아니라 대기실에 넣어놨다가 실행시키기때문에 다른 언어의 Sleep()처럼 Pending되지 않음. 어려운 수학 계산 등 오래 걸리는 작업은 자바스크립트로 수행하면 안됨. 이 작업이 Stack을 차지하고 있어서 사용자의 UI Request가 Queue에서 Stack으로 올라가지 못하기 때문에 사용자는 "응답없음" 화면을 보게 됨. 1) stack을 바쁘게 하지 말자 2) queue를 바쁘게 하지 말자 event listener 백개 천개 달아놓는 등..
[ JavaScript ES 6 ] import, export 1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능 는 옛날 방식, but 호환성은 그만큼 좋음 require()도 옛날 방식 // main.js // library.js var a =10; export default a; 2. export default는 파일 하나당 한번만 사용 가능 여러개 export 하려면 export {a, b, c}; 이렇게 하거나 export {a}; export {b}; 이렇게 하거나 export var a = 10; 이렇게 하면 됨 3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함. 똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음 import {a as myA} from '/libr..
[ JavaScript ES 6 ] Destructuring 1. Destructuring ES6에서 Array로부터 변수 만들기 좀 더 쉬워짐 var [a,b,c] = [2,3,4]; 2. Destructuring 하면서 몇개 빼먹을 경우를 대비해 default 값 지정 가능 var [a,b,c = 10] = [2,3]; 3. Object 데이터의 Destructuring 변수명을 key명과 똑같이 써주어야 함 var { name, age } = { name : 'Kim', age : 30 }; // 변수명 변경 가능하고 default 값 지정도 가능 var { name : myName, age = 31 } = { name : 'Kim' }; 4. Destructuring을 역으로 이용하는 방법이 많이 쓰임 var name = 'Kim'; var age = 30..

티스토리툴바