용용it

콜백 지옥 비동기 코드의 중첩이 깊어지는 현상. 콜백 함수를 연속적으로 사용할 때 코드의 가독성과 관리가 어려워지는 상황. readFile('file1.txt', (data1) => { writeFile('file2.txt', data1, () => { readFile('file2.txt', (data2) => { writeFile('file3.txt', data2, () => { // 더 많은 작업... }); }); }); }); 간단하게 파일을 읽은 후에 해당 내용으로 다른 파일을 쓰는 작업을 한다고 가정했을 때의 콜백 지옥 예시이다. 콜백 지옥을 피하기 위해 Promise나 async/await 같은 비동기 처리 방법을 사용하는 게 좋다

동기 (Synchronous) 한 번에 하나의 작업을 순차적으로 처리하는 방식, 하나의 작업이 완료되기 전까지 다음 작업은 실행 x console.log('첫 번째'); console.log('두 번째'); console.log('세 번째'); // 첫 번째 // 두 번째 // 세 번째 비동기 (Asynchronous) 여러 작업이 동시에 실행되는 것처럼 보이는 방식, 작업의 완료 순서가 보장되지 않을 수 있음. 작업이 완료되면 콜백 함수나 Promise 등을 통해 결과 처리 console.log('첫 번째'); setTimeout(() => { console.log('두 번째 (비동기)'); }, 1000); // 1초 후에 실행 console.log('세 번째'); // 첫 번째 // 세 번째 // ..

Object.assign() 하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환. const target = { a:1, b:2 } const source1 = { b:3, c:4 } const source2 = { c:5, d:6 } const result = Object.assign(target, source1, source2) console.log(target)// { a:1, b:3, c:5, d:6 } console.log(result)// { a:1, b:3, c:5, d:6 } 만약 새로운 객체를 반환하게 하려면, const target = { a:1, b:2 } const source1 = { b:3, c:4 } const source2 ..

.reverse() 대상 배열의 순서를 반전한다. 대상 배열 원본이 변경된다. const arr = ['A', 'B', 'C'] const reversed = arr.reverse() console.log(reversed)// ['C', 'B', 'A'] console.log(arr)// ['C', 'B', 'A'] .shift() 대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 대상 배열 원본이 변경된다. const arr = ['A', 'B', 'C'] console.log(arr.shitf())// A console.log(arr)// ['B', 'C'] .slice() 대상 배열의 일부를 추출해 새로운 배열을 반환한다. 두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 ..

.join() 대상 배열의 모든 요소를 구분자로 연결한 문자를 반환. const arr = ['Apple', 'Banana', 'Cherry'] console.log(arr.join()) // Apple,Banana,Cherry console.log(arr.join(', ')) // Apple, Banana, Cherry console.log(arr.join('/')) // Apple/Banana/Cherry .map() 대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환 기존 배열 유지 const numbers = [1, 2, 3, 4] const newNumbers = numbers.map(item => item * 2) console.log(newNumbers)..

.find() 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환. const arr = [5, 8, 130, 12, 44] const foundItem = arr.find(item => item > 10) console.log(foundItem) // 130 arr.find(item => item > 10) 에서 item 부분은 배열 내의 각 요소를 가리키는 매개변수의 이름이기 때문에 다른 이름도 가능. ex) arr.find(number => number > 10) const users = [ { name: 'Dragon', age: 100 }, { name: 'Lee', age: 25 }, { name: 'jym', age: 34 } ] const foundUser = users.find(u..

자바스크립트의 표준 내장 객체인 배열을 알아보자 .at() // .at() // 대상 배열을 인덱싱한다. // 음수 값을 사용하면 뒤에서부터 인덱싱한다. const arr = ['A', 'B', 'C'] console.log(arr[0]) // A console.log(arr.at(0)) // A console.log(arr[arr.length - 1]) // C, 그 이유는 [arr.length]는 3, // 3-1 = 2 // 제로 베이스 넘버링 이므로 2는 C console.log(arr.at(-1)) // C, 배열 맨 뒤에서부터 인덱싱. 만약 맨 뒤에서 두 번째 값을 찾고 싶으면 console.log(arr.at(-2)) .concat() // .concat() // 대상 배열과 주어진 배열을 ..

자바스크립트에서 날짜를 가져오는 방법은 const today = new Date(); Date 객체를 쓰면 된다! const today = new Date(); console.log(today) // VM123:1 Thu Jul 27 2023 20:31:54 GMT+0900 (한국 표준시) 하지만 내가 원하는 형태가 아니다... 내가 원하는 형태는 2023.7.27 Thu 이런 형태를 원한다! 코드 먼저 보쟈 const today = new Date(); const year = today.getFullYear(); // 년도 (예: 2023) const month = today.getMonth() + 1; // 월 (0 ~ 11, 1을 더해서 1 ~ 12로변환) const day = today.getDa..

만약 캘린더에 당직, 연차 두개의 카테고리가 있다고 가정할 때 당직과 연차 이 카테고리에 해당되는 갯수? 가 몇개인지 표시하고 싶을 때 무엇을 써야할까 map ? map은 배열의 모든 요소를 순회하면서 각 요소에 대해 콜백 함수를 호출한다. 콜백 함수에서 반환된 값들을 모아서 새로운 배열을 생성하고 원본 배열과 길이가 동일하며, 각 요소들은 콜백 함수에 의해 가공된 값으로 대체된다. const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((num) => num * 2); // doubledNumbers는 [2, 4, 6, 8, 10] 배열이 됨 답은 filter 다. filter 는 배열의 모든 요소를 순회하면서 콜백 함수를 호출한다. 콜..

ES6에서 도입된 클래스는 객체를 생성하기 위한 템플릿이다. 클래스를 사용하면 객체 지향 프로그래밍의 개념을 더욱 편리하게 활용할 수 있다. 기본 구조이다. class ClassName { constructor() { // 생성자 메서드 } method1() { // 메서드 1 } method2() { // 메서드 2 } // ... } 여기서 ClassName은 클래스 이름이고 constructor는 클래스의 생성자 메서드로, 객체가 생성될 때 자동으로 호출된다. 생성자 메서드 내에서는 객체의 초기화를 수행하고 필요한 속성을 설정할 수 있다. 클래스를 사용하여 객체를 생성하는 방법. const obj = new ClassName(); new 키워드를 사용하여 ClassName을 호출하면 ClassNam..