Underscore.js는 자바스크립트 라이브러리로, 자바스크립트에서 객체를 얕은 복사(shallow copy)하기 위한 _.extend() 메서드를 제공합니다. 이 메서드는 소스(source) 객체에 있는 모든 속성을 대상(destination) 객체로 복사한 뒤, 대상 객체를 반환합니다. 이때 복사는 값의 완전한 복제(duplication)가 아니라 참조(reference)를 기반으로 이루어진다는 점이 특징입니다.기본 문법_.extend(object*);_.extend()는 하나 이상의 객체를 인자로 받아 이를 얕은 복사합니다.
JavaScript에서 falsy(거짓 같은) 값을 다루다 보면 null과 0의 비교에서 의외의 결과를 마주하게 됩니다. 두 값을 비교해 보면, 크다(>), 작다(<), 같다(==) 연산자에서는 모두 Boolean false가 반환되지만, 크거나 같다(>=) 연산자에서는 Boolean true가 반환됩니다. 여기서 자연스럽게 이런 의문이 생깁니다. 어떤 값이 0보다 크지도 않고, 0과 같지도 않은데, 어떻게 0보다 크거나 같을 수 있을까요? 예제 1: >, <, == 비교 다음 예제에서는 null과 0
JavaScript에서 숫자의 마지막 자릿수를 제거하는 방법은 크게 두 가지가 있습니다. 비트 연산자(Bitwise Operator)가 도입되기 전에는 숫자를 먼저 문자열로 변환한 뒤, 문자열 메서드를 사용해 원하는 부분을 잘라내는 방식이 일반적이었습니다. 이 과정에서 숫자를 문자열로 바꾸는 타입 변환(type conversion)이 필수적이었습니다.하지만 비트 OR(Bitwise OR) 연산자의 등장으로 이 작업이 훨씬 간단해졌습니다. 비트 OR를 활용하면 타입 변환이나 문자열 메서드 없이도 한 줄의 코드로 마지막 자릿수를 제거할
JavaScript에서 + 연산자는 단순히 더하기(덧셈)나 문자열 연결(concatenation)에만 사용되는 것이 아닙니다. 가장 중요한 용도 중 하나는 바로 타입 변환(type conversion)입니다.일반적으로 우리는 + 연산자를 숫자의 덧셈에 사용하고, 때로는 문자열을 이어 붙이는 데 사용합니다. 하지만 이 연산자는 타입 변환에서도 매우 유용하게 활용됩니다. 특히 문자열을 숫자로 변환하는 작업을 아주 간단하게 처리할 수 있습니다.예제 1: 문자열을 숫자로 변환하기<html> <body> <scri
네비게이터 객체(Navigator Object)란?자바스크립트에서 네비게이터 객체(Navigator Object)는 브라우저와 관련된 다양한 정보를 제공하는 매우 유용한 내장 객체입니다. 이 객체를 활용하면 현재 브라우저가 온라인 모드인지 오프라인 모드인지 확인하거나, 시스템에서 Java가 활성화되어 있는지 여부를 판단하는 등 브라우저 환경에 대한 정보를 손쉽게 얻을 수 있습니다.또한 네비게이터 객체는 사용자의 위치 정보 접근, 브라우저 이름 및 버전 확인, 운영체제 정보 조회 등 웹 개발에서 자주 활용되는 다양한 기능을 지원합니다
자바스크립트에서 함수는 크게 세 가지 방식으로 호출할 수 있습니다. 첫 번째는 일반 함수로서의 호출, 두 번째는 객체의 메서드로서의 호출, 그리고 세 번째는 함수 생성자(function constructor)로서의 호출입니다.이 세 가지 방식 중 함수 생성자를 이용한 호출은 나머지 둘과 확연히 구별되는 특징이 있습니다. 바로 상속(inheritance) 속성을 활용한다는 점입니다. 생성자 호출이 실행되면 새로운 객체가 생성되며, 이 새 객체는 자신을 만들어낸 생성자의 속성과 메서드를 그대로 물려받습니다. 반면 앞선 두 가지 호출 방
parseFloat() 메서드란?JavaScript는 parseFloat() 메서드를 제공하여 문자열을 부동 소수점(floating point) 숫자로 변환할 수 있습니다. 부동 소수점 숫자란 쉽게 말해 소수점 이하 자리를 가진 숫자, 즉 소수를 의미합니다. 비슷한 역할을 하는 메서드로 parseInt()가 있지만, 이 메서드는 소수점을 처리하지 못하고 오직 정수만 반환한다는 차이점이 있습니다.parseFloat()은 숫자 형태의 문자열을 실제 숫자 값으로 변환해 줍니다. 반면, 숫자가 아닌 다른 문자열이 입력으로 전달되면 NaN(
네, 자바스크립트(JavaScript)를 사용하면 HTML 콘텐츠를 충분히 변경할 수 있습니다. 일반적으로 HTML 콘텐츠는 <p>, <span>과 같은 HTML 태그 안에 담겨 있는데, 자바스크립트에는 이러한 태그에 접근할 수 있는 DOM 메서드가 제공됩니다. document.getElementById(), document.getElementsByTagName() 등의 메서드를 활용하면 원하는 태그를 찾아내고, 그 안의 내용을 자유롭게 수정할 수 있습니다.특히 요소의 내용을 바꿀 때 가장 많이 사용되는 것이
JavaScript는 addEventListener() 메서드를 통해 지정된 요소에 이벤트 핸들러(event handler)를 연결할 수 있습니다. 이 메서드의 가장 큰 장점은 기존에 등록된 이벤트 핸들러를 덮어쓰지 않고 새로운 핸들러를 추가할 수 있다는 점입니다.또한 하나의 요소에 여러 개의 이벤트 핸들러를 동시에 등록할 수 있으며, 버블링(bubbling) 단계에서 이벤트가 어떻게 반응할지 세밀하게 제어할 수 있습니다. mouseover, click 등 다양한 종류의 이벤트를 자유롭게 적용할 수 있습니다.addEventListe
자바스크립트는 removeEventListener() 메서드를 사용하여 이벤트 핸들러를 제거할 수 있습니다. 이벤트는 일반적으로 addEventListener() 메서드를 통해 등록되며, removeEventListener() 메서드는 바로 이 addEventListener()로 연결된 이벤트 핸들러를 제거하는 역할을 합니다.두 메서드를 함께 활용하면 필요할 때 이벤트 리스너를 동적으로 추가하고, 더 이상 필요하지 않을 때 제거함으로써 불필요한 이벤트 처리와 메모리 누수를 방지할 수 있습니다.예제 코드<html><b
Math.hypot() 함수란?Math.hypot() 메서드는 인수로 전달된 값들을 각각 제곱한 뒤, 그 합의 제곱근을 반환하는 자바스크립트 내장 함수입니다. 수학적으로 표현하면 √(a² + b²) 형태로, 직각삼각형의 두 변의 길이를 인수로 전달하면 빗변(hypotenuse)의 길이를 손쉽게 구할 수 있습니다. 이름의 hypot도 바로 hypotenuse(빗변)에서 유래한 것입니다.문법(Syntax)Math.hypot(arg1, arg2, ...);예제 1: 직각삼각형의 빗변 구하기다음 예제에서는 직각삼각형의 두 변을 인수로 전달
_.size() 메서드란 무엇인가?_.size()는 JavaScript의 underscore.js 라이브러리에서 제공하는 유틸리티 함수입니다. 이 메서드는 배열의 크기(요소 개수)를 손쉽게 확인할 때 사용됩니다.주의할 점은, 이 메서드를 사용하기 전에 반드시 underscore.js의 CDN을 HTML 문서에 포함시켜야 한다는 것입니다. CDN이 로드되지 않으면 코드 실행 시 오류가 발생합니다.문법(Syntax)_.size(array);매개변수로 전달된 배열의 요소 개수를 숫자로 반환합니다.예제 1: 일반 배열의 크기 구하기다음 예
_.initial() 함수란?_.initial()은 자바스크립트 라이브러리인 Underscore.js에서 제공하는 함수입니다. 이 메서드는 배열의 마지막 요소를 나머지 요소들과 구분하는 역할을 하며, 쉽게 말해 배열의 마지막 값을 제외한 모든 요소를 반환합니다.기본 문법_.initial( array, n );_.initial() 함수는 최대 2개의 매개변수를 받을 수 있습니다.매개변수 설명array — 대상 배열입니다. 이 메서드는 전달된 배열에서 마지막 요소를 제외한 나머지 모든 요소를 반환합니다.n — 배열의 오른쪽에서부터 잘라
JavaScript 개발을 하다 보면 배열의 첫 번째 요소(0번 인덱스)를 제거한 나머지 값들만 필요한 경우가 자주 있습니다. 이럴 때 유용하게 사용할 수 있는 것이 underscore.js 라이브러리에서 제공하는 _.rest() 메서드입니다._.rest() 메서드란?_.rest()는 배열에서 0번째 인덱스에 해당하는 첫 번째 요소를 제외한 나머지 요소들을 반환하는 함수입니다. 이 메서드는 두 개의 매개변수를 받습니다.array: 처리 대상이 되는 원본 배열index: (선택 사항) 제거를 시작할 인덱스 위치. 이 값을 지정하면 해
배열이 두 개뿐이라면 filter나 includes 같은 기본적인 논리 연산만으로도 공통 요소를 비교적 쉽게 찾을 수 있습니다. 그러나 배열이 세 개, 네 개로 늘어나면 코드가 길어지고 복잡해져 관리하기 어려워집니다. 이럴 때 유용하게 사용할 수 있는 것이 자바스크립트 라이브러리인 underscore.js에서 제공하는 _.intersection() 메서드입니다. _.intersection()은 전달받은 모든 배열의 요소를 하나씩 검사하여 공통 값만 골라 결과로 반환합니다. 단, 배열 그룹 중 어느 하나라도 공통 값이 하나도 없다면
_.union() 메서드란?_.union() 메서드는 자바스크립트 유틸리티 라이브러리인 Underscore.js에서 제공하는 함수입니다. 이 함수는 여러 개의 배열을 인자로 받아, 모든 배열에 담긴 값을 하나로 합친 뒤 중복을 제거한 새로운 배열(합집합)을 반환합니다. 각 배열의 모든 값을 하나하나 검사하여 고유한 값만 골라 새 배열에 담아주기 때문에, 데이터 정리나 병합 작업에서 매우 유용하게 활용됩니다.문법(Syntax)_.union( array1, array2, .... );인자로 전달되는 배열의 개수에는 제한이 없으며, 최소
JavaScript focus() 메서드란?JavaScript의 focus() 메서드는 HTML 폼 요소를 강조하고 활성화하는 데 사용됩니다. 이 메서드를 호출하면 해당 요소가 현재 문서의 활성(active) 요소로 설정되어, 사용자가 별도의 클릭 없이도 입력이나 상호작용을 바로 시작할 수 있습니다.주목할 점은 focus()는 한 번에 오직 하나의 요소에만 적용된다는 것입니다. 새로운 요소에 포커스가 설정되면 기존에 포커스를 가지고 있던 요소는 자동으로 포커스를 잃게 됩니다. 텍스트 입력창뿐만 아니라 버튼, 링크 등 다양한 요소에
JavaScript에서 length 속성은 배열(Array)과 문자열(String)에만 적용됩니다. 따라서 일반 객체(Object)에 length 속성을 호출하면 undefined가 반환됩니다.객체에 length 속성을 사용한 예제<html> <body> <script> var object = {prop:1, prop:2}; document.write(object.length); </script> </body> </html>출력 결과undefined반면,
JavaScript에서 객체의 속성(property)을 정의하는 방법은 크게 두 가지가 있습니다. 하나는 점 표기법(Dot notation)과 대괄호 표기법(Bracket notation)을 사용하는 방식이고, 다른 하나는 Object.defineProperty() 메서드를 활용하는 방식입니다.Object.defineProperty()는 일반적으로 세 가지 매개변수를 받습니다. 바로 객체 이름, 속성 이름, 그리고 속성 설명자(property descriptor)입니다.문법Object.defineProperty(객체이름, 속성이름,
배열 복제(Clone)란 하나의 배열을 다른 배열에 복사하는 것을 의미합니다. 예전에는 slice() 메서드를 사용해 배열을 복제했지만, ES6(ES2015)에서는 스프레드 연산자(...)가 도입되어 훨씬 간결하고 직관적으로 배열을 복제할 수 있게 되었습니다. 이 글에서는 두 가지 방법을 모두 살펴보고 각각의 특징을 비교해 보겠습니다. slice() 메서드를 사용한 배열 복제 slice() 메서드는 원래 배열의 특정 인덱스 범위를 잘라내어 새로운 배열을 반환하는 함수입니다. 인덱스를 지정하지 않고 호출하면 배열 전체가 잘려나가며,