this는 생성자 혹은 메서드에서 객체를 가리킬 때 사용하는 키워드다. 각 상황에 따라 this가 어떤 객체를 참조하는지 정리해보자. 목차 기본 this 객체에서 this 함수에서 this 객체 생성자 함수에서 this Event handler에서 this bind(), call(), apply() 1. 기본 this this는 기본적으로 window 객체를 참조한다. console.log(this) // window 2. 객체에서 this this는 myColor 객체를 참조한다. const myColor = { color: "blue", checkColor: function() { console.log(this.color); } }; myColor.checkColor(); // blue 3. 함수에서..
ES8에 소개된 async와 await를 사용하여 기존 Promise, then보다 더욱 깔끔하게 코드를 작성할 수 있게 되었다. 목차 기존 Promise() 방식 async, await 방식 1. 기존 Promise() 방식 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const $img = document.querySelector('#img'); const promise = new Promise((resolve, reject) => { $img.addEventListener('load', function() { resolve(); }); $img.addEventListener('error', function() { reject(); }); }) promise.then((res..
ajax를 사용해 여러 번 요청했을 때 성공 여부를 Promise()로 체크할 수 있다. 이때, then() 메서드를 요청 수에 맞게 여러 번 사용해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 const promise = new Promise((resolve, reject) => { $.ajax({ type: 'GET', url: '첫번째 주소' }).done((result) => { resolve(result); }) }) promise.then((r) => { console.log(r); // 첫번째 결과 출력 const promise2 = new Promise((resolve, reject) => { $.ajax(..
Jquery로 ajax를 불러올 경우 done()이라는 함수가 Promise() 역할을 하지만, Promise를 사용해서 성공 여부를 한번 더 체크해보자. 1 2 3 4 5 6 7 8 9 10 11 12 const promise = new Promise((resolve, reject) => { $.ajax({ type: 'GET', url: '가져올 경로' }).done((result) => { resolve(result); }) }) promise.then((r) => { console.log(r) }) Colored by Color Scripter cs 더 간단한 ajax 표현 방식 1 2 3 4 5 6 7 8 const promise = new Promise((resolve, reject) => {..
자바스크립트의 replace 메서드를 사용하여 특정 문자열을 제거해보자. 목차 특정 문자열 하나만 제거 특정 문자열 모두 제거 1. 특정 문자열 하나만 제거 replace 메서드를 사용하면, 특정 문자열의 첫 번째로 발견된 것만 삭제된다. 1 2 3 4 5 6 let myStr = "Hello! World!" myStr = myStr.replace("!", ""); console.log(myStr); // Hello World! Colored by Color Scripter cs 2. 특정 문자열 모두 제거 특정 문자열을 모두 찾아서 모두 제거하고 싶다면 정규표현식을 사용하면 된다. 1 2 3 4 5 6 let myStr = "Hello! World!" myStr = myStr.replace(/\!/g,..
다양한 메서드를 활용하여, 배열에 담긴 문자열을 길이 순서로 정렬 후 오른쪽 정렬하여 출력해보자. 1 const strings = ['very very long string', 'creative', 'hello world']; cs 길이가 다양한 문자열이 담긴 배열이 있다. sort() 메서드를 사용하여 문자열 길이의 내림차순으로 정렬해준다. (sort()의 자세한 설명은 여기) 1 2 3 const strings = ['very very long string', 'creative', 'hello world']; const sorted = strings.sort((a, b) => b.length - a.length); // 내림차순 정렬 ['very very long string', 'hello worl..
함수의 arguments에 대한 개념과 활용에 대해 알아보도록 하겠다. 목차 arguments 개념 화살표 함수에서의 arguments arguments를 배열로 변형 arguments 활용 1. arguments 개념 자바스크립트에서 전달된 인수와 매개변수의 개수는 서로 같지 않아도 된다. 매개변수의 개수보다 인수가 더 적을 경우 넘어오지 않은 값은 undefined로 표시된다. 매개변수 개수보다 초과된 인수는 무시된다. 1 2 3 4 5 6 7 8 function print(ar1, ar2) { console.log(ar1, ar2); } print(); // undefined undefined print('a'); // a undefined print('a', 'b'); // a b print('a..
기존 프로토타입 방식으로 클래스를 생성하는 방법과 ES6의 class를 비교하며 자세히 알아보도록 하자. 목차 프로토타입 방식으로 클래스 만들기 ES6 class 1. 프로토타입 방식으로 클래스 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // 클래스 생성자 function User(name, age) { // 프로퍼티 정의 this.name = name; this.age = age; } // 메서드 정의 User.prototype.showInfo = function() { console.log("User name: " + this.name); console.log("User age: " + this.age); } // 인스턴스 생성 const use..
자바스크립트에서 객체란, 숫자, 문자열, 불 값, null, undefined를 제외한 모든 값이다. 객체는 실제 값이 아닌 참조하는 값으로 처리된다. 따라서 객체는 참조를 가지고 있다고 말할 수 있다. 목차 Set() WeakSet() 1. Set() Set() 메서드는 주로 배열의 중복 값을 제거하기 위해 사용된다. 예약어 new와 같이 작성한다. 1 2 3 4 5 6 7 8 9 const array = [1, 2, 3, 1]; const set = new Set(array); console.log(set); // {1, 2, 3} console.log(toString.call(set)); // [object Set] const newArray = [...set]; // 스프레드 문법 사용하여 객체로..