자바스크립트 애플리케이션은 단일 스레드에서 동작합니다. 즉 자바스크립트는 한 번에 한 가지 일만 할 수 있습니다. 자바스크립트는 비동기적 프로그래밍에 대처하기 위해 처음에는 콜백을, 다음에는 프라미스 마지막은 제너레이터를 추가시켰습니다. 각 방법에 대해 들어가기 전 이해가 쉽도록 비유적인 표현을 책에서 명시하고 있습니다. 예약하지 않고 분주한 음식점에 방문한 경우, 콜백이란 음식점은 줄을 서서 기다리지 않도록 당신의 전화번호를 받아서 자리가 나면 전화해줍니다. 프라미스라는 음식점의 경우는 자리가 났을 때 진동하는 호출기를 당신에게 넘겨줍니다. 실행되어야 하는 타이밍을 알려주는 수단을 콜백의 경우 당신이 음식점에게, 프라미스의 경우 음식점이 당신에게 준다는 비유를 명시하면 좀 더 쉽게 이해할 수 있습니다...
함수를 바라보는 측면 서브루틴이란 반복되는 작업의 일부를 떼어내서 이름을 붙이고, 언제든지 이름을 불러 중복되는 코드를 없애며 간단하게 만드는 수단입니다. 함수는 이전부터 서브루틴으로서의 용도로 사용되어 왔습니다. 기존 서브루틴은 편리하지만 결과값을 다른곳에 활용할 수 없습니다. 이를 해결하기 위해 좀 더 나아가 값을 반환하는 서브루틴을 생각해볼 수 있습니다. 함수는 반환값을 만듦으로서 간단하게 값을 반환하는 서브루틴으로서의 역할을 수행할 수 있습니다. 이런 부수적인 측면 뿐만 아니라 당연하게도 함수는 함수 그 자체로서 생각해볼 수도 있습니다. 수학적인 정의의 함수와 마찬가지로 입력이 들어가면 결과가 나오는 함수 말입니다. 이렇게 수학적 정의에 충실한 함수를 순수한 함수라고 부릅니다. 순수한 함수가 되기..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 이터레이터와 제너레이터는 ES6에서 새로 도입되었습니다. 이터레이터는 일종의 책갈피와 비슷한 개념입니다. 예를 들어 book이란 배열이 있고 이 배열의 각 요소는 책의 한 페이지를 나타내는 문자열이라고 칩시다. const book = [ /* 문장 하나 씩 들어있는 문자열 배열 */ ]; // book 배열에 values 메서드를 써서 이터레이터를 만듭니다. const it = book.values(); //이터레이터는 보통 it이란 이름으로 변수/상수 명을 짓습니다. //읽기 시작 it.next();// { value: /* book 배열의 첫번째 문장 */, done: false } it.next();/..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 맵 ES6 이전에는 키와 값을 연결하려면 객체를 이용해야 했지만 이럴경우 여러가지 단점이 존재합니다. 프로토타입 체인 때문에 의도치 않은 연결이 생기거나, 키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 쓸 수 없고 프로퍼티 순서를 보장해주지 않습니다. Map 객체는 결함을 모두 해결했고 키와 값을 연결할 목적에 부합하기 위해 만들어 졌습니다. 아래는 Map을 사용하는 예시입니다. const u1 = { name: 'Maple"}; const u2 = { name: 'Kale"}; const u3 = { name: 'Hun"}; const u4 = { name: 'James"}; const userRo..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 프로퍼티 나열 컨테이너의 컨텐츠를 리스트로 나열하라고 하면 일반적으로 배열을 생각하지만 자바스크립트에서 객체또한 컨테이너이고 프로퍼티 나열을 지원합니다. 주의해야할 점은 프로퍼티 나열에서 순서대로 나열된다는 보장이 없다는 점입니다. For ... in const SYM = Symbol(); const o = { a: 1, b: 2, c:3, [SYM]: 4};//for...in 루프에서는 키가 심볼인 프로퍼티는 포함X for(let prop in o){ if (!o.hasOwnProperty(prop)) continue; console.log(`${prop}: ${o[prop]}`); } hasOwnProp..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 배열의 기초 시작하기 전에 자바스크립트 배열의 기본적인 사항들을 확인해봅시다. 배열은 객체와 달리 순서가 있는 데이터 집합이며 0부터 시작하는 숫자형 인덱스를 사용합니다. 한 배열의 요소가 같은 타입일 필요가 없습니다. 다른 배열의 객체도 요소로 사용할 수 있습니다. 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다. 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며 빈자리는 undefined로 채워집니다. 드물게 사용하지만 Array 생성자를 사용해서 배열을 만들 수도 있습니다. 배열 요소 조작 배열 조작 메서드의 일부는 배열 ..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 스코프는 변수와 상수, 매개변수가 언제 어디서 정의되는지 결정합니다. 스코프는 프로그램의 현재 실행 중인 부분, 즉 실행 컨텍스트에서 현재 보이고 접근할 수 있는 식별자들을 의미합니다. 정적 스코프 자바스크립트의 전역 스코프, 블록 스코프, 함수 스코프는 정적입니다. const x = 3; function f() { console.log(x); console.log(y); } { const y = 5; f(); } x는 함수 f를 정의할 때 존재하지만 y는 그렇지 않습니다. y는 다른 스코프에 존재하기 때문에 다른 스코프에서 y를 선언하고 그 스코프에서 f를 호출하더라도 y는 스코프 안에 존재하지 않습니다...
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 함수는 하나의 단위로 실행되는 문의 집합입니다. 모든 함수에는 바디가 있습니다. 함수 바디는 함수를 구성하는 문의 모음입니다. 함수선언 function sayHello(){ console.log("hello!"); } 함수호출(실행) sayHello(); 반환값 함수 호출 또한 표현식이고 이는 값이 될 수 있다는 것을 의미합니다. 반환 값은 함수 호출의 값을 의미합니다. return 키워드는 함수를 즉시 종료하고 값을 반환합니다. function getGreeting(){ return "Hello world!"; } getGreeting(); // "Hello, World!" return을 명시적으로 호출하..
이선 브라운의 러닝 자바스크립트 책을 학습하고 기억해둘 만 한 부분을 야생학습하여 정리하였습니다. 제어문 블록 문 엄밀히는 제어문이 아니지만 제어문과 함께 쓰입니다. 문 여러 개를 중괄호로 묶은 것이며 JS는 이들을 하나의 단위로 취급합니다. { console.log("statement 1"); console.log("statement 2"); } 블록문은 제어문과 함께 쓸 때 유용하게 사용할 수 있습니다. 제어문 내에서 사용되는 일반적인 개념임에도 불구하고 JS에서는 일부러 파트를 떼어 설명하는 이유는 차후에 클로저나 유효범위를 좀 더 쉽게 설명하기 위함인 듯 합니다. while 루프 let funds = 50; while(funds > 1 && funds < 100) { //돈을 겁니다. //주사위를..
1. 변수와 상수 let targetTempC; // let targetTempC = undefined; 와 동일 let targetTempC, room1 = "conference_room_a", room2 = "lobby"; // 변수를 여러 개 선언할 수 있다. 오해하지 말아야 할 점은 초기값을 할당하지 않은 변수는 room1이 아니라 // targetTempC이다. 자바스크립트에서 변수는 let, 상수는 const로 표현한다. (둘 다 ES6에서 생김) 상수는 일반적으로 대문자와 밑줄만 사용한다.(스네이크 케이스) 3. 식별자 이름 자바스크립트는 다른 언어와 달리 달러 기호를 식별자 이름에 사용가능하다. 이를 이용해 제이쿼리에서 달러 기호를 식별자를 사용한다. 5. 원시 타입과 객체 원시 타입에는 ..