본문 바로가기

Front-end/Javacript

 (28)
자바스크립트 Tutorial By Ellie (10) 프로미스 개념부터 활용까지 JavaScript Promise promise.js 'use strict'; // Promise is a JavaScript object for asynchronous operation. // State: pending -> fullfulled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. // Promise Object 만들기 // 무거운 작업은 Promise로 비동기적으로 하는게 좋다 const promise = new Promise((resolve, reject) => { // doign some heavy wo..
자바스크립트 Tutorial By Ellie (9) 동기 : Code가 작성된 순서대로 실행 비동기 : Task가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 Task를 실행한다. Callback : 비동기로 주어진 일을 다 마친다음에 해당 함수를 실행하도록 추후 업무를 맡겨놓는 것 'use stric'; //////////////////////////////////// // 1. JavaScript is aychronous //////////////////////////////////// // Execute the code block in order after hoisting // code가 나타나는 순서대로 실행이 된다 // hoisting: var, function declaration // callback : 전달해준 함수를 다시 불러줘 //..
자바스크립트 Tutorial By Ellie (8) 10. JSON 개념 정리 와 활용방법 유용한 사이트: JSON Diff checker: http://www.jsondiff.com/ JSON Beautifier/editor: https://jsonbeautifier.org/ JSON Parser: https://jsonparser.org/ JSON Validator: https://tools.learningcontainer.com/json-validator/ //////////////////////////////////// // JSON //////////////////////////////////// // JavaScript Object Notation // 1. Object to JSON // stringify(obj) let json = JSON..
자바스크립트 Tutorial By Ellie (7) 'use strict'; // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(' & '); console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(","); console.log(result); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; const result = array.reverse..
자바스크립트 Tutorial By Ellie (6) 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 비슷한 종류의 데이터를 묶어서 한곳에 보관하는것이 "자료구조" Object 자료구조 Object와 자료구조의 차이 Object : 서로 연관된 특징과 행동을 묶어놓는 것 자료구조 : 비슷한 타입의 Object들을 묶어놓는 것 보통 다른언어에서는 동일한 타입에 Object만 담을 수 있다 JavaScript === dynamically typed language 자바스크립는 다 담을 수 있지만 좋지 않다. 자료구조 알고리즘 : 어떤상황에 뭘 써야하는지 공부 배열 칸칸히 모여있는 자료구조 Index지정되어있음 Index로 접근에 중간중간 삭제가능하다 // Array🎉 // 1. Declaration const arr1 = new Arra..
자바스크립트 Tutorial By Ellie (5) 7. 오브젝트 넌 뭐니? // Objects // one of the JavaScript's data types // a collection of related data and/or functionality // Nearly all objects in javaScript are instance of Object // object ={ key : value }; // 비효율적 // const name = 'ellie'; // const age = 4; // print(name, age); // function print(name, age) { // console.log(name); // console.log(age); // } //////////////////////////////////// // 1. L..
자바스크립트 Tutorial By Ellie (4) 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 메소드가 없고 필드만 있으면 "데이터 클레스" 내부적으로 보일수 있는변수와 밖에서 보일수 있는 변수를 "캡슐화" Class를 이용해 상속, 다양성이 가능한데 이런것들이 가능한게 "객체지향언어" Class 붕어빵을 만들 수 있는 "틀" (청사진, 템플릿 이라고도 부름) Class를 이용해 새로운 인스턴스를 생성하면 object가 된다 Class는 정의만 한것이라 메모리에 올라가진 않는다 Object를 넣으면 메모리에 올라가게 된다 JavaScript Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 'use strict'; // Obj..
자바스크립트 AnotherCourse By Ellie (1) 자바스크립트 함수 ////////////////////////////////// // 1. 함수 선언 & 호출 ////////////////////////////////// // 함수 선언 function dosomething() { console.log('hello'); } // 함수 호출 dosomething(); ////////////////////////////////// // 2. 갑을 리턴하는 함수 ////////////////////////////////// //어떤함수는 인자값들을 받아와서 코드를 수행한다 function add(a, b) { const sum = a + b; //계산한 값을 전달하고 싶다면 return sum; } // function add(a, b)에 1, 2가 전달된..

티스토리툴바