하얀 코딩

동기(synchronous) 자바스크립트의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미합니다. 주문 즉시 붕어빵을 만들어 주는 노점상이 있다고 생각해봅시다. 동기적으로 운영되는 노점상의 경우 붕어빵을 주문받은 후 주문받은 붕어빵이 다 만들어지고 난 후에야 다음 손님의 주문을 받고 붕어빵을 제작하게 됩니다. 이 경우 여러 손님의 주문을 소화하기에는 무리가 있습니다. 비동기(asynchronous) 자바스크립트의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미합니다. 앞선 예시로 든 노점상이 비동기적으로 운영되는 경우 여러 손님의 주문을 받으면서 붕어빵을 제작하게 되고 완성되는 대로 손님에게 붕어빵을 제..

JavaScript에는 기본적으로 내장된 고차 함수가 여럿 있습니다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당합니다. 본 게시글에서는 다음과 같이 자주 사용하는 고차함수를 다루어 보도록 하겠습니다. Array.prototype.filter() Array.prototype.map() Array.prototype.reduce() Array.prototype.forEach() Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 ..

이해하기 고차 함수(higher order function)는 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수입니다. 함수는 변수에 저장할 수 있습니다. 그리고 함수는, 함수를 담은 변수를 전달인자로 받을 수 있습니다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있습니다. 그리고 함수는 이 변수를 리턴할 수 있습니다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있습니다. 어떤 고차 함수에 함수를 전달인자로 전달하고, 고차 함수는 함수 자체를 리턴합니다. 변수가 빠졌을 뿐, 동일하게 동작합니다. 이때 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다. 어떤 작업이 완료되었을 때 호..

일급 객체(first-class citizen) 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 그중에서 함수는 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다. 이 글에서는 함수를 중점으로 다루어 보도록 하겠습니다. 일급 객체의 조건 1. 변수에 할당(assignment)할 수 있다. 2. 다른 함수를 인자(argument)로 전달 받는다. 3. 다른 함수의 결과로서 리턴될 수 있다. 함수는 1,2,3번 모든 내용을 포함하기에 일급 객체에 해당됩니다. 1. 변..

특징 얕은 복사 : 실제값 복사 (Number, String, Boolean, Null, Undefined) 깊은 복사 : 주소값 복사 (Object, Symbol) 등 원시값은 기본 자료형(단순한 데이터)을 의미합니다. Number, String, Boolean, Null, Undefined 등이 해당합니다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작됩니다. 참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다. Object, Symbol 등이 해당합니다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장하게 됩니다. 그래서 할당된 변수를 조작하..

정의 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 구문 & 특징 var a, b, rest [a, b] = [10, 20] console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50] console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] { a, b } = { a: 10, b: 20 } console.log(a); // 10 console.log(b); // 20 // Stage 4(finished) proposal {a, b, ...rest} =..

정의 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 객체 앞에 ...을 붙여 사용합니다. 특징 1. 인자를 펼쳐서 넣는 개념입니다. const spread = [1, 2, 3]; const arr = [0, ...spread, 4]; // [0, [1,2,3], 4] (X) // [0, 1, 2, 3, 4] (O) 2. 빈 배열에 전개 문법을 사용할 경우, 아무것도 전달되지 않습니다. const spread = []; const arr = [0, ...spread, 1]; //[0,1] 3. 기존 배열을 변경하지 않습니다. 비파괴(immuta..

개념 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의할 것. // y만 호이스팅 대상 x = 1; // x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령..