목록VanillaJS (12)
바르고 뜨겁게
async/await은 ES2017 부터 지원//// Promise 사용 //// Users.findOne('kim') .then((user) => { console.log(user); return Users.update('kim', 'jeong'); }) .then((updateUser) => { console.log(updateUser); return Users.remove('jeong'); }) .then((removeUser) => { console.log(removeUser); }) .catch((err) => { console.error(error); }); console.log('종료'); // 종료가 먼저 호출되고 promise가 실행된다. //// async/await 사용 ///..
ES2015 이전에는 콜백형태로 비동기를 사용했다.콜백형태의 단점: 계속해서 콜백 내에서 작업해야되며 깊이가 깊어져 시안성이 낮다ES2015 Promise가 등장하면서 직관적으로 코딩이 가능하다.Users.findOne('kim', (err,user)=>{ if(err){ return console.error(err) } console.log(user); // 한번 콜백을 사용하면 계속 콜백안에서 작업해야된다. Users.update('kim', 'jeong', (err, updateUser)=>{ if(err){ return console.error(err) } console.log(updateUser); Users.remove('jeong', (err, removeUser)=>{ if(err){ ..
REST 문법 (배열)순서대로 넣는게 아니라, 남은 요소를 다 넣고을땐 아래처럼 하면 된다.rest로 여러개의 변수를 모아서 배열로 만든다.const array = ['nodeJs', {}, 10, true]; const [node, obj, ...bool] = array; bool; // [10, true]const m = (x,y) => console.log(x,y); m(5,6) // 5, 6 m(5,6,7,8,9) // 5, 6 const n = (x, ...y) => console.log(x,y); n(5,6,7,8,9) // 5, [6,7,8,9]
var candyMachine = { status: { name: 'node', count: 5, }, getCandy: function(){ this.status.count--; return this.status.count; } } var status = candyMachine.status; var getCandy = candyMachine.getCandy;var status = candyMachine.status;위와 같이 변수이름과 속성이름이 같을때 ES2015에선 간단하게 표현할 수 있는 문법을 제공한다.const a = 객체.a const b = 객체.bconst { a,b } = 객체const candyMachine = { status: { name: 'node', count: 5, }, ..
function(매개변수) { return 리턴값 } 을 (매개변수)=>{ return 리턴값 }으로 표현 가능const add = function(x, y){ return x + y; }const add = (x, y) => { return x + y; } 중간 처리과정이 없고 리턴만 있는 경우 더 줄일 수 있다.(매개변수) => 리턴값const add = (x, y) => x + y;단, 화살표 함수와 function 은 차이점이 있다.this가 가르키는 대상이 다름.function 내부의 this는 외부의 this와 다르기때문에 따로 변수에 빼서 사용했어야 했음.화살표 함수는 함수 내부의 this를 외부의 this와 같게 만들어 준다.
var obj = { a: 1, b: 2 };위 와 같이 사용하는것을 객체 리터럴이라고 한다.ES2015 이후로는 객체리터럴이 좀더 사용하기 편리하도록 변경되었다.var sayLog = function(){ console.log('Log') }; var es = 'ES'; var oldObject = { sayHello : function(){ console.log('Hello') }, sayLog : sayLog }; oldObject[es + 6] = 'Fantastic';const newObject = { sayHello(){ console.log('hello'); }, sayLog, [es + 6] : 'Fantastic' };sayHello : function(){} 을 sayHello(..
다음과 같이 자바스크립트에서 이벤트를 캐치해서 사용이 가능하다.단, 주의할점은 window.addEventListener("resize", handleResize())상기와 같이 호출함수 자리에 handleResize() 처럼 사용하면 이벤트가 발생됬을대 함수가 호출되는게 아니라즉시 호출되어 버린다. .addEventListener("이벤트이름", 호추함수명) - 이벤트리스너"resize"// event 파라미터는 어디서생성되는가? 자바스크립트가 자동으로 함수에 객체를 붙인다. function handleResize(event){ console.log("사이즈변경 핸들러 호출 : ", event); } window.addEventListener("resize", handleResize); // ("이..
const calculator = { plus: function(a, b){ return console.log(a+b); }, min: function(a, b){ return console.log(a-b); } } calculator.plus(10, 5); calculator.min(10, 5);
ES2015 이전에는 변수와 문자열을 같이 사용할때는 아래와 같이 사용했었다var age = 33; var name = "jh"; var info = "내이름은 " + name + " 나이는 " + age + " 입니다." var info2 = "내이름은 ", name, " 나이는 ", age, " 입니다." 하지만 ES2015 이후에는 문자열이 템플릿 처럼 쓰일 수 있게 되었다.아래와 같이 `(백틱)을 사용한다.const info = `내이름은 ${name} 나이는 ${age} 입니다.` 추가로 줄바꿈도 ES2015 이전에는 \n을 사용했는데, 백틱을 사용하면 눈에 보이는 그대로 적용이 가능하다var intro = '바르고 \n뜨겁게'; const intro2 = `바르고 뜨겁게`;