setTimeoutsetTimeout 은 정해진 시간 뒤에 콜백함수를 실행하는 자바스크립트 api다.setTimeout(() => { console.log('hi');}, 1000);위의 자바스크립트를 실행하면 1초 뒤에 콘솔에 'hi' 가 찍히는 것을 볼 수 있을 것이다. setIntervalsetInterval 은 정해진 시간 간격으로 콜백함수를 계속 실행하는 자바스크립트 api다.setInterval(() => { console.log('hi');}, 1000);위의 자바스크립트를 실행하면 1초 간격으로 콘솔에 'hi' 가 찍히게 된다. setTimeout 으로 setInterval 만들기setTimeout 과 setInterval 의 기본적인 차이점은 한 번 실행하느냐, 반복적으로 실행..
JS
JS: 함수에 대하여 "인사이드 자바스크립트" 책을 구입해서 읽던 중 4장 제목이 함수와 프로토타입 체이닝인데 몰랐던 부분이 많고, 정리해두면 좋을 것 같아서 글을 쓰게 되었다. 함수 정의 함수는 세 가지 방법으로 정의할 수 있다. 함수 선언문 함수 표현식 Function() 생성자 함수 자바스크립트에서는 함수도 객체이다. 그래서 조금 어색하지만 변수에 함수의 레퍼런스를 담을 수 있고, 객체를 리터럴로 생성하듯 함수도 리터럴로 생성할 수 있다. 함수 선언문 function add(a, b) { return a + b; } 위의 코드가 함수 리터럴 방식이자 함수 선언문 방식이다. 사실 리터럴 방식과 함수 선언문은 약간의 차이점이 존재하는데, 리터럴은 함수 이름이 선택사항이다. add 라는 이름이 없어도 리..
큰 수를 표현해야 할 때, 콤마를 찍지 않으면 보기 어렵다. 123456789123456789 보다 123,456,789,123,456,789이 보기 쉬울 것이다. JS에서 숫자를 위의 단위로 콤마를 찍을 때는 toLocaleString()을 사용하면 된다. const number = 123456789123456789; console.log(number.toLocaleString()); toLocaleString을 사용할 때 다양한 옵션을 줄 수 있는데 이는 따로 검색을 통해 알아보면 된다. 이제 숫자로 구성된 문자열을 toLocaleString 하는 것을 보여주도록 하겠다. const stringNumber = '123456789123456789'; console.log(parseInt(stringNu..
Async & Await async와 await를 사용하면 synchronous식으로 promise를 사용하게 해줌 기존에 존재하는 promise를 감싸 사용하기 쉽게 해주는 syntactic sugar Promise가 항상 나쁘다는 것은 아님 Async 아래 두 fetchUser function은 똑같이 promise를 리턴함 // promise function fetchUser() { return new Promise((resolve, reject) => { resolve('chamy'); }); } // async async function fetchUser() { return 'chamy'; }async를 사용하면 코드 블럭이 promise로 변경됨 async를 사용하..
Promise Promise는 비동기 처리를 위한 JS object State는 promise가 만들어져서 operation이 수행중인 경우 pending, 완료 상태는 fulfilled 상태, 문제가 발생한 상태는 rejected 상태 데이터를 만드는 Producer와 데이터를 소비하는 Consumer Producer const promise = new Promise((resolve, reject) => { // 네트워크 또는 파일을 읽어오는 부분을 주로 처리 console.log('doing something...'); setTimeout(() => { resolve('chamy'); }, 2000); });Promise는 생성되자마자 자동적으로 executor가 바로 실..
Callback JS는 기본적으로 hoisintg 이후 동기적(Synchronous) -> 작성한 순서대로 동작 console.log('1'); // Synchronous setTimeout(() => console.log(2), 1000); // Asynchronous, Callback console.log('3'); // Synchronous // 1 // 3 // 2Synchronous Callback function printImmediately(print) { print(); } printImmediately(() => console.log('hello'));printImmediately가 hoisitng 돼서 가장 위에서 선언되고, 아래에서 이를 호출..
Json HTTP HyperText Transfer Protocol AJAX Asynchronous Javascript And XML 웹 페이지와 서버가 비동기적으로 데이터를 주고 받음 XML HTML과 같은 Mark up language 태그로 데이터를 표현할 수 있음 현재는 XML보다 JSON을 더 많ㅇ ㅣ사용 JSON JavaScript Object Notation ES3의 object에 큰 영감을 받아 만들어진 데이터 포맷 Javascript의 object처럼 key와 value로 이루어져 있음 프로그래밍 언어와 플랫폼에 독립적 -> 모든 언어에서 사용될 수 있음 Sender는 object를 serialize하고 receiver는 Object를 deserialize함 Object To JSON s..
Array Declaration 배열 선언 방법은 다음과 같이 두 가지 방법이 있음 const arr1 = new Array(); const arr2 = [1, 2]; Index Position const fruits = ['apple', 'banana']; console.log(fruits[0]); // apple console.log(fruits[1]); // banana Looping Over an Array 배열의 내용을 모두 출력하는 방법은 여러가지가 있음 전통적인 for loop // for for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } 이전에 object에서 봤던 for of // for of for (let frui..
Object object는 key와 value의 집합체 Literals and Properties Object 만드는 방법 // object literal const chamy = { name: 'Chamy', // key: name, value: Chamy age: 27 // key: age, value: 27 } // object constructor const chamy = new Person('Chamy', 27); Computed Properties console.log(chamy.name); // Chamy console.log(chamy['name']); // Chamy
Class Template 역할을 함 붕어빵을 찍어내기 위한 빵틀 class는 ES6 이후 추가된 내용 Class Declaration class Person { // constructor(생성자) constructor(name, age) { this.name = name; this.age = age; } }Getter and Setter class User { constructor(firstname, lastname, age) { this.firstname = firstname; this.lastname = lastname; this.age = age; } get age() { return this._age; } set age(value) { if (value < 0) { throw Error('..
