지수 연산자(Exponentiation Operator)를 사용하면 어떤 수를 다른 수의 거듭제곱으로 손쉽게 계산할 수 있습니다. 이 연산자는 ** 기호로 표기됩니다. 사실 JavaScript에는 이미 Math.pow() 메서드가 존재하여 거듭제곱 계산이 가능하지만, 지수 연산자(**)는 JavaScript뿐만 아니라 Python, Ruby 등 다른 프로그래밍 언어에서도 공통으로 사용되는 표준 문법이라는 점에서 큰 장점이 있습니다.지수 연산자의 주의사항(단점)지수 연산자의 유일한 단점은 음수를 밑(base)으로 사용할 때 반드시 괄
객체 비교의 기본 원리자바스크립트에서 객체는 배열이나 문자열과 같은 단순 자료형이 아닙니다. 객체는 참조 타입(reference type)이므로 변수에는 값 자체가 아닌 메모리 주소가 저장되며, 따라서 === 또는 == 연산자로 직접 비교하는 것은 불가능합니다.두 객체를 비교하려면 먼저 JSON.stringify()를 사용해 객체를 문자열로 변환(stringify)한 뒤, 동등 연산자로 비교해야 합니다.예제 1: JSON.stringify()를 이용한 비교다음 예제에서는 두 객체를 각각 문자열로 변환한 후 서로 비교합니다.<h
_isEqual() 메서드란?_isEqual()은 JavaScript의 underscore 및 lodash 라이브러리에서 제공하는 유틸리티 메서드로, 두 개의 JavaScript 객체를 비교할 때 사용됩니다.이 메서드가 주목받는 핵심적인 이유는 객체를 비교할 때 속성(property)의 순서를 전혀 고려하지 않는다는 점입니다. 즉, 두 객체에 담긴 속성과 값이 동일하기만 하면 순서가 다르더라도 같은 객체로 판단합니다.반면, 객체 비교에 흔히 사용되는 JSON.stringify()는 객체를 문자열로 변환한 뒤 비교하기 때문에 속성의
배열의 요소들이 주어진 테스트 조건을 통과했는지 확인하는 방법에는 크게 두 가지가 있습니다. 바로 Array.filter() 메서드와 _.filter() 메서드입니다. 전자는 자바스크립트의 기본 내장 메서드인 반면, 후자는 자바스크립트 라이브러리인 underscore.js에서 제공하는 메서드입니다._.filter() 메서드문법_.filter( list, conditions);이 메서드는 두 개의 매개변수를 받습니다. 하나는 검사 대상 요소들이 담긴 리스트(list)이고, 다른 하나는 테스트 기준이 되는 조건(conditions),
자바스크립트 라이브러리 underscore.js는 배열에서 모든 거짓(falsy) 값을 한 번에 제거할 수 있는 _.compact() 메서드를 제공합니다. 여기서 말하는 거짓 값이란 NaN, undefined, 빈 문자열(), false, 0을 의미합니다. 이 메서드는 거짓 값이 모두 걸러진 새로운 배열을 반환하며, 원본 배열은 변경되지 않습니다.문법_.compact( array );_.compact()는 배열을 매개변수로 받아, 거짓 값이 제거된 새로운 배열을 결과로 돌려줍니다.예제<html> <body>
_.without() 메서드는 자바스크립트의 underscore.js 라이브러리에 포함된 유틸리티 함수입니다. 두 개의 매개변수를 받으며, 첫 번째 배열에서 두 번째 매개변수로 전달된 값들을 제거한 새로운 배열을 반환합니다.이 메서드는 값이 true인지 false인지 판단하지 않고, 각 값을 하나씩 순서대로 확인하며 작업을 수행합니다. 특히 주의할 점은 대소문자를 구분한다는 것입니다._.without() 기본 문법_.without(array, values);array: 원본 배열values: 제거하고 싶은 값들(여러 개 지정 가능)
JSON.stringify() 메서드는 객체를 문자열로 변환하는 기능뿐만 아니라, 객체 내부에 포함된 함수(function)를 자동으로 제거하는 역할도 합니다. 이번 글에서는 JSON.stringify()를 활용해 객체에서 함수를 손쉽게 제거하는 방법을 예제와 함께 자세히 살펴보겠습니다.JSON.stringify()가 함수를 제거하는 원리JSON(JavaScript Object Notation)은 데이터 교환을 위한 경량 형식으로, 표현 가능한 값의 종류가 제한적입니다. JSON 형식에서는 문자열, 숫자, 불리언, 배열, 객체, n
JSON.stringify() 메소드는 객체를 문자열로 변환하는 기능 외에도, 객체 내부에 포함된 함수(function)를 발견하면 해당 함수를 자동으로 제거합니다. 따라서 함수가 삭제되지 않도록 하려면, JSON.stringify()를 적용하기 전에 먼저 함수를 문자열로 변환해야 합니다.함수가 삭제되는 일반적인 경우다음 예제에서는 함수가 문자열로 변환되지 않은 상태이기 때문에, JSON.stringify() 메소드가 실행되는 시점에 함수가 제거되고 나머지 속성들만 출력됩니다.예제<html> <body> <
변수를 다시 선언한다고 해서 기존 값이 곧바로 사라지는 것은 아닙니다. 해당 변수에 새로운 값이 할당되기 전까지는 원래 값이 그대로 유지됩니다. 값이 대체되는 경우: 재선언 후 재할당 다음 예제에서 변수 x와 y에는 각각 4와 8이 할당되어 있습니다. 이후 같은 이름으로 변수를 다시 선언하고 새로운 값(7과 10)을 할당하면, 이전 값은 새 값으로 대체되어 출력 결과에 반영됩니다. 예제 <html> <body> <script> var x = new Number(4);
배열을 함수 인수로 전달하기예전에는 자바스크립트에서 배열을 함수의 인수로 전달하려면 apply() 메서드와 null을 함께 사용해야 했습니다. 그러나 null을 사용하면 코드가 지저분해지고 의미를 파악하기 어려워지는 단점이 있었습니다. 이러한 문제를 해결하고 코드를 더욱 깔끔하게 작성할 수 있도록 ES6에서 스프레드(spread) 연산자가 도입되었습니다. 스프레드 연산자를 사용하면 apply() 함수 없이도 배열을 함수 인수로 간편하게 전달할 수 있습니다.예제 1: apply()와 null을 사용하는 구식 방법다음 예제는 null과
배열에서 최댓값을 찾는 방법에는 논리적인 접근 방식과 여러 가지 내장 메서드가 있지만, 스프레드(spread) 연산자를 활용하면 훨씬 더 간편하게 최댓값을 구할 수 있습니다. 배열의 최댓값을 찾을 때 가장 널리 사용되는 내장 메서드는 Math.max()입니다. 그러나 이 메서드는 모든 요소를 개별적으로 인자로 전달해야 하기 때문에 작업이 번거로워질 수 있습니다. 이러한 문제를 해결하기 위해 스프레드 연산자가 활용됩니다.예제 1: 스프레드 연산자 없이 Math.max() 사용하기다음 예제는 Math.max() 함수에 스프레드 연산자를
자바스크립트에서 두 개 이상의 배열을 결합할 때는 기본 제공 메서드인 array.concat()을 사용할 수 있습니다. 하지만 스프레드(spread) 연산자를 활용하면 훨씬 더 직관적이고 간결한 코드로 배열을 합칠 수 있습니다. 스프레드 연산자는 ES6(ES2015)에서 도입된 문법으로, 최신 브라우저 환경에서 널리 지원됩니다.기본 구문var merged = [...arr1, ...arr2];스프레드 연산자의 장점을 제대로 이해하기 위해, 먼저 스프레드 연산자 없이 배열을 결합하는 전통적인 방법부터 살펴보겠습니다.concat() 메
JavaScript 부동 소수점 연산의 정확성 문제JavaScript에서 부동 소수점(floating-point) 연산은 항상 100% 정확하지 않습니다. 예를 들어 1/3을 계산하면 0.33333...처럼 무한히 이어지는 소수가 되는데, 컴퓨터는 이 값을 어느 한 시점에서 반올림하여 저장합니다. 따라서 이렇게 잘린 소수 값끼리 더하면 기대한 결과를 얻지 못하는 상황이 발생합니다.즉, 두 개의 소수를 더할 때 반올림 오차(rounding error)가 생길 수 있습니다. 다행히 이 오차는 매우 작아서 대부분의 경우 실제 코드 실행
Math.trunc() 메서드란?JavaScript의 Math.trunc() 메서드는 Math.floor(), Math.ceil(), Math.round()와는 다르게 동작합니다. 이 메서드는 숫자의 소수 부분(fractional part)을 잘라내고 오직 정수 부분만 반환합니다.가장 큰 특징은 반올림(rounding)을 전혀 수행하지 않는다는 점입니다. 값이 양수인지 음수인지도 판단하지 않으며, 단순히 소수점 이하를 잘라내는 역할만 담당합니다.문법(Syntax)Math.trunc(x);매개변수(parameters) - Math.t
제너레이터(Generators)란? JavaScript는 제너레이터 함수(Generator Function)와 제너레이터 객체(Generator Object)를 지원합니다. 제너레이터 함수는 겉보기에는 일반 함수와 같지만, 값을 생성할 때 return 대신 yield 키워드를 사용한다는 점이 크게 다릅니다. yield 키워드는 함수의 실행을 일시 중단하고 그 시점의 값을 호출자(caller)에게 전달합니다. 그리고 나중에 중단되었던 바로 그 위치부터 실행을 재개할 수 있는 것이 제너레이터의 가장 큰 특징입니다. 즉, 한 번의 호출
라디오 버튼을 페이지 로드 시 기본적으로 선택된 상태로 만들려면 해당 버튼의 checked 속성을 true로 설정해야 합니다. checked 값이 true로 지정되면 해당 라디오 버튼은 기본적으로 자동으로 선택(포커스)됩니다.아래 예제에는 라디오 버튼만 존재하며, 어떤 버튼도 기본으로 선택되어 있지 않습니다.예제<html> <form id=radiobuttons name=radiobutton> <input id=r
for await...of란 무엇인가?for await...of 문은 배열, 유사 배열 객체(array-like objects), Map, Set 등과 같은 동기(synchronous) 객체뿐만 아니라 비동기(async) 객체를 순회하는 반복문을 생성합니다.일반적인 for...of 문이 동기 이터러블만 순회할 수 있는 것과 달리, for await...of는 Promise를 반환하는 비동기 이터러블도 자연스럽게 처리할 수 있어 비동기 프로그래밍에서 매우 유용합니다.기본 문법for await (variable of iterable)
자바스크립트 배열에 undefined 구멍(빈 슬롯)을 만드는 방법은 간단합니다. 기존보다 훨씬 높은 인덱스 위치에 새 요소를 추가하고, 그 사이의 인덱스들은 그대로 비워 두면 됩니다. 이렇게 건너뛰어진 작은 인덱스들은 자동으로 undefined 구멍으로 채워집니다. 아래 예제를 통해 자세히 알아보겠습니다.예제다음 예제에서는 처음에 요소 3개(1, 2, 3)만 담긴 배열을 선언했습니다. 이후 원래 존재하지 않던 5번 인덱스에 값 6을 할당하면 어떻게 되는지 확인해 보겠습니다. 이 순간 배열의 길이는 6이 되며, 건드리지 않고 비워
JavaScript에서 문자열을 함수로 변환하려면 eval() 메서드를 사용해야 합니다. 이 메서드는 문자열을 매개변수로 받아 해당 문자열을 실제로 실행 가능한 JavaScript 코드, 즉 함수로 변환해 줍니다.문법(Syntax)eval(string);예제(Example)다음 예제에서는 JSON 형식의 문자열 안에 age라는 속성이 함수 형태의 문자열로 저장되어 있습니다. 이후 eval() 함수를 사용하여 age 속성의 문자열을 실제 함수로 변환한 뒤 호출하면, 아래 출력 결과처럼 나이 값이 정상적으로 반환되는 것을 확인할 수 있
배열에서 중복 제거하기배열에서 중복 요소를 제거하는 방법에는 여러 가지 로직이 있지만, 모던 자바스크립트에서는 이 작업을 훨씬 간단하게 처리할 수 있는 메서드들을 제공합니다. 대표적으로 Set()과 filter()가 있으며, 각각의 동작 방식과 특징을 하나씩 자세히 살펴보겠습니다.Set() 메서드Set() 객체의 핵심 특징은 고유한 값(unique value)만 저장한다는 점입니다. 즉, 중복된 값을 자동으로 걸러주기 때문에 개발자가 별도의 로직을 작성할 필요가 없습니다. Set()은 반복 가능한(iterable) 값을 인수로 받아