본문 바로가기

JavaScript

JavaScript/javascript 기초 공부하기 2020. 1. 26. async / await Promise를 더욱 쉽게 사용할수 있게 해준다 함수를 선언할때 async를 붙여주고 promise의 앞부분에 await를 붙여주면 해당 프로미스가 끝날떄까지 기다렸다가 작업을 수행한다 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); 또한 함수에서 async를 사용하면 결과값으로 Promise를 반환한다 즉 then이 사용 가능해진다 function sleep(ms) { return new Promise(resol..
JavaScript/javascript 기초 공부하기 2020. 1. 25. callback hell, Promise 함수안에 인자로 함수를 넣어주는걸 반복하는걸 callback 다섯번째 걸쳐서 1초마다 1씩 더해주는 코드를 setTimeout으로 구현하기 위해서는 해당과 같은 작업을 해야한다 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { cons..
JavaScript/javascript 기초 공부하기 2020. 1. 25. spread, rest 문법 spread 연산자 ... 을 활용한 연산자 ...slime 을 하면 해당 내용이 담긴다 const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const blueCuteSlime = { ...cuteSlime, color: 'blue' }; console.log(slime); console.log(cuteSlime); console.log(blueCuteSlime); 배열에서도 사용 가능하다 const animals = ['개', '고양이', '참새']; const anotherAnimals = [...animals, '비둘기']; console.log(animals); console.log(anotherAnim..
JavaScript/javascript 기초 공부하기 2020. 1. 24. 비구조화 할당(구조분해) const animal = { name: '멍멍이', type: '개' }; const { name: nickname } = animal console.log(nickname);​ const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 비구조화 할당: 객체안에 있는 값을 추출해서 바로 선언해서 사용할 수있게 하는 형태 함수의 파라미터도 비구조화 할당이 가능하다 const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); 기본값 지정도 가능하다 const ob..
JavaScript/javascript 기초 공부하기 2020. 1. 24. 조건문 활용 include를 활용하면 조금더 깔끔하게 조건문을 쓸 수 있다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false function isAnimal(name) { const animals = ['고양이', '개', '거북이', '너구리']; return animals.includes(name); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false co..
JavaScript/javascript 기초 공부하기 2020. 1. 24. Truty and falsy, 단축 평가 논리 계산 print()에 빈값(undefined) or null 이 들어가면 오류가 발생하게 되어 해당과 같은 처리를 해주어야 오류가 발생하지 않는다. function print(person) { if (person === undefined || person === null) { console.log('person이 없네요'); return; } console.log(person.name); } const person = null; print(person); undefined와 null값은 모두 false라는 뜻을 가지고 있기때문에 !person으로 대체해서 사용할 수 있다 function print(person) { if (!person) { console.log('person이 없네요'); return; } ..
JavaScript/javascript 기초 공부하기 2020. 1. 24. 프로토타입과 클래스 prototype. 함수 = function() 등으로 값을 에 넣어줄수 있다 function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } Animal.prototype.say = function() { console.log(this.sound); }; Animal.prototype.sharedValue = 1; const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); console.log(dog.sharedValue); console.log(cat.sharedV..
JavaScript/Ajax, Axios(비동기 통신) 2020. 1. 22. json < - > xml간 연동 naver http://www.naver.com 네이버 daum http://www.daum.net 다움 google http://www.google.co.kr 구글 click

티스토리툴바