웨일의 블로그 웨일의 블로그

우리는 콘솔 창을 이용해 실제 실행 결과와 예상 결과가 같은지를 계속 비교해가며 코드를 테스트 하게 되는데 예를 들어 함수f를 구현하고 있다고 치면 f(1)과 f(2)를 테스트할 때 f(1)이 예상대로 되서 f(2)를 테스트했는데 제대로 동작하지 않는다. 그래서 코드 수정 후 f(2)를 테스트해서 통과했는데 f(1)을 다시 테스트 하지 않는 경우가 있다. 이럴때 f(1)이 다시 동작하지 않아서 에러가 발생할 수 있다. 그래서 BDD(Behavior Driven Development)라는 테스트 자동화 방법론을 이용한다. BDD로 만들어진 산출물을 명세서 또는 스펙이라고 부른다. 스펙의 세 가지 주요 구성 요소 1. describe("기능에 대한 설명", function() {...} it블록을 한데 모아..

한 줄짜리 주석: // 여러 줄: /* ... */ 주석은 어떻게 코드가 동작하는지, 왜 동작하는지를 설명하는 데 쓰임. 좋지 않은 주석 // 이 코드는 (...)과 (...)을 수행합니다. // A 개발자가 이 기능에 대해 알고 있으며... 좋은 코드엔 설명이 담긴 주석이 많으면 안된다. 좋은 주석 왜 이런 방법으로 문제를 해결했는지를 설명하는 주석. 이 주석이 없으면, 1. 시간이 꽤 흐른 뒤 코드를 열어본 후 그 코드가 가장 좋은 방식이 아니란 걸 알게 된다. 2. 이전보단 더 명확하고 올바른 방법으로 코드를 개선한다. 3. 리팩토링 과정에서 더 명확하다고 생각했던 방법을 적용하면 문제가 발생한다는 걸 알아낸다. 이미 시도해봤던 방법이기 때문에 왜 이 방법이 먹히지 않는지 희미하게 기억이 떠오른다...

복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해야 한다. 가로 길이 가로로 길게 늘어진 코드는 여러 줄로 나눠 작성하는게 좋다. 이때 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있다. let str = ` ECMA International's TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. `; if ( id === 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra' ) { alert..

디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 브라우저에 UI 형태로 디버깅 툴이 있어서 쉽게 디버깅이 가능하다. 크롬->개발자모드-> Sources 코드 줄번호 클릭하면 중단점 설정 가능, 디버깅 시작하면 중단점에서 자바스크립트 실행이 중단되고 오른쪽 창에 정보가 뜸. 파란색 화살표로 디버깅 시작, Step버튼으로 다음 명령어 실행 console.log()로도 디버깅 비슷하게 할 수 있다.

화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법 let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전이다. let sum = function(a,b) { return a+b; } */ alert(sum(2,5)); // 7 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. let double = n => n * 2; alert(double(3)); // 6 인수가 하나도 없을 때는 괄호만 쓴다. 이때 괄호는 생략할 수 없다. let sayHi = () => alert('안녕하세요'); sayHi(); // '안녕하세요' 본문이 여러 줄인 화살표 함수 평가해야 할 구문이 여러 개인 함수일때는 중괄호를 사용해야 한다.이때 ..

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 함수 표현식보다는 함수 선언문을 선택하는 걸 먼저 고려한다. 함수 선언문과 함수 표현식의 차이 // 함수 선언문 sayHi('John'); // Hello, John function sayHi(name) { alert(`Hello, ${name}`); } // 함수 표현식 sayHi('John'); // error! let sayHi = function(name) { alert(`Hello, ${name}`); } 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성하기 때문에 함수 선언문이 선언되기 전에 해당 함수를 호출하는 코드를 작성해도 정상적으로 실행이 된다. 그러나 함수 표현식으로 정의한 함..

첫 번째 truthy를 찾는 OR 연산자 || result = value1 || value2 || value3; 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다. 각 피연산자를 불린형으로 변환한다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)에는 마지막 피연산자를 반환한다. alert(1||0); // 1 (1은 truthy임) alert(undefined || null || 0); // 0 (모두 falsy이므로, 마지막 값을 반환함) 활용법 1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기 let firstName = ''; let lastN..

나머지 연산자 % a%b: a를 b로 나눴을 때 나머지를 출력 거듭제곱 연산자 ** a**b: a를 b번 곱한 값을 출력 단항 연산자 +와 숫자형으로의 반환 alert(+true); // 1 alert(+''); // 0 let apples = '2'; let oranges = '3'; alert(+apples + +oranges); // 5 할당 연산자 let a = 1; let b = 2; let c = 3 - (a = b + 1); // a에 b+1 = 3을 반환하고 표현식에 사용된다. alert(a); // 3 alert(c); // 0 증가, 감소 연산자 전위형과 후위형의 차이 let counter1 = 1; let a = ++counter1; // counter1을 1 증가시키고 2를 반환한다..