거북이 개발자

이미 자바스크립트를 공부하면서 한 번은 읽었고, 코드를 작성하면서 적용하고 있는 주제지만, 클린코드라는 책을 가지고 스터디를 하면서 전체적인 내용을 요약해놓은 블로그 글이 있어서 번역하면서 재차 정리하는 글이다. 클린 코드는 단순하게 작동하는 코드가 아니라 다른 사람들이 코드를 쉽게 읽고, 재사용하고, 리팩토링할 수 있는 코드다. 협업을 하면서 깨끗하게 코드를 작성하는 것은 매우 중요하다. 아래 예제들은 JavaScript 코드로 되어있지만, 거의 모든 다른 프로그래밍 언어에 적용할 수 있다. 일반적인 개념들은 Robert C. Martin의 Clean Code에서 주로 채택한 권장사항이기 때문에 따르지 않아도 된다. 권장사항이다. 1. Variables - 의미있는 변수 이름 짓기 변수의 이름은 설명적..

extends를 통한 클래스 상속(sub classing) extends 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용된다. class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { constructor(name) { super(name); // super class 생성자를 호출하여 name 매개변수 전달 } speak() { console.log(`${this.name} barks.`); } } let d = new Dog('Mitzie'); d.speak(); //..

Class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다. Class 정의 Class는 특별한 함수다 함수도 표현식, 선언식이 있는 것처럼 class문법 또한 표현식, 선언식으로 나눠져있다. Class 선언 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 한다 class Rectangle { constructor(height, widht) { this.height = height; this.width = width; } } Hosting 함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 전에 호출할 수 있지만(호이..

널 병합 연산자 (??)는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 이는 왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 (||)와 대조된다. 즉, 어떤 변수 foo에게 falsy값을 포함한 값을 제공하기 위해 ||을 사용하는 것을 고려했다면 예기치 않은 동작이 발생할 수 있다. 널 병합 연산자는 연산자 우선 순위가 다섯번째로 낮은데, ||의 바로 아래이며 조건부 삼항 연산자의 바로 위이다. 예시) const foo = null ?? 'default string'; const baz = 0 ?? 42; https://develop..

promise는 비동기 작업을 더 잘 처리할 수 있다. promise는 progressHandler약속은 fulfilledHandler가 이행될 때 호출되며, errorHandler는 Promise가 실패할 때 호출된다. fulfilledHandler 함수는 errorHandler 콜백이 완료 될 때 새로운 promise를 반환해야 한다. 하지만 콜백에서 오류가 발생하면 반환된 값은 실패 상태로 이동하게 된다.흔히 프로미스의 장점으로 콜백 함수를 통한 비동기 처리시 발생하는 콜백 헬을 해결하는것에 초점이 되어 있지만 그보다 중요한 2가지 포인트가 있다. 비동기처리방식에서 return value를 이용할 수 있다는 점 error handling이 동기식 코드와 유사하게 쓰일 수 있다는 점 promise를 ..

#제어권? 자신의 코드를 실행할 권리 같은 것이다. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다. #결과 값을 기다린다는 것 A함수에서 B함수를 호출했을 때, A함수가 B함수의 결과값을 기다리느냐의 여부를 의미 Blocking(블로킹)과 Non-blocking(논블로킹) 블로킹과 논블로킹은 A함수가 B함수를 호출했을 때, 제어권을 어떻게 처리하느냐에 따라 달라진다. 즉, 제어의 관점 1. 블로킹 즉, 자신의 작업을 진행하다가 다른 주체의 작업이 시작되면 다른 작업이 끝날 때까지 기다렸다가 자신의 작업을 시작하는 것 예시) 블로킹은 A함수가 B함수를 호출하면, 제어권 A가 호출한 B함수에 넘겨준다. A함수 ⇒ B함수 호출하면 B함수에게 제어권이 넘어간다 제어권을 ..

Iterable 객체 반복 가능한(iterable, 이터레블)객체는 배열을 일반화한 객체다. 이터러블이라는 개념을 사용하면 어떤 객체든 for..of 반복문을 적용할 수 있다. 배열은 대표적인 이터러블이다. 배열 외에도 다수의 내장 객체가 반복 가능하다. 문자열 역시 이터러블의 예이다. 이터러블과 유사배열 이터러블(iterable)은 메서드 Symbol.iterator 가 구현된 객체다. 유사 배열(array-like)은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체다. 브라우저나 호스트 환경에서 자바스크립트를 사용해 문제를 해결할 때 이터러블 객체나 유사 배열 객체 혹은 둘 다인 객체를 만날 수 있다. 이터러블 객체(for..of를 사용할 수 있다)이면서 유사 배열 객체(숫자 인덱스와 l..

문득 바닐라자바스크립트를 이용할 때 script태그를 꼭 아래에 넣었다. 그러다 요즘 면접 질문 등을 정리하는데 왜 아래에 놓아야할까 라는 의구심으로 정리하기로 했다. 브라우저는 HTML을 읽다가 에서 script 태그를 만나면 스크립트가 실행되고 해당 script 태그 이전에 생성된 DOM에만 접근이 가능하다. 이럴경우 브라우저의 동작 방식은 두 가지 중요한 이슈를 만든다. 스크립트에서는 스크립트 아래에 있는 DOM요소에 접근할 수 없다. 따라서 DOM요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 그리고 script가 실행될 동안에는 파싱을 멈추고, DOM트리 생성이 중지된다. 즉, 화면에 표시되는 것이 지연..

유효하지 않은 메모리 === Garbage 도달가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행한다. ‘도달가능한(reachable)’ 값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. 태생부터 도달 가능한 목록 예시들 현재 함수의 지역변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역변수 기타 등등 이런 값은 루트(root)라고 부른다. 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 됩니다. 도달 할 수 없게 되면 가비지 컬렉터는 메모리에서 삭제한다. 가비지컬렉션 기본 알고리즘은 ‘makr-and-sweep’이다 가비지 컬렉터는 루트정보를 수집하고 이를 ..