자바스크립트(Javascript)에서 변수를 선언하는 키워드에는 var, let, const가 있습니다. 각각의 키워드는 모두 변수를 선언하는 것은 동일하지만, 스코프(scope), 호이스팅(hoisting), 재할당 가능 여부의 차이를 가지고 있습니다. 본 글에서는 이 세 가지 변수 선언을 위한 키워드의 차이점을 소개합니다. 스코프(Scope)스코프는 변수가 코드 내에서 접근 가능한 범위를 의미합니다. var, let, const는 각각 아래와 같은 스코프를 가집니다.var: 함수 레벨 스코프(function-level scope)let: 블록 레벨 스코프(block-level scope)const: 블록 레벨 스코프(block-level scope)블록 레벨 스코프(block-level scope)를..

자바스크립트(JavaScript)에서 무작위 수를 생성하는 것은 개발하면서 종종 사용하는 함수 중 하나입니다. 예를들어, 게임, 무작위 테스트 데이터 생성, 보안 분야 등에서 중요한 역할을 합니다. 본 글에서는 자바스크립트의 Math.random() 함수를 통해 어떻게 무작위 수를 생성하는지, 그리고 그 활용 방법에 대해 설명합니다. Math.random() 함수란? 자바스크립트의 Math.random() 함수는 0 이상 1 미만의 범위에서 소숫점 형태의 무작위 수를 생성합니다. 이 함수는 매개변수를 필요로 하지 않으며, 사용하는 방법도 매우 간단합니다. const randomNumber = Math.random(); console.log(randomNumber); // 예: 0.123456789 무작위..

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 언어 중 하나이며, ES6(ECMAScript 2015)는 그 사용성과 편의성을 크게 향상시킨 중요한 업데이트입니다. 특히, 배열을 다루는 데 있어 map, filter, reduce 함수는 개발하면서 가장 많이 사용하는 함수라고 해도 과언이 아닙니다. 본 글에서는 이 세 함수의 개념과 사용 방법을 설명합니다. map 함수 map 함수는 첫번째 인자로 함수를 받습니다. 배열의 요소를 순회하면서 인자로 받은 함수의 반환값을 새로운 요소로 가지며, 새로운 배열을 반환합니다. 즉, 원본 배열을 변형하지 않고 새로운 배열을 생성합니다. 예를들어 어떤 배열 요소들의 제곱수를 가지는 배열을 구한다고 하면, 아래와 같이 작성할 수 있습니다. cons..

Object.assign() map 형태의 자료형 object를 2개 이상을 합치고 싶을때, Object.assign() 함수를 사용할 수 있습니다. 예를들어, 아래와 같이 2개의 object가 있을때, Object.assign() 을 사용하면 하나의 object로 합칠 수 있습니다. const userInfo = { name: '길동', age: 28 }; const address = { address: '서울특별시', addressDetail: '강남구' }; const nextUserInfo = Object.assign(userInfo, address); console.log(nextUserInfo); // Object { name: "길동", age: 28, address: "서울특별시", add..

Intersection Observer API 이전에는 스크롤 위치에 따라 화면을 변화시키기 위해, 아래와 같이 scroll event listener 를 추가하여 사용했습니다. document.addEventListener("scroll", callback); 이렇게 스크롤로 화면 내의 요소(element)의 변화를 감지하는 일은, 스크롤을 조금만 움직여도 이벤트가 발생하며 사이트에 부하를 줄 수 있기 때문에 비효율적이었습니다. 비교적 최근 브라우저에서는 Intersection Observer 라는 API를 지원해주기 때문에 이전 방법(스크롤 이벤트를 이용한 방법)보다 효율적이고, 쉽게 컨트롤 할 수 있게 됐습니다. Intersection Observer 사용하기 사용하는 방법은 관찰자(Observer..