본문 바로가기

언어/Javascript

(24)
비동기 : 마이크로태스크 큐 메크로테스크 큐 비동기는 동시의 문제가 아닌, 순서의 문제이다. 한번 비동기는 영원한 비동기 비동기란 간단히 말해 실행됐는데, 결과값을 나중에 쓸 수 있는 것이다. 비동기를 처리시, 콜스택에 비동기 함수가 들어온다면 콜스택은 즉시 background(자바스크립트 엔진, OS를 통합한 개념) 로 보낸다. (여기서 백그라운드는 자바스크립트 엔진, OS를 통합한 개념으로, 자바스크립트로 구현되지 않았다. 이는 싱글 스레드가 아니라는 의미로, 동시(물론 컴퓨터에서 동시란 없지만 거의 흡사하다고 치자.) 실행이 가능.) + 갑자기 궁금한 왜 자바스크립트는 싱글 스레드를 선택했을까? 의문에 대한 답변 포스트 (https://miracleground.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%..
this는 호출될 때 결정된다. const obj = { name : 'jiho', sayName(){ console.log(this.name); function inner(){ console.log(this.name); } inner(); } } obj.sayName(); // jiho, '' 위의 예제에서 jiho, ''가 나온 이유는. 먼저 sayName의 앞에 obj부모가 붙어있다. 그러므로 첫번째 출력에서 name이 출력. 다음 inner() 호출 시점에 앞에 객체가 붙은 것도 아니고, new bind apply call등이 붙어있지 않다. 그러므로 전역객체가 this이다. 다른 예제 하나를 더 살펴보자. 만약 콜백함수에서 this라면 어떻게 될까 const header = document.querySelector('somec..
[클린코드 javascript] 분기로 보여지기 쉬운 코드 만들기(분기 다루기) 삼항연산자 활용 삼항연산자를 활용하는 것은 가독성 좋은 코드를 만들 수 있다. // if - else if (condition){ return value} else {return anotherValue} // 삼항연산자 condition ? value : anotherValue 하지만, 삼항연산자를 과도하게 중복해서 사용하는 경우를 피하자 else-if를 과도하게 사용하는 것 보다는 switch가 더 효과적이다. 조건이 여러개일 경우 가독성을 생각해서 작성하자 사용 팁 : 보통 반환 값이 있는 함수에 삼항 연산자를 활용하자. 단축 연산자 활용 관련 내용은 자바스크립트 포스팅에 정리 했기에 예시보면 이해가 쉽기에 예시를 남긴다. function favoriteDog(someDog){ let favorite..
[클린코드 javascript] 자리를 잘 지키자. 값 식 문 값 : 식이 평가되어 생성된 결과. 식 : 표현식이라고도 하는데, 값으로 평가 될 수 있는 문 이다. 즉 변수에다 식을 대입했을 때 값을 반환하면 '문'이 아닌, '식' 문 : 프로그램을 구성하는 기본 단위이자, 최소 실행 단위. 대략 한줄이라고 가볍게 이해하자. '식'의 자리와 '문'의 자리를 잘 구분하자. //'값'이 들어가야하는 자리에 if'문' Hello World //삼항연산자는 '값'을 뱉어냄 Hello World {} : 값과 식만 들어가야함. 바로 리턴되는 분기문은 논리연산자를 사용하자. 함수의 자리 const add = (a,b) => a+b; document.querySelector('#header').addEventListener('click', add()); // ? do..
콜백함수(callback) 콜백함수는 쉽게 말하면 파라미터에 들어가는 함수로, setTimeout(function add(){return a + b}, 1000, a,b); 또는 setTimeout(add, 1000, a,b); function add(a,b){return a+b}; 여기서 add가 콜백함수이고 이는 순서를 지켜서 실행하고 싶을 때 사용된다. 하지만 궁금증이 든다. 굳이 순서를 지키고 싶으면, function a()[ // ... } function b(){ // ... } a(); b(); 이렇게 사용하면 되지 않을까 생각이 들었다. 이와 관련된 내용을 찾아보니, 예를들어, 협업시 동료1이 나의 함수 a를 쓰고 console.log를, 동료2도 나의 함수 a를 쓰고 console.log를 쓰고 싶다하면만약 함수 ..
[클린코드 javascript] 타입 체크 자바스크립트는 동적 타입 언어이다. => 단순히 타입 체크 ( typeof )를 할 경우 오류를 범할 수 있다 자바스크립트에는 원시 타입 변수와 참조 타입 변수가 존재하는데, 단순 타입 체크로 원시 타입 변수를 체크하는 경우에는 문제가 대부분 없다. 하지만 참조 변수의 경우 typeof를 한다면 모두 object로 나올 것이다. 그래서, instanceof를 사용. Const arr = []; Const func = function() {}; Const date = new Date(); Arr instanceof Array // true Func instanceof function // true Date instanceof Date // true 하지만 여기서 instanceof Object를 찍어보면 ..
[클린코드 Javascript] 임시변수 제거. 한번도 생각하지 못한 주제였다. 임시변수제거. 알고리즘 문제풀이 할때 임시변수를 못잃는 나였지만, 다시 한번 생각해보게되었다. 먼저 임시변수는 블록 스코프내에서 전역변수와 같이 쓰이는 변수이다. 아래 result 변수를 참고하자. function getElements(){ const result = {}; result.title = 'cleanCode' result.text = 'how_to_make_cleancode' return result; } 다음과 같은 코드는 result를 먼저 선언하고 접근자를 이용해 프로퍼티를 추가했다. 아주 정상적인 나의코드이다. 이는 굳이 선언하고 접근하는 과정을 거쳐서 좋지 못하다. 좀더 명확하게 리펙토링하는 것을 보았다. function getElements(){ c..
[클린코드 Javascript] 전역 공간 신경쓰기 1학년때 배우기로, 전역변수는 프로그램 생명주기 처음부터 끝까지 살아있기에 지양해야한다고 배웠다. 즉, 실행이 끝날 때 까지 메모리 공간을 차지하기 때문에, 메모리 부족의 원인이 될 수 있다. 또한 전역 변수는 어떤 함수에서든지 접근이 가능하기 때문에, 멀티 태스킹 환경에서 예상치 못한 문제를 일으킬 수 있다. ---------------------------------------------------------------------------------------------------------------------------------------------------------- 여기서 자바스크립트 한 스푼을 추가하자면, 자바스크립트는 브라우저 환경의 경우 window객체가 가장 상위 객체, Node..