JS & TS/Javascript

구조 분해 할당은 모던 자바스크립트 문법으로서 변수 선언 시 사용되며, 객체나 배열의 특정 요소를 선택적으로 변수에 할당하여 쉽게 사용할 수 있게 한다. 이를 통해 코드를 더 간결하고 읽기 쉽게 만들 수 있다.어느정도 숙련된 자바스크립트/타입스크립트 사용자라면 숨쉬듯이 사용하는 문법이기도 하다. 그런데 이 문법을 메모리 주소와 연관지어 생각해본 적은 한 번도 없었다. 적어도 오늘 어떤 일이 있기 전까지는.  나는 NestJs로 백엔드 작업을 하며 유저 기능을 위한 커스텀 가드를 만들고 있었다. 아주 간단한 작업이었으며, 나는 별 생각 없이 코드를 마무리지었다. 그리고 코드를 한번 쓱 보는데 뭔가 이상하다는 생각이 들었다. validateRequest 함수 내에서 this.authService.verify..

이터레이션 프로토콜은 자바스크립트에서 컬렉션(배열, 객체 등)을 순회하는 방식을 정의한 규약이다. 이 프로토콜은 준수하는 객체는 for ... of 문으로 내부를 순회할 수 있고, 스프레드 연산자를 사용할 수 있으며, 비구조화 할당을 통해 필요한 값만을 꺼내 사용할 수도 있다. 따라서 이터레이션 프로토콜을 이해하는 것은 그 자체로 자바스크립트의 많은 기능을 더 깊이 있게 활용할 수 있도록 한다.  이터러블과 이터레이터이터레이션 프로토콜은 다시 '이터러블 프로토콜(이하 이터러블)'과 '이터레이터 프로토콜(이하 이터레이터)'로 나뉘어진다. 이터러블은 단어 그대로 '순회할 수 있는' 객체를 정의하는 데 사용된다. 만약 어떤 객체가 이터러블하다면, 해당 객체는 이터레이터를 리턴하는 메소드 [Symbol.iter..

실행 컨텍스트자바스크립트 엔진(이하 JSE)은 코드를 실행하기에 앞서 코드를 평가하는 과정을 거친다. 이를 '실행 컨텍스트 평가'라고 부르고, 이후 선언문을 제외한 소스코드가 실행된다. 사실 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어있다.실행 컨텍스트 평가 과정을 통해 JSE는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 생성하게 된다. 이 객체가 바로 실행 컨텍스트(이하 컨텍스트)이다. 컨텍스트가 구성되면 JSE는 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 하나씩 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.하나의 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval 함수, 함수 실행 등이 있다. 자바스크립트 파일..

Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지를 비동기적으로 감지하는 방법을 제공한다. 이 API는 무한 스크롤, 지연 로딩, 광고 노출 감지 등을 구현하는 데 특히 유용하다.전체적인 구성은 크게 3가지 단계로 구성된다. 1) 노드를 관찰할 새로운 intersectionObserver를 생성하면서 2) 관찰되었을 때 수행할 작업과 관찰 방식을 정의하며 3) observe 메소드를 사용해 관찰할 노드를 등록해주는 것이다. 바닐라JS에서 일반적으로 사용되는 코드의 모습은 아래와 같다.let target = document.querySelector('#target');const observer = new IntersectionObserver(callb..

fetch()이 함수를 이용하면 간편하게 서버로 리퀘스트를 보낼 수 있다. 함수의 첫 번째 아규먼트로 통신할 서버의 url을 넣어주고, 두 번째 아규먼트로 리퀘스트와 함께 실어보낼 옵션 객체를 담아주게 된다.fetch("URL") .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); });통신을 통해 받아오는 json 데이터는 단순 문자열이기 때문에 JS에서 사용해주려면 객체로 변환시켜줄 필요가 있다. JSON.parse() 메소드를 이용하면 간단하게 json 데이터를 객체로 바꿔줄 수 있는데, 이를 역직렬화 Deserialization 라고 한다.fetch("URL") .then((resp..

타입캐스트와 확인JS에서는 묵시적으로 데이터의 타입을 변화해주기도 한다. 가령 3 + "2"와 같은 계산식에서 그러한데, 이러한 묵시적 타입 변경 대신 사용자가 직접 데이터의 타입을 바꿔줄 수 있다. 이를 타입캐스트라고 부른다. typeof를 사용하면 특정 데이터의 타입을 확인할 수 있다.Number() // 숫자형으로 변환String() // 문자형으로 변환Boolean() // 불린형으로 변환typeof value3 typeof(value3)// 자료형을 확인할 수 있다.  Truthy vs Falsy불린 값을 판단할 때, 조건식이나 불린 타입의 값이 아니더라도 맥락에 따라 불린 값처럼 평가될 수 있다. 이 때, false 처럼 평가되는 값 [ false, null, undefined, 0, NaN,..

DOM은 문서 객체 모델(The Document Object Model)로서 웹페이지 내부의 모든 요소를 객체로 나타낸 것이다. 문서 객체의 상위에는 웹브라우저의 요소를 객체로 나타낸 브라우저 객체 모델(window 객체)이 존재한다. 브라우저 객체 모델에는 document 객체 뿐만 아니라 alert, console 등의 객체도 포함되어있다.JS를 사용하여 웹 페이지를 '인터랙티브'하게 구현하는 첫걸음은 결국 마개조해줄 요소 노드(element node)를 변수나 상수에 가져다 넣는 것부터 시작할 것이다. 여기에는 이미 존재하는 노드를 불러오는 것 뿐만 아니라 당장은 문서 객체 내에 존재하지 않는 노드를 생성하는 것 역시 포함된다.  조작할 노드 불러오기존재하지 않는 노드 생성하기createElemen..

자바스크립트에는 원시형(primitive type: string, number, boolean etc)과 참조형(reference type: object, Array etc)이 존재한다. 원시형은 값 자체이며 메모리에 바로 저장된다. 참조형은 원시타입을 제외한 나머지를 저장하는 방식으로, 메모리에 실제 값들이 저장되어 있는 주소가 저장되어있다.let value1 = "대한";let value2 = "";value2 = value1;value2 += "민국"console.log(value2); // "대한"console.log(value1); // "대한민국"원시형이 저장된 변수 value1의 값을 value2에 복사하고, value2에 "민국"이라는 문자열을 추가해주었다. 이러한 과정은 당연하게도 val..

객체(object)const aydenProfile = { name: 'Ayden', age: 28, bornYear: 1994, 'most Famous Work': { title: '사서 에밀리 힐덴베르크의 우울', language: 'korean' }}객체는 key와 value로 이루어져있으며, 이 두 값을 합쳐서 property라고 부른다. key엔 문자형, value엔 모든 자료형이 허용된다.일반적으로 객체의 key는 문자열로 구성되지만, 반드시 따옴표로 감싸줘야 할 필요는 없다. 다만, 첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않거나 띄어쓰기나 하이픈을 사용해야 할 때는 따옴표로 묶어줘야 한다. 프로퍼티의 접근과 변경ayden..