Nullish coalescing operator 널 병합 연산자란 왼쪽 피연산자가 null 이거나 undefined라면 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다. 뿐만 아니라 null, undefined말고 falsy값. 즉, ' ' 이나 0 인 값들도 포함된다. 밑에는 if문을 사용한 예제이다. printMessage 함수는 text를 인자로 받아서 text의 값을 변수 message에 할당한다. 만약 text가 null 이거나 undefined이면 변수 message에 'nothing to display'라는 문자열을 할당한다. 보통 이렇게 변수값을 저장할 때 논리 연산자(OR)를 사용한다. function printMessage(text) { let message = te..

함수 선언식 function sayYo() { alert("Yo!") } sayYo(); 함수 표현식 let speak = function sayYo() { alert("Yo!!"); } alert( speak ); 함수 표현식이란 함수를 변수에 할당하여 표현한 방식이다. 함수는 값이기 때문에 함수를 변수에 할당할 수 있다. 위 예제처럼 변수 speak에 함수 sayYo를 할당했는데 함수는 값이기 때문에 함수 코드도 출력할 수도 있다. 여기서 alert을 이용해서 speak를 호출해보면 speak에 할당했던 함수가 출력되는걸 확인할 수 있다. 콜백함수 function person(ask, adult, teenager) { let age = prompt(ask); if(age >= 20) adult(age..

자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다 자바스크립트 엔진은 기본적으로 웹 브라우저에 내장되어 있다. 물론 브라우저마다 엔진의 종류가 다르지만 코드 실행과정은 비슷하기 때문에 웹 브라우저에서 자바스크립트 엔진을 이용한 코드 실행 과정은 알고있어야 한다. 자바스크립트 엔진을 이용한 코드 실행 과정은 다음 그림과 같다. 자바스크립트 소스코드를 파싱(parsing)하여 AST(Abstract Syntax Tree)로 변환한다. 인터프린터(Interpreter)는 AST를 기반으로 하여 바이트 코드(Byte code)를 생성한다. 인터프리터가 바이트코드를 생성할 때 사용되는 함수 및 타입 정보들을 프로파일링 데이터(Profiling data)를 최적화 컴파일러(Optimizing compil..

변수 선언 방식 자바스크립트에서 변수를 선언하는 방법으로는 다음과 같이 세 가지 방법이 있다. let const var let 과 var로 선언할 경우는 값이 변할수 있는 경우에 사용되고 const는 상수와 같이 정해진 값으로 나중에 변경할 일이 없을 때 사용한다. 하지만 var는 오래된 선언방식이고 최신 코드에선 쓰이지 않는 선언방식이기에 let과 var 둘 중에 하나를 써야한다면 추세에 맞게 let을 써야한다. 그럼에도 불구하고 최근엔 var을 쓰지도않는데 알아야 할 필요가 있을까? 여기서 let으로 선언한 변수와 var로 선언한 변수는 유사하지만 차이점이 존재한다. 현재 var는 최신 스크립트에서는 볼 수 없지만 오래된 스크립트에선 아직 볼 수 있다. 때문에 오래된 스크립트 코드에서 var을 let..

use strict? ECMAScript5(ES5)가 등장하기 전엔 자바스크립트는 기존 기능을 변경하지않으면서 새로운 기능을 추가하며 계속 발전해왔다. 하지만 기존 기능을 변경하지 않으면서 새로운 기능을 추가하는 것이 장점이자 단점이되었다. 그 이유는 기존 기능을 변경하지 않으니 자바스크립트 창시자들이 실수 했던것들이나 불완전한 코드들이 지속적으로 남아있다는 것이다. 이 부분을 보완하고자 새롭게 제정된 것이 ES5이다. ES5에서는 새로운 기능이 추가되면서 기존 기능이 변경됐다. 그런데 ES5에서 새로운 기능이 추가됐다면 기존에 있던 기능들과 하위 호환성 문제가 생기지 않을까? 이 문제점을 고려해 변경 사항인 부분들은 ES5 기본모드에선 활성화 되지 않게 설계되어있다. 즉, 변경 사항 된 기능들을 사용하..

🤔 IntersectionObserver API? MDN에서는 아래와 같이 설명되어 있다. (developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. 웹 API에서 제공하는 API로 타겟 요소와 상위 요소 또는 viewport사이 intersection내의 변화를 비동기적으로 관찰하는 방법이다. 쉽게 말해 원하는 요소가 특정..