자바스크립트는 싱글 스레드로 작동하기 때문에 Stack에서 코드를 순차적으로 실행시키고 Web APIs에 비동기 작업을 위임한다.Web APIs에서 완료 된 비동기 작업들은 Callback queue에 할당되고 Event loop를 통해 Stack에 등록되면 callback 함수가 호출된다. 1. Promiseadd10 함수 호출 2초후에 executor가 실행 된다.function add10(num) { // Promise는 비동기 작업을 감싸는 객체 const promise = new Promise((resolve, reject) => { // executor // 비동기 작업을 실행하는 함수 setTimeout(() => { if (typeof num === "nu..
1. forEach배열의 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드let arr1 = [1, 2, 3];arr1.forEach(function (item, idx, arr) { console.log(item * 2); // 2 // 4 // 6});// 아래와 같이 응용가능let doubledArr = [];arr1.forEach((item) => { doubledArr.push(item * 2);});console.log(doubledArr); // [2, 4, 6] 2. includes배열에 특정 요소가 있는지 확인하는 메소드let arr2 = [1, 2, 3];console.log(arr2.includes(3)); // trueconsole.log(arr2.inc..
배열 조작 메소드 6가지push, pop, shift, unshift, slice, concat// 배열 메소드1// 6가지의 요소 조작 메소드// 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];// push는 최종적으로 배열의 길이를 반환한다.const newLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]console.log(newLength); // 7// 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(poppedItem); // 3cons..
for of => 배열 순회에 쓰임for in => 객체 순회에 쓰임 1. 배열 순회// 1 배열 순회let arr = [1, 2, 3];// 1.1 배열 인덱스for (let i = 0; i 2. 객체 순회// 2. 객체 순회let person = { name: "DY", age: 32, hobby: "PS5",};// 2.1 Object.keys사용// -> 객체에서 key 값들만 뽑아서 새로운 배열로 변환let keys = Object.keys(person);console.log(keys); // ['name', 'age', 'hobby']// for of는 배열에서만 사용하는 연산자for (let key of keys) { const value = person[key]; console...
Object Type은 Primitive Type과 달리 참조에 의해(by reference) 저장되고 복사 된다.따라서 객체를 복사하고 싶을때에는 깊은 복사를 해줘야 한다. // 객체 얕은 복사let so1 = { name: "DY" };let so2 = so1;// 객체 깊은 복사let do1 = { name: "DY" };let do2 = { ...do1 };// 객체간의 비교는 기본적으로 참조값을 기준으로 한다.let o1 = { name: "DY" };let o2 = o1;let o3 = { ...o1 };// 얕은 비교console.log(o1 === o2); // trueconsole.log(o1 === o3); // false// 깊은 비교console.log(JSON.stringify(o..
1. Spread는 객체나 배열에 저장 된 값을 개별적으로 만들기 위함(Spread : 흩뿌리다, 펼치다.)// 1. Spread 연산자// -> Spread : 흩뿌리다. 펼치다// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할// 배열 spreadlet arr1 = [1, 2, 3];// 4, 1, 2, 3, 5, 6 를 만들고 싶을 때let arr2 = [4, ...arr1, 5, 6];console.log(arr2); // [4, 1, 2, 3, 5, 6]// 객체 spreadlet obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, // obj1의 속성을 그대로 사용할 수 있다. c: 3, d: 4,};console.log(obj2); // ..
구조 분해 할당의 목적은배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하기 위함 // 1. 배열의 구조 분해 할당let arr = [1, 2, 3];let testOne = arr[0];let testTwo = arr[1];let testThree = arr[2];// => 매우 불편// 구조 분해 할당을 통해 한 번에 값을 할당let [one, two, three] = arr;console.log(one, two, three); // 1 2 3let [one1, two2] = arr;console.log(one1, two2); // 1 2// 2. 객체의 구조 분해 할당let person = { name: "DY", age: 99, hobby: "Coding",};// [ke..
Truthy & Falsy Boolean 타입이 아니더라도, 조건문 내에서 참 거짓으로 평가되는 것을 말하며Truthy, Falsy를 사용하면 조건문을 간결하게 만들 수 있다.// 1. Falsy한 값let falsy1 = undefined;let falsy2 = null;let falsy3 = 0;let falsy4 = -0;let falsy5 = NaN; // Not a Numberlet falsy6 = "";let falsy7 = 0n; // BigInteger// => 조건문에서 거짓으로 평가 됨if (!falsy1) { console.log(falsy1, "is false");}// 2. Truthy한 값let truthy1 = "hello";let truthy2 = 123;let truthy..
객체는 { } 를 이용하여 생성하고 class 처럼 변수와 메소드를 넣어줄 수 있다.// 1. 객체 생성let obj1 = new Object(); // 객체 생성자let obj2 = {}; // 객체 리터럴// 2. 객체 프로퍼티 (속성)let person = { name: "DY", // key : value age: 33, hobby: "soccer", extra: function () { console.log("print extra"); }, "like cat": false,};// 3. 객체 프로퍼티를 다루는 방법// 3.1 특정 프로퍼티에 접근하는 방법 (점 표기법, 괄호 표기법)let name = person.name;console.log("obj name is ", name..
A함수를 B함수의 매개변수로 전달하여 B함수에서 A함수를 호출(콜백)// 1. callback functionfunction main(value) { value();}function sub() { console.log("I am sub");}main(sub); // I am sub// 2. callback 활용function repeat(count, callback) { for (let idx = 1; idx { console.log("callback", idx, "called");});// 1// 2// 3// 4// 5repeat(5, (idx) => { console.log("callback", idx * 2, "called");});// 2// 4// 6// 8// 10
