본문 바로가기

Dev/JavaScript

(6)
Promise 문법 사용하기 Javascript는 파일 읽기, 쓰기, 등 많은 비동기 작업이 필요하다. 그 중 대표적으로 사용되는 것이 Promise이다.function promiseStudy(param){ return new Promise(function(resolve, reject){ setTimeout(function(){ if(param){ resolve("성공") }else{ reject("실패") } }, 3000) })}setTimeout( function(){ promiseStudy(true).then(function(temp){ console.log(t..
JavaScript - var, let , const 차이 최근 자바스크립트를 공부하면서 세개의 차이가 궁금해졌다. const의경우는 다른 언어들에도 많은 한 번 결정되면 절대 변하지 않는 변수임을 당연히 알고 있다. var과 let의 차이는 뭘까? 1. 범위 function varScope() { if (true) { var x = 10; } console.log(x); // 10 - 함수 스코프를 가지므로 접근 가능}function letScope() { if (true) { let y = 10; } console.log(y); // ReferenceError - 블록 스코프를 가지므로 접근 불가}varScope();letScope(); var는 함수 범위를 가지기 때문에 블록을 벗어나도 접근이 가능하..
JavaScript - 자바스크립트의 클래스 자바스크립트는 특이하다.. 클래스를 구성하는데 클래스의 구성원들을 컨스트럭터(생성자)에서 결정한다. class Korean { constructor(name, age) { this.name = name; this.age = age; this.country = 'Korea'; } addAge(age) { return this.age + age; }} 그리고 자바스크립트 답게 메소드의 형식은 지정할 필요가 없고 private public 이 없다. 기본적으로 모두 public 이다.하지만 함수 앞에 #을 붙이면 프라이빗을 정의된다. 메소드 이름 앞에 #이라니 조금 생소하다..!! class Pet { constructor(name, age) { console..
javascript - 객체 정렬 개발을 하다보면 가장 많이 쓰이는 함수가 정렬이 아닐까 싶다.그리고 정렬은 각 언어들마다 조금씩 쓰는 법이 달라서 이번 기회에 자바스크립트의 정렬에 대해 정리하고자 한다. const user = [ { name: '홍길동', age: 40 }, { name: '임꺽정', age: 12 }, { name: '주몽', age: 23 }, { name: '척준경', age: 88 },];// 나이순 오름차순const result1 = user.sort((a, b) => a.age - b.age); console.log('result1: ', result1);/* { name: '임꺽정', age: 12 }, { name: '주몽', age: 23 }, { name: '홍길동', age: 4..
JavaScript - 고차함수(map, fill, reduce) 자바스크립트는 함수형 프로그래밍에 알맞은 언어라고 한다. 그리고 자바스크립트를 이렇게 만들어주는 요소가 JavaScript의 고차개념이다. 고차함수는 자바스크립트에서 광범위하게 사용되며 이것을 모른다면 자바스크립트 개발자라할 수 없다. 함수형 프로그래밍이란, 함수를 다른 함수의 파라미터로 넘길 수 있고(!!) 반환값으로 함수(!!)를 받을 수 있는 프로그래밍 형태이다. C/C++ 같은 고전파와 비교가 안되는 유연함이다. Java 진영 또한 점진적으로 함수형 프로그래밍을 위해 고차함수를 받아들이는 추세이다. 자바스크립트는 함수를 객체로 받아들이기 때문에 위와 같은 행동들이 가능하다. 리턴값으로 넘긴다던가, 파라미터로 받는다던가. 그래서 다음과 같은 행위가 가능하다. const square = functio..
JavaScript - 이벤트 핸들러 이벤트 핸들러 : 웹 페이지에서 사용자 상호작용과 관련된 동적인 기능을 구현하기 위해 사용되는 기술이다. Ex) 마우스 클릭, 키보드 입력, 스크롤 등 자바스크립트는 다양한 이벤트 핸들링 API를 제공한다. HTML 내부 이벤트 핸들러 Click me 여기서 버튼을 누르면 onClick이라는 이벤트 핸들러에 통제하에 실행된다. 그리고 아래 스크립트 태그에서 자바스크립트 코드를 정의하고 있다. 그러나 이것은 지양하는 방법이다. 유지보수가 어렵고 보안에도 좋지 않다. 그래서 Chrome 확장 프로그램에서는 아에 내부 이벤트 핸들러가 포함되어 있으면 실행조차 안되도록 만들어 버린다. HTML 외부 이벤트 핸들러 텍스트 입력: Click me document.addEventListener('DOMContentL..