본문 바로가기

JS/JavaScript

(21)
20. 동기와 비동기, Promise, async&await 동기와 비동기? (Thread) 작업1 → 작업2 → 작업3 위와 같은 작업이 있을 때 순서대로 작업이 처리되는 것을 동기라고 하며 앞의 작업이 진행 중일 때는 뒤의 작업을 수행할 수 없다. JavaScript에서 기본적으로 동작하는 것은 동기이다. 이는 직관적이고 순차적이기 때문에 코드의 이해와 디버깅이 상대적으로 쉽다. 하지만, 앞 작업이 길어질 경우 뒷 작업도 늦어지기 때문에 브라우저나 앱의 응답 시간이 길어지는 단점이 있다. 이를 해결하기 위해 JavaScript에는 비동기 패턴을 제공한다. 비동기 패턴은 콜백함수, Promise, async/await 등을 사용하여 처리하며 작업이 완료되면 특정 콜백함수를 전달한다면 해당 작업이 끝났음을 알 수 있다. 비동기 패턴을 이용하면 시간이 오래 걸리는 ..
19. Truthy와 Falsy, 삼항연산자, 단락회로 평가, 조건문 응용 1. Truthy와 Falsy let a = ""; if (a) { console.log("TRUE"); } else { console.log("FALSE"); } // 결과: FALSE //--------------------- let a = "string"; if (a) { console.log("TRUE"); } else { console.log("FALSE"); } // 결과: TRUE 변수 a에 문자열 말고 객체, 빈 배열, 빈객체, 숫자형, infity 등이 들어가도 true로 반환이 된다. 이처럼 JS에서는 조건식에서 실제로 true가 아님에도 '참(ture)'같은 값으로 분류하는 truty가 있다. 반면 null, undefined, 0, -0, NaN, ""(빈문자열)의 경우에는 fals..
18. 콜백함수 콜백함수(Callback function) 다른 함수에 인자로 전달되는 함수로서 특정 이벤트나 조건이 발생했을 때 호출되는 함수. JS에서 함수는 객체 자료형 중 하나로서 다른 변수에 할당하거나 다른 함수의 인자로 전달할 수 있다.(일급 객체) 콜백함수의 사용 예시로는 비동기처리가 가장 흔한 경우이다. * 일급 객체 더보기 일급 객체(First-class object)는 프로그래밍 언어에서 다음과 같은 특성을 가진 객체이다. 변수에 할당할 수 있다: 함수를 변수에 할당하여 저장할 수 있다. 함수의 인자로 전달할 수 있다: 함수를 다른 함수의 인자로 전달할 수 있다. 함수의 반환값으로 사용할 수 있다: 함수가 다른 함수의 반환값으로 사용될 수 있다. 동적으로 프로퍼티를 할당할 수 있다: 함수에 동적으로 프..
17. 배열 내장 함수 1. forEach const arr = [1,2,3,4]; arr.forEach((elm) => console.log(elm)); // 결과 : 1, 2, 3, 4 2. map 원본 배열의 모든 요소를 순회하며 리턴된 값들 만을 따로 반환 const arr = [1,2,3,4]; const newArr = arr.map((elm)=>{ return elm * 2 }); console.log(newArr); // 결과: 2, 4, 6, 8 3. includes 배열에서 전달받은 인자와 값이 일치하는지 확인(===과 동일) const arr = [1,2,3,4]; let number = 3; let number2 = "3"; console.log(arr.includes(number)); // 결과: tru..
16. 기본, 참조 자료형 / 배열 함수 map() 기본 자료형(number, string, boolean) const num1 = 1; // 기본형 const num2 = number; console.log(num2) // 결과: 1 number, string, boolean은 모두 기본 자료형으로, 값을 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다. 참조 자료형(배열, 객체) const person = { name : "Kim" }; const secondPerson = person; console.log(secondPerson); // 결과 //[object Object] { // name: "Kim" //} person과 같은 값을 출력하지만, 값을 복사한 것이 아니라 객체 person은 메모리에 저장되어 있고, 상수 person에..
15. Spread & Rest Operator / Destructuring Spread Operator 배열의 원소나 객체의 프로퍼티를 나누는 데 사용한다.(배열이나 객체를 펼침) const newArray = [...oldArray, 1, 2] → newArray에 oldArray의 내용과 원소 1, 2를 추가 const newObject = {...oldObject, newProp : 5 } → oldObject의 모든 프로퍼티와 값을 꺼내 새 객체의 키 값으로 추가 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; const newNumNoDot = [numbers, 4, 5] // 점이 없으면 새 배열에 하나의 원소로 포함. console.log(newNumbers); // 결과: [1, 2, 3, 4,..
14. 클래스 클래스 객체를 생성하기 위한 틀(Tamplate)로, 객체의 상태를 나타내는 속성과 객체가 수행할 수 있는 동작을 나타내는 메서드를 포함한다. * 생성 방법 1. 클래스 정의(속성, 메서드) - 속성: name, age - 메서드1: constructor() → name, age를 매개변수로 받아 this.name, this.age 속성을 초기화. - 메서드2: printMyName() → this.name, this.age 속성을 사용하여 인사말 출력. 2. 클래스를 사용하여 객체 생성(클래스의 인스턴스 생성) - new 키워드를 사용하여 Person 클래스의 새로운 인스턴스 생성하여 prs 변수에 할당. * 인스턴스: 클래스는 객체의 특성을 정의하는 것이고 그 클래스를 통해 생성된 구체적인 실체(Ob..
🥸 To Do List 만들기 기본 로직 할 일을 입력하고 + 버튼을 누르면 화면에 출력됨. let userInput = document.getElementById("user-input") let addBtn = document.getElementById("add-button") // 할 일들을 저장할 변수 let myList = []; // 버튼을 누르면 할일이 추가되도록 이벤트 리스너 addBtn.addEventListener("click", addTask) // 할 일이 추가되는 함수 function addTask(){ myList.push(userInput.value) // console.log(myList) -- 확인용 render(); // + 버튼을 누르면 화면에 출력되게 하는 함수 호출 } let taskBoard = ..