Front-end/Javascript
-
[JS] 펼침 연산자 사용하기Front-end/Javascript 2020. 11. 29. 22:43
펼침 연산자 ES6이후 사용되다가 ES8에 정식적으로 포함된 기능입니다. ...을 통해 객체를 복사할 수 있습니다. 기존 객체에 추가 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, year: 2019 }; // {title: "코딩의 기술", author: "Joe Morgan", year: 2019} 기존 객체를 갱신 const book = { title: '코딩의 기술', author: 'Joe Morgan', }; const update = { ...book, title: '자바스크립트 코딩의 기술' }; // {title: "자바스크립트 코딩의 기술", author: "Joe Morgan"} 객체..
-
[JS] async - await 알아보기Front-end/Javascript 2020. 11. 29. 22:37
Async - Await 비동기 작업을 진행할 수 있도록 도와줍니다. ES7부터 추가되었습니다. Promise를 기반으로 하고 있기 때문에 Promise 개념을 알고 있어야 이해하기 편합니다. async / await resolve 기존에 Promise를 사용하여 비동기 로직을 수행할 때는 아래와 같습니다. function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }, 1000); }); } p(1000).then((ms) => { console.log(`${ms} ms 후에 실행됩니다.`); // 1000 ms 후에 실행됩니다. }); 만약 위 코드에서 async / await으로 호출하려면 어떻게..
-
[JS] 프로미스(Promise) 알아보기Front-end/Javascript 2020. 11. 29. 22:30
프로미스(Promise) 비동기 작업을 순차적으로 진행할 수 있도록 도와줍니다. ES6부터 추가되었습니다. 프로미스 객체 생성 생성자를 통해 프로미스 객체를 만들 수 있습니다. 생성자의 인자로는 executor 라는 함수를 사용합니다. new Promise(/* execuotor*/); executor 여기서 executor는 resolve와 reject를 인자로 가집니다. 이 두가지는 함수로서 resolve(), reject()로 표현됩니다. new Promise(/* execuotor*/ (resolve, reject) => {}); pending(대기) 생성자를 통해서 프로미스 객체를 만드는 순간 pending 상태가 됩니다. new Promise((resolve, reject) => {}); 위 ..
-
[JS] 클래스 알아보기Front-end/Javascript 2020. 11. 29. 22:26
클래스 클래스는 객체를 만들 수 있는 새로운 방법으로 ES6에서 추가되었습니다. 클래스 생성 방법 클래스는 함수와 다르게 호이스팅이 일어나지 않기 때문에 순서에 맞게 선언해주어야 합니다. 선언 방식 class A {} new A(); 변수 할당(표현식) 방식 const B = class {}; new B(); 생성자 class를 활용해 객체를 만들 때도 인자를 넣어서 생성할 수 있는데, 이 방법에 대해 알아보겠습니다. class Person { constructor(name, age) { console.log(`이 사람의 이름은 ${name}이며 나이는 ${age}입니다.`); } } new Person("junjang", 28); // 이 사람의 이름은 junjang이며 나이는 28입니다. new Pe..
-
[JS] 반복문 알아보기Front-end/Javascript 2020. 11. 29. 22:20
반복문 반복문은 일정한 처리를 한 다음 원래 위치로 돌아가 똑같은 처리를 반복하는 처리를 표현합니다. while 문 while 문은 조건만 맞다면 일정한 처리를 계속 반복해서 실행합니다. while (조건식) { // do something... // break, continue 사용 가능 } while문을 실행하면 가장 먼저 조건식을 평가하고 true면 while 문 블럭을, false면 블럭을 벗어납니다. 반복문에서도 break와 continue를 사용할 수 있습니다. break 문 사용시 : while 문에서 빠져나옴 continue 문 사용시 : while 문의 시작부분으로 돌아감 예제를 통해 알아보겠습니다. function fact(n) { var k = 1; var i = 1; while (i..
-
[JS] 조건문 알아보기Front-end/Javascript 2020. 11. 29. 22:17
조건문 조건문은 조건식의 값에 따라 실행 흐름을 분기합니다. if / else 문 if / else는 만약 ...라면, 그렇지 않으면... 방식의 처리를 담당합니다. if (조건식) { // 조건식이 true 일 때 실행 } else { // 조건식이 false 일 때 실행 } 괄호 안에는 만약에 대한 조건식이 포함되며, true일 경우 윗 블록이 실행되며 false일 경우 아랫 블록이 실행됩니다. var count = 10; if (count > 0) { console.log(`count는 0보다 이상`); } else { console.log(`count는 0보다 이하`); } count가 0보다 크다면 이상이, 0보다 작다면 이하가 나올 것입니다. if / else if / else 문 else i..
-
[JS] 이벤트 알아보기Front-end/Javascript 2020. 11. 29. 22:15
이벤트 이벤트를 통해 화면에서 일어나는 일들에 대한 동작이나 사건들을 수행하고 처리합니다. 웹 브라우저에서 동작하는 프로그램은 기본적으로 이벤트 주도형 프로그램으로서 미리 등록해준 작업을 이벤트가 발생할 때 수행하는 것입니다. 이렇게 등록해준 이벤트를 이벤트 처리기라고 하며 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 처리기를 등록하는 방법은 총 3가지로서 하나씩 살펴보겠습니다. HTML 요소의 속성으로 등록하는 방법 DOM 요소의 프로퍼티로 등록하는 방법 addEventListener 메서드를 등록하는 방법 HTML 요소의 속성에 이벤트 처리기 등록 이 부분에서 onclick이라는 부분이 이벤트이며 그 이벤트는 개발자가 정한 이벤트 처리기 이름이라고 합니다. 예제로는 onclick이라는 이벤트를 ..
-
[JS] 연산자 알아보기Front-end/Javascript 2020. 11. 29. 22:12
연산자 데이터 처리를 하는데에 있어 연산자는 매우 중요한 역할을 합니다. 특히 문자열 처리하는 부분은 대부분의 프로그램에서 꼭 필요하니 잘 이해해야 합니다. 문자열 제어 연산자 + 연산자를 사용하여 문자열을 합칩니다. 모두 문자열일 때 "kim" + "junhyoung"; // "kimjunhyoung" "19" + "93"; // "1993" 문자열로 연결합니다. 하나만 문자열일 때 19 + "93"; // "1993"; 10 + {}; // "10[Object object]" 다른 피연산자의 타입을 문자열로 바꾼 후에 연결합니다. String 객체 메서드 문자열을 처리하기 위한 객체로써 문자열을 생성하기 위해 String 생성자를 사용하여 생성합니다. var hello = new String("안녕"..