목록개발/JavaScript (19)
게으른개발너D

1. callback 1. callback 패턴 이용 3초 후에 name 값을 넘겨주는 비동기 함수를 작성해 보자. fn.js const fn = { getName: (callback) => { const name = 'Mike'; setTimeout(() => { callback(name); }, 3000); }, } module.exports = fn; callback를 매개변수로 받아서 callback으로 name을 첫번째 인수로 넘겨주는 함수를 작성하였다. fn.test.js const fn = require('./fn'); test("3초 후에 받아온 이름은 Mike이다.", () => { const callback = (name) => { expect(name).toBe('Mike'); } f..

https://jestjs.io/docs/expect Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io 다양한 Matcher는 여기서 확인할 수 있다. 1. toBe, toEqual toBe와 비슷한 것은 toEqual이다. fn.test.js const fn = require("./fn"); test("2 더하기 3은 5이다.", () => { expect(fn.sum(2, 3)).toBe(5);..

https://github.com/jestjs/jest GitHub - jestjs/jest: Delightful JavaScript Testing. Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub. github.com 1. jest jest는 facebook에서 만든 테스팅 라이브러리다. 출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 비교적 사용이 간단하며 Babel, Typescript 등에 모두 사용할 수 있다. zero config jest는 zero configuration 철학을 가지고 있..

1. test file 생성 파일명에 .spec, .test 를 넣어주면 test file로 인식된다. ex) login.test.js 2. test code 작성 test("테스트 설명", () => { expect("검증 대상").toXxx("기대 결과"); }); function solution(n) { let answer = '' const nArr = [1, 2, 4]; while(n) { answer = nArr[(n - 1) % 3] + answer; n = n % 3 === 0 ? (n / 3) - 1 : Math.floor(n / 3); } return answer; } // 테스트 코드 시작 describe('math.js', () => { // test() : 하나의 테스트 케이스를 ..

✨ 스코프 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다. 어디서도 접근 가능한 전역 스코프(Global Scope)가 있고, 해당 스코프 컨텍스트 안에서만 접근 가능한 지역 스코프(Local Scope)로 나뉜다. const a = 5; // Global Scope { const b = 3; // Local Scope console.log(a, b); // 5, 3 } console.log(a, b); // Error! var를 사용하면 개발자가 예상치 못한 오류가 생길 수 있다. 블록 내부에 새롭게 선언하더라도 블록 외부 값도 변하게 된다. var a = 5; { // 호이스팅 되어 변수 선언이 상단으로 올라가버린다. var a = 10; console.log(a); // 10 }..

✨ Control Flow Control Flow는 우리가 흐름을 제어하는 방법 중 하나로, 조건이나 반복을 통해 상태를 제어하는 것을 말한다. 코딩을 처음 배울 때 다루는 if와 for 등의 방법이 있다. 흐름제어는 두가지 방법이 있다. Control Flow, Data Flow Control Flow 우리가 일반적으로 알고있는 조건문이나 반복문 goto if/ then/ else switch/ case for/ while let a = [1, 2, 3, 4, 5]; for (let i = 0; i < 5; i += 1) { if (a[i] % 2 === 0) { console.log(a[i]); } } Data Flow 함수형 프로그래밍 방식으로 구현이 가능함 stateless recursion pi..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators 표현식과 연산자 - JavaScript | MDN 이번 장에서는 JavaScript의 표현식과 함께 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 다양한 연산자를 살펴보겠습니다. developer.mozilla.org 일반적으로 웹사이트는 여러개의 자바스크립트로 이루어져 있다. 대부분 스크립트 언어의 특징이지만 자바스크립트는 파일들을 각각 별개의 프로그램으로 취급하고 있다. 자바스크립트 프로그램은 무엇으로 이루어져있을까? 그것은 앞으로 알아볼 표현식(Expressions)과 문장(Statements) 두 가지 카테고리로 이루어져 있다. ✨ 표..

변수를 선언할 때 자바스크립트 내부에선 어떤 일이 발생할까? 해당 코드를 실행할 때 자바스크립트는 변수에 고유식별자를 생성하고 메모리에 주소를 할당한다. 최종적으로 생성한 주소에 값을 넣게 된다. 이 과정을 시각화 하면 다음과 같다. 우리가 선언한 변수나 상수는 값을 바라보고 있는 것이 아닌 메모리 주소를 바라보고 있다. 만약 여기에 새로운 변수에 기존 변수를 대입하면 어떻게 될까? 답은 간단하다. 아래 그림과 같이 기본 변수의 메모리 주소를 참조하게 된다. 만약 기존 변수를 조작하면 어떻게 될까? 두번째 생성한 변수의 값도 변하게 될까? 이번에는 그렇지 않다. 새로운 메모리 주소를 할당 받고 그곳에 값을 넣게 된다. 그 이유는 자바스크립트에서 원시 값은 변경이 불가능하기 때문이다. 따라서 원시 타입의 ..