OCEAN-WARD BOUND

개요 웹 개발의 가장 기본적인 HTML, CSS, JS의 대한 지식을 어느정도 쌓아서 이제 프레임워크를 선택할 때가 왔다. 웹 프레임워크는 React, Angular, Vue, Svelte 등 다양한 종류가 있지만 나 같이 처음 프레임워크를 배우는 사람은 여타 다른 프레임워크와 비교했을 때 점유율이 가장 높은 React를 선택하지 않을까 싶다. React를 배우기에 앞서, React가 가지고 있는 특징과 그 특징으로 발휘되는 장점에 대해서 간략하게 설명하고 가면 좋을 것 같아서 해당 글을 작성한다. React란? React는 2013년 페이스북에서 개발한 웹 UI 개발을 위한 자바스크립트 라이브러리이다. React는 다른 프레임워크와는 다르게 웹의 프론트엔드, 즉 서버와 데이터베이스를 포함하지 않고, 사..

자바스크립트의 코드를 보다보면, 변수나 리터럴 앞에 ... 붙어있는 것을 볼 수 있을 것입니다. 이는 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개 이상의 프로퍼티로 구성된 집합을 말하며, 프로퍼티는 키와 값으..

1. ?. (옵셔널 체이닝 연산자) ES11에서 도입된 옵셔널 체이닝 연산자(?.)는 연산자 ?.는 좌항의 피연산자가 null이나 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. var elem = null; var value = elem?.value; //?.연산자 좌항이 null이기 때문에 value에는 undefined가 반환. console.log(value); //undefined 옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. 다시 말해, 내가 참조할려는 객체 변수가 존재할 때는 프로퍼티를 참조하고 아니라면 그냥 undefined 반환을 명령하는 연..

자바스크립트 함수 파트에서는 다양한 용어가 등장한다. 선언문, 리터럴, 표현식, 익명, 기명 등 등 명확하게 이해하지 않고 넘어가면 추 후에 나올 개념들에 대한 이해도 더뎌질 수 있기 때문에 정리해보겠다. 우선 함수란, 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합이라고 한다. 프로그램 내에서 반복되는 작업이 있으면 이를 함수화하여 재사용 및 수정 등을 보다 편리할 수 있게하는 프로그래밍 기법을 말한다. 자바스크립트에서 함수를 선언하는 다양한 방식이 있는데, 가장 기본적인 방식은 함수선언문이다. function add(a, b){return a+b;} //함수선언문으로 함수를 선언 위와 같이 function 키워드, 함수 이름, (매개변수), {동작}으로 함수를 선언하..

Javascript에서 논리합(||연산자)과 논리곱(&&연산자)의 평가 결과는 항상 Boolean 값이 아닐 수도 있습니다. 아래의 예를 보겠습니다. //논리합(||) 연산자 'cat' || 'dog' // => 'cat' false || 'dog' // => 'dog' 'cat' || false // => 'cat' Javascript 엔진은 위 해당 식들을 좌항에서 우항 방향으로 평가합니다. 이 때, 논리합 연산자인 ||는 두 항 중 하나만 true라도 true를 반환합니다. 그래서 'cat' || 'dog' 의 경우는 'cat'은 빈 문자열이 아니기 때문에 true로 평가되고, 앞에 항이 true라면 뒤를 볼 필요도 없이, 'cat'을 반환하는 것 입니다. 두번째로 false || 'dog' 의 경..