alex im

📗 Optional Chaning ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 📗 언제 사용하나? 1. 있을 수도 없을 수도 있는 객체의 속성을 조회할 때 말이 이상하게 들리겠지만 옵셔널 체이닝은 이런 경우에 굉장히 유용하게 사용된다. 옵셔널 체이닝 연산자가 없을 때는 객체에 속성이 있는지 확인하기 위해서 "&&" 연산자를 썼다. let user = {}; user 객체 안에서 user.address.street 을 조회하여야 하는데 주소 정보가 없는 user가 있다고 할 때 그냥 조회한다면 바로 타입에러가 발생할 것이다. 이를 해결하기 위해서 console.log(user && user.address && user.address.street); 이..

📗 Class - class는 함수의 한 종류이다. - class 정의는 항상 "strict mode"다. - class 선언은 함수 선언과 달리 호이스팅의 대상이 아니다. - 선언한 class는 재선언 할 수 없다. - class의 메서드는 열거할 수 없다. : non-enumerable 📗 constructor - 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 생성자 메서드 - new에 의해 자동으로 호출되므로 특별한 절차 없이 객체를 초기화 할 수 있다. - class 안에 한 개만 존재할 수 있다. https://ko.javascript.info/class 클래스와 기본 문법 ko.javascript.info class User { constructor(name) { this.name = n..

프렙 과정에서 과제로 나왔던 parallel, waterfall 이 과제를 하면서 비동기에 대해 많이 배우게 되었다. 이번에는 이 과제를 promise를 사용해서 구현해 보았는데 이걸 기록해 놓으려 한다. 1. Parallel 병렬 function parallel (tasks, finalCallback) {} 수행해야 하는 함수들이 모여있는 tasks, tasks들이 모두 다 수행되고 나서 마지막으로 수행되어야 하는 finalCallback 테스트코드 const order = []; parallel( [ function (callback) { setTimeout(function () { order.push(1); callback(1); }, 150); }, function (callback) { setT..

햄버거를 먹으려면 맥도날드에 가서 바로 주문할 수 있다. 앞의 사람이 음식을 받지 않아도 바로 주문할 수 있다. 근데 만약 앞사람의 주문이 다 처리되고 나서야 주문할 수 있다면 어떻게될까? 효율적이지 못한 방법이라고 생각할 수 밖에 없다. 그리고 고객들의 불만이 쌓여갈 것이다. 이 간단한 예시로 비동기와 동기를 이해할 수 있다. 맥도날드의 예를 웹페이지로 바꿔서 생각해보면 더 잘 알 수 있다. 네이버 홈페이지를 예로 들어 홈페이지에 있는 하나 하나의 리소스가 주문이라고 생각해보자. 동기적으로 홈페이지를 구현하면 앞의 주문이 처리가 끝나야 다음 주문이 처리되기 때문에 하나씩 순차적으로 페이지에 나타나게 되고 답답한 페이지가 될 수 밖에 없다. 비동기는 작업을 병렬적으로 실행할 수 있어 효율적으로 작업을 수..

JavaScript에서 타입을 검사하는 건 쉽지 않습니다. 동적인 언어라서 타입도 동적으로 변할 수 있기 때문입니다. 타입을 검사할 때는 하나의 방법만 사용하지 않고 상황에 맞는 타입 검사 방법을 선택해야합니다. 타입을 검사하는 방법 중 typeof, instanceof, Object.prototype.toString, Array.isArray 4가지를 알아보도록 하겠습니다. 1. typeof typeof는 타입을 문자열로 반환합니다. 함수처럼도 사용 가능합니다. function myFunction() {}; typeof myFunction; // 'function' class MyClass {} typeof MyClass; // 'function' class도 function으로 나온다. // wrap..

(클린 코드 강의를 듣고 정리한 글입니다.) 📗 임시변수란 무엇인가요? Scope안에서 전역변수처럼 활용되는 것 📗 임시변수를 왜 줄여야 하나요? 임시객체를 const로 사용한다고 하더라도 함수가 커지면 전역공간이나 다름없는 나올 수 있습니다. 문제를 줄이기 위해 함수를 잘게 나누어야 하는데 임시변수 안에서 계속 로직을 작성하게 된다면 명확하지 못한 코드가 될 수 있습니다. 임시변수를 쓰게 되면 명령형으로 가득한 로직이 나옵니다. 어디서 어떻게 잘못됐는지 디버깅이 어렵습니다. 추가적인 코드를 작성하고 싶은 유혹에 빠지기 쉽습니다. 코드 유지보수가 어렵습니다. 밑에서 예시와 예시를 수정한 코드를 살펴보고 해결책을 살펴보도록 하겠습니다. (예시 코드는 그저 예시를 위한 코드로 동작을 예상하는 코드는 아닙니다..

📗 JavaScript에서 0.1 + 0.2는 0.3일까? 0.1 + 0.2 === 0.3; // false typeof(0.1); // 'number' const a = 0.1; const b = 0.2; a + b === 0.3 // false console.log(a + b); // 0.30000000000000004 결론부터 말하자면 0.3이 아닙니다. 컴퓨터는 명령을 처리하기 위해 10진법으로 처리된 것을 자신의 언어인 2진법으로 변환하는 과정을 거치게 됩니다. 위와 같은 결과는 JavaScript가 실수를 처리하는 방식으로 부동소수점 방식 을 채택하기 때문에 발생하게 됩니다. 간단하게 집고 넘어가자면...(매번 까먹으므로..) 정수 : 10, 400 혹은 -5 같은 모든 숫자 실수 : -1, ..

📗 이벤트(event)란 무엇인가요? 이벤트란 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생입니다. 이것은 무언가 일어났다는 신호입니다. 참고로, 이벤트는 DOM에만 한정되진 않습니다. 예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어났을 때 이를 감지하여 특정한 타입의 이벤트를 발생시키는 것입니다. 웹 이벤트는 코어 JavaScript 언어의 일부가 아닙니다. 이것들은 브라우저에 내장된 API의 일부로서 정의됩니다. 애플리케이션이 특정 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler) 라 하고(이벤트 핸들러는 때떄로 이벤..