ansui

#9 async & await - 직관적인 비 동기 처리 코드 작성하기 : Promise를 더 쉽게 이용할 수 있도록 도와줌function hello() { return "hello"; } async function helloAsync() { return "hello async"; } console.log(hello()); //hello console.log(helloAsync()); helloAsync().then((res) => { console.log(res); }) //hello async function delay(ms) { return new Promise((resolve) => { setTimeout(() => { resolve(..

#8 Promise - 콜백 지옥에서 탈출하기 Pending (대기 상태): 현재 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생한 경우 해결 (resolve) → Fulfilled (성공): 비동기 작업이 의도한 대로 작업된 상태 거부 (reject) → Rejected (실패): 비동기 작업이 실패한 경우 *Promise는 만들어지면 자동적으로 실행 function isPositive(number, resolve, reject) { setTimeout(() => { if(typeof number === 'number') { //성공 -> resolve resolve(number >= 0 ? "양수" : "음수") } el..

#7 동기 & 비동기 : 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 : 이전 작업이 진행 중 일때는 다음 작업을 수행하지 않고 기다림 (동시 수행 x) : 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. → 동기 방식의 처리 (=블로킹 방식) : 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 기다려야 하므로 전반적인 흐름이 느려진다. : 코드를 실행한는 일꾼 Thread를 여러개 사용하는 방식 : 작업 분할 가능 *자바스크립트는 싱글 쓰레드로 동작 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하..

#4 조건문 업그레이드 : 조건이 많아지면 전부 다 쓸 수 없다. function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("피자"); console.log(food1); //true console.log(food2); //false function isKoreanFood(food) { if (["불고기", "비빔밥", "떡볶이"].includes(food)) { return true..

#1 Truthy & Falsy : 참 같은 값, 거짓 같은 값 //TRUE로 인식되는 경우 let a = "string"; let a = []; let a = {}; let a = 43; let a = "false" let a = Infinity; //FALSE로 인식되는 경우 let a = null; let a = ""; let a = undefined let a; let a = 0; let a = NaN; if(a) { console.log("TRUE"); } else { console.log("FALSE"); } const getName = (person) => { return person.name; }; let person1 = { name: "이정환" }; const name..

#11 배열 내장 함수 : 배열 순회 const arr = [1, 2, 3, 4]; for (let i=0; i console.log(elm) ); //1 2 3 4 arr.forEach((elm) => console.log(elm * 2) ); //2 4 6 8 /* 같은 코드 arr.forEach(function (elm) { console.log(elm); }); */ : 원본 배열의 모든 요소를 순회하면서 연산을 한 후 return 값 반환 arr = [1, 2, 3, 4]; const newArr = []; arr.forEach..

#8 객체 - key : 문자열로 작성 : 중복되어도 문제는 없지만 추천하지 않는다. - property (객체 프로퍼티) : 속성, 객체가 갖는 데이터 : 여러 개의 값을 가질 수 있다. : 어떤 자료형이든 사용 가능 let person = new Object(); //생성자 이용 let person = { key: "value", //프로퍼티 key1: 123, key2: true, key3: undefined, key4: [1, 2], key5: function() {} }; //객체 리터럴 방식 console.log(person); //{key: "value", key1: "value2"} console.log(person.key1); //123 (점표기법) console.log(person.ke..

#5 함수 - 순서: 함수 선언 → 함수 호출 → 함수 안 → 함수 종료 - 여러번 호출 가능 - 함수 내에서 선언한 지역변수는 함수 내에서만 사용 가능 - 함수 외에서 선언한 전역변수는 함수 내/외에서 사용 가능 //함수 선언식, 함수 선언 방식의 함수 생성 function getArea() { let width = 10; let height = 20; let area = width * height; console.log(area); } getArea(); //200 //매개변수 사용 function getArea(width, height) { let area = width * height; return area; } let area1 = getArea(10, 20); //area1 = 200 #6 함..

#1 변수와 상수 - 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 도구 - 변수명에는 기호를 사용할 수 없다. ( _ , $ 는 사용 가능) - 변수명에는 숫자로 시작할 수 없다. - 예약어는 변수명으로 사용할 수 없다. - let은 변수 중복 선언이 불가능하므로 var보다 사용하기 편하다. let age = 25; console.log(age); //25 age = 30; console.log(age); //30 var age = 20; - 상수는 읽기 전용이므로 선언 이후 값을 바꿀 수 없다. //선언과 동시에 초기화하지 않았으므로 오류가 발생 const age; age = 30; const age = 30; console.log(age); //30 #2 자..

#2 부모, 자식, 형제 노드 const pList1 = document.querySelectorAll('p'); const pList2 = document.getElementsbyTagName('p'); pList1; pList2; //출력 결과 NodeList(4) [p#first, p#second, p, p] HTMLCollection(4) [p#first, p#second, p, p] /* p태그를 추가하면 NodeList(4)는 그대로 출력 HTMLCollection(5)로 변경 */ const red = document.getElementsbyId('red'); red.parentNode; red.parentElement..