OCEAN-WARD BOUND

들어가며.. 안녕하세요, Ocean입니다. 오늘은 평소 잘 모르던 개념인자바스크립트의 이터러블(Iterable)과 이터레이터(Iterator)를 확실하게 정리해 보겠습니다. 참고 글코어 자바스크립트 - iterable 객체1. 이터러블이란?이터러블(iterable, 반복 가능한) 객체는, 이름 그대로 순회 가능한 객체를 말합니다.데이터를 순회하는 일은 매우 흔한 작업이며, 우리가 잘 알고 있는 배열은 순회하기에 적합한 구조를 가지고 있습니다. 자바스크립트에서는 어떤 객체가 특정한 조건을 가지면 배열이 아니더라도 배열처럼 순회할 수 있습니다.이 때, 이 특정한 조건을 공통된 인터페이스로 추상화하여 객체에 적용하면 해당 객체를 이터러블 객체라고 부를 수 있게 됩니다. 이터러블 객체의 조건`Symbol.ite..

들어가며..안녕하세요, Ocean입니다.React로 개발을 진행하다 보면 파일들을 분리하고 이를 import 또는 export 하는 일이 빈번합니다. 이는 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위함인데, 이러한 코드 분리 원칙을 모듈 시스템이라고 합니다.이번 글에서는 자바스크립트 모듈 시스템의 필요성, 발전 과정과 종류, 간단한 문법을 정리하며 이해하는 시간을 가져보겠습니다.참고 글1. 자바스크립트의 표준 정의 : CommonJS vs ES Modules2. MDN - Javascript Modules0. 모듈 시스템이란?  모듈 시스템은 코드의 재사용과 관리 용이성을 위해 파일 단위로 코드를 나누고, 이를 서로 연결할 수 있는 방법과 규칙을 제공하는 것을 말합니다. 모듈 시스템은 복잡한 프..

이벤트 버블링 브라우저 내에서 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이러한 현상을 이벤트 버블링이라고 합니다. 위와 같은 형태를 가진 웹 페이지가 있다고 가정해보겠습니다. 위의 main, section, div, p 태그는 계층관계를 가지고 있습니다. 이 때 해당 요소들의 click 이벤트를 감지하는 리스너를 등록합니다. 이 때 위의 p 태그를 클릭했을 시에 어떤 일이 발생할까요? 위와 같이 콘솔에 clicked!가 4번 출력됩니다. 이렇듯, p 태그의 이벤트가 동작하고 p 태그와 계층 관계에서 부모 관계를 가지고 있는 div, se..

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용합니다. 하지만 콜백 함수는 순서 보장 및 에러 처리를 위해선 콜백 지옥이 발생하여 가독성이 나쁘고 프로그램이 복잡해지며, 여러 개의 비동기 처리 또한 한계가 있습니다. ES6에서는 이러한 콜백 함수의 단점을 보완하는 비동기 처리 방식인 프로미스를 도입했습니다. Promise, 프로미스 Promise 함수는 new 연산자와 함께 생성자를 호출하여 프로미스 객체를 생성합니다. 이 때 프로미스 생성자 함수에 인수로는 비동기 처리를 할 콜백 함수가 들어가고 (해당 콜백 함수를 ECMAScript에선 executor 함수라고 부름), 이 콜백 함수는 resolve와 reject라는 콜백 함수를 인수를 갖습니다. const promise = ne..

자바스크립트의 코드를 보다보면, 변수나 리터럴 앞에 ... 붙어있는 것을 볼 수 있을 것입니다. 이는 ES6에서 도입된 기능으로 사용되는 형식에 따라서 Rest 파라미터와 스프레드 문법으로 분류될 수 있습니다. Rest 파라미터 Rest 파라미터 (나머지 매개변수)는 함수의 매개변수 앞에 세 개의 점 ...을 붙여서 정의한 매개변수를 의미합니다. 간단하게 말하면, Rest 파라미터는 함수에 전달된 인수들을 배열로 변환하여 전달 받는 것 입니다. const rest = function(...rest){ console.log(rest); }; rest(1,2,3,4,5); // [1, 2, 3, 4, 5] //전달 받은 인수들을 배열로 변환한다. 또한 Rest 파라미터는 일반 매개변수와 함께 사용할 수 있습..

자바스크립트의 완전히 기본적인 개념만 알던 비교적 과거에, 클로저란 개념은 정말 어렵고 난해했습니다. 하지만 자바스크립트의 근간을 이루는 렉시컬 스코프와 실행 컨텍스트를 이해하니 조금은 클로저란 개념에 가까워진 것 같습니다. 이번 글에서는 앞서 말한 실행 컨텍스트와 렉시컬 스코프의 동작 원리를 세부적으로 설명하면서 클로저를 이해하기 보다는 대략적으로 설명하면서 어색한 개념인 클로저와 조금 가까워지는 그런 글이 됐으면 좋겠습니다. (정리하기 귀찮아서 그런건 진짜 아닙니다.) 클로저 (Closure) 우선, 클로저는 자바스크립트 고유의 특징적인 개념은 아닙니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어와 렉시컬 스코프로 동작하는 언어의 특징을 사용한 일종의 패턴, 개념이라고 생각하시면 될 것 같습..

this? 일반적인 프로그래밍 언어에서의 this는 객체지향언어에서 생성자 함수를 이용해 새로운 객체를 생성할 때 그 새롭게 생성된 객체를 가리키는 식별자입니다. 하지만 자바스크립트에서 this는 조금 더 다양한 맥락에서 사용할 수 있고, 다른 방식으로 동작합니다. 아래의 예제를 보겠습니다. const foo = function(){ console.dir(this); }; this가 어떤 객체를 가리키고 있는지를 출력해주는 간단한 함수입니다. 이 함수의 this는 해당 함수를 "어떻게" 호출하냐에 따라서 this가 가리키는 객체가 달라집니다. // 일반 함수로 호출 foo(); // Window // 일반 함수로 호출 시엔 전역 객체 window를 가리킨다. // obj 객체의 메소드로 호출 const ..

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이다. var 키워드로 선언된 변수는 다른 언어와는 구별되는 독특한 특징들이 있다. var 키워드 ( ~ ES5) 1. 변수 중복 선언 허용 var x = 1; var y = 1; var x = 100; // 같은 스코프 내에서 변수의 중복 선언을 허용함. // 초기화문이 있는 변수 선언문은 JS 엔진ㅇ에 의해 var 키워드가 없는 것 처럼 동작 var y; // 초기화문이 없는 변수 선언문은 무시된다. console.log(x); // 100 console.log(y); // 1 위 예제와 같이 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이..

스코프란? 모든 식별자(변수 이름, 함수 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라고 한다. 스코프 = 식별자가 유효한 범위 (유효 범위) function foo(){ var x = 10; console.log(x); } foo(); // 10 console.log(x); // ReferenceError: x is not defined 위의 코드를 보자. 변수 x는 함수 안에서 정의되었기 때문에 x의 스코프는 foo 함수 내부이다. 이 변수 x의 유효 범위, 즉 스코프는 함수 내부인 것이다. 스코프가 함수 내부이기 때문에 함수 외부에서는 변수 x를 참조할 수 없다. 따라서 변수 x의 스코프는 지역 스코프이다. var x = "g..

객체란? 자바스크립트는 기본적으로 객체기반의 프로그래밍 언어이다. 그렇기 때문에 자바스크립트를 구성하는 거의 모든 것이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. ※ 원시 값 (primitive, 원시자료형) : string, number, bigint, boolean, undefined, symbol, null 원시 타입의 값은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료 구조이다. 또한 원시 타입은 변경 불가능한 값이지만, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. → 이에 대한 설명은 다른 글로 설명하겠습니다. 객체의 구조 객체는 0개 이상의 프로퍼티로 구성된 집합을 말하며, 프로퍼티는 키와 값으..