JavaScript는 navigator라는 객체를 제공하며, 이를 통해 브라우저에 대한 다양한 정보를 얻을 수 있습니다. navigator 객체에는 브라우저의 제품 이름과 코드 이름을 확인할 수 있는 navigator.product와 navigator.appCodeName 속성이 포함되어 있습니다. 지금부터 두 속성을 하나씩 자세히 살펴보겠습니다.제품 이름(Product Name)product 속성은 브라우저의 제품 이름을 반환합니다. 대부분의 브라우저에서 이 값은 호환성 유지를 위해 Gecko로 고정되어 있습니다. 실제 렌더링 엔
자바스크립트는 location 객체를 통해 현재 웹 페이지와 관련된 다양한 정보를 손쉽게 얻을 수 있도록 지원합니다. 특히 이 객체가 제공하는 window.location.protocol과 window.location.pathname 속성을 사용하면 현재 페이지의 프로토콜(protocol)과 경로(pathname)를 각각 확인할 수 있습니다. 지금부터 두 속성의 사용 방법을 예제와 함께 자세히 살펴보겠습니다. 1. 페이지 경로(Pathname) 가져오기 모든 웹 사이트에는 도메인 뒤에 붙는 고유한 경로(pathname)가 존재합니다
객체에서 키와 값을 가져오는 다양한 방법이 있지만, 대부분의 메서드는 결과를 배열 형태로 반환하지 않습니다. 그러나 실무에서는 값을 배열로 다루어야 하는 경우가 매우 많습니다. JavaScript는 이러한 요구를 해결하기 위해 Object.values() 메서드를 제공하며, 이 메서드는 객체의 열거 가능한(enumerable) 속성 값들을 요소로 가지는 배열을 반환합니다.문법Object.values(obj);이 메서드는 인자로 객체를 전달받고, 해당 객체의 속성 값들로 구성된 배열을 반환합니다.예제 1다음 예제에서는 객체를 Obje
JavaScript Map이란?Map은 각 요소가 키(Key)-값(Value) 쌍으로 저장되는 자료 구조입니다. 객체뿐만 아니라 원시 타입(primitive) 값도 키나 값으로 사용할 수 있으며, Map 객체를 순회(iterate)하면 요소가 삽입된 순서 그대로 키-값 쌍을 반환합니다.Map에 저장된 모든 데이터를 삭제해야 할 때는 map.clear() 메서드를 사용합니다. 이 메서드는 Map 내부의 모든 키-값 쌍을 제거하여 Map을 완전히 비운 상태로 만듭니다.map.clear() 구문map.clear();clear() 메서드는
JavaScript의 window 객체는 브라우저와 관련된 다양한 정보를 얻을 수 있는 여러 메서드를 제공합니다. 그중에서도 screen.colorDepth와 screen.pixelDepth 속성을 사용하면 각각 브라우저 화면의 색상 깊이(color depth)와 픽셀 깊이(pixel depth)를 확인할 수 있습니다. 지금부터 두 속성을 하나씩 자세히 살펴보겠습니다.색상 깊이(Color Depth)window 객체는 screen.colorDepth 속성을 통해 화면의 색상 깊이를 반환합니다. 색상 깊이란 하나의 색상을 표현하는 데
JavaScript의 window 객체는 브라우저 창을 그대로 나타내는 객체입니다. 이 방식은 모든 주요 브라우저에서 지원되며, 별도의 라이브러리 없이 바로 사용할 수 있습니다.브라우저 창의 내부 높이(inner height)와 내부 너비(inner width)를 구하려면 window 객체가 제공하는 다음 두 가지 속성을 활용하면 됩니다.window.innerWidth — 브라우저 창의 내부 너비window.innerHeight — 브라우저 창의 내부 높이두 속성 모두 결과를 픽셀(px) 단위의 숫자로 반환합니다. 여기서 내부란 스
날짜를 구문 분석(parse)하면 밀리초 단위의 시간 값을 얻을 수 있습니다. JavaScript에서는 Date.parse() 메서드가 날짜 구문 분석을 담당합니다. 이 메서드는 지정된 날짜와 1970년 1월 1일 사이의 밀리초 수를 반환하도록 설계되었습니다. 즉, 1970년 1월 1일부터 주어진 날짜까지 경과한 시간을 밀리초 단위로 손쉽게 계산할 수 있습니다.Date.parse() 메서드란?Date.parse()는 날짜 문자열을 인수로 받아, 해당 날짜가 1970년 1월 1일 00:00:00 UTC로부터 몇 밀리초가 경과했는지를
JavaScript에서는 날짜(Date 객체)를 아주 간단하게 비교할 수 있습니다. 비교 대상이 과거, 현재, 미래 중 어느 시점의 날짜든 상관없으며, 과거 날짜를 미래 날짜와 비교하거나 미래 날짜를 현재 날짜와 비교하는 것도 모두 가능합니다. 날짜 비교의 기본 원리 JavaScript의 Date 객체는 내부적으로 1970년 1월 1일(UTC) 자정부터 경과한 밀리초 단위의 숫자 값으로 저장됩니다. 따라서 두 Date 객체를 >, <, >=, <= 같은 비교 연산자로 바로 비교하면 이 밀리초 값을 기준으로 크고
JavaScript는 숫자를 다룰 때 몇 가지 제약이 있습니다. 모든 숫자는 표준화된 컴퓨터 네트워크 형식(IEEE 754 배정밀도 부동소수점)을 따라야 하며, 이 규칙을 벗어나는 정수는 안전한 정수(safe integer)로 취급될 수 없습니다.안전한 정수란 -(2^53 - 1)부터 (2^53 - 1)까지의 모든 정수, 즉 ±9007199254740991(±9,007,199,254,740,991) 범위 내의 값을 의미합니다. 이 범위를 벗어나면 정밀도 손실로 인해 연산 결과가 부정확해질 수 있기 때문입니다.주어진 숫자가 안전한 정
JavaScript는 사용자의 화면(모니터)에 대한 정보를 담고 있는 window.screen 객체를 기본적으로 제공합니다. 이 객체에는 화면의 높이와 너비뿐만 아니라 색상 깊이(color depth), 픽셀 밀도(pixel depth) 등 다양한 정보가 포함되어 있습니다.화면의 높이와 너비를 확인하려면 JavaScript에서 제공하는 screen.height와 screen.width 속성을 각각 사용하면 됩니다.화면 높이 구하기 – 문법(Syntax)screen.height;화면 너비 구하기 – 문법(Syntax)screen.wi
자바스크립트에서 객체 내부에 포함된 배열을 반복 처리하는 방법은 일반 객체를 순회할 때와 동일한 원리를 사용합니다. 이때 활용되는 것이 바로 for...in 반복문입니다.for...in 반복문이란?for...in 반복문은 객체의 열거 가능한 속성(키)을 하나씩 순서대로 가져오는 구문입니다. 배열 역시 자바스크립트에서 일종의 객체이기 때문에, 객체 안에 중첩된 배열도 같은 방식으로 접근하고 순회할 수 있습니다.예제 코드다음 예제에서는 obj라는 객체가 정의되어 있으며, 이 객체 내부에는 companies라는 배열이 존재합니다. for
JSON 객체 안에 포함된 배열을 수정하는 방식은 일반 객체의 속성을 수정하는 것과 동일합니다. 즉, 점 표기법(dot notation)이나 대괄호 표기법으로 해당 배열에 접근한 뒤, 원하는 인덱스에 새로운 값을 할당하면 됩니다.예제아래 예제에서는 companies 배열의 첫 번째 요소가 처음에는 Tesla입니다. 하지만 첫 번째 요소를 SolarCity로 수정한 후, 변경 전과 변경 후의 결과를 화면에 출력하여 비교합니다.<html> <body> <script> var res1 = "
JavaScript에서 문자열을 이어 붙일 때는 일반적으로 string.concat() 메서드를 사용합니다. 하지만 concat()은 결과 문자열의 최종 길이나 추가될 값을 세밀하게 제어할 수 없다는 단점이 있습니다. 이러한 문제를 해결하기 위해 JavaScript는 string.padEnd() 메서드를 제공합니다.padEnd() 메서드는 두 개의 매개변수를 받습니다. 하나는 결과 문자열의 목표 길이이고, 다른 하나는 첫 번째 문자열 끝에 덧붙일 두 번째 문자열입니다.문법string.padEnd(length, string);leng
JavaScript에서 두 문자열을 연결할 때는 concat() 메서드를 사용할 수 있습니다. 하지만 첫 번째 문자열의 앞부분에 특정 문자열을 붙여야 한다면 padStart() 메서드가 가장 간편한 방법입니다. 이 메서드는 단순히 문자열을 앞에 추가하는 것뿐만 아니라, 결과 문자열의 전체 길이까지 정확하게 관리해 줍니다. padStart() 메서드는 두 개의 매개변수를 받습니다. 하나는 결과 문자열의 최종 길이를 지정하는 length(길이)이고, 다른 하나는 앞에 붙일 문자열입니다. 메서드는 지정된 길이에 맞춰 두 번째 문자열을 첫
NaN(Not a Number)은 자기 자신과도 같지 않은 유일한 값입니다. 다른 모든 값들은 자기 자신과 비교하면 항상 같다고 판단되지만, NaN만은 예외적으로 자기 자신과의 비교에서도 같지 않다는 결과가 나옵니다.예제 1: 일반적인 동등 연산자(==)로 비교하기<html> <body> <script> var val = 54/the; document.write(val); &nb
변수 교환(Swapping)은 구조 분해 할당(Destructuring) 덕분에 매우 간단해졌습니다. 전통적인 JavaScript에서는 두 변수의 값을 바꾸기 위해 반드시 세 번째(임시) 변수를 사용해야 했습니다. 물론 어렵지는 않지만 코드가 길어지고 번거로운 작업이었습니다. 반면 최신 JavaScript에서는 임시 변수 없이도 한 줄의 코드로 값을 교환할 수 있습니다. 지금부터 자세히 알아보겠습니다. 예제 1 – 임시 변수를 사용하는 전통적인 방식 아래 예제에서는 "tmp"라는 임시 변수를 이용해 두 변수의 값을
_.shuffle() 함수란?_.shuffle()은 자바스크립트 유틸리티 라이브러리인 Underscore.js(그리고 이를 계승한 Lodash)에서 제공하는 함수로, 배열의 요소들을 무작위(random) 순서로 섞어주는 기능을 합니다. 내부적으로는 검증된 Fisher-Yates 셔플 알고리즘을 사용하기 때문에 모든 순서 조합이 동일한 확률로 나타나는 공정한 셔플이 보장됩니다.문법_.shuffle(array);이 메서드는 배열을 인자로 받아 요소들의 순서를 무작위로 뒤섞습니다. 동일한 입력값이라도 실행할 때마다 서로 다른 랜덤 결과가
자바스크립트(JavaScript)에는 개발 생산성을 높여 주는 다양한 유틸리티 라이브러리가 존재하며, 그중 underscore.js는 배열과 객체를 손쉽게 다룰 수 있게 해주는 대표적인 라이브러리입니다. underscore.js가 제공하는 여러 함수 중 _.where()는 배열 안에서 특정 조건과 일치하는 요소만 골라내는 데 사용됩니다.이 메서드는 배열의 모든 요소를 하나씩 검사하면서, 전달된 조건을 통과하는 요소만 결과로 반환합니다. 예를 들어 주어진 배열에서 급여가 15000인 사람은 몇 명인가라는 조건을 전달하면, _.wher
JavaScript에서 배열의 처음 n개 요소를 가져오는 방법은 여러 가지가 있지만, underscore.js 라이브러리에서 제공하는 _.first() 함수를 사용하면 아주 간단하게 처리할 수 있습니다. 이 함수는 배열을 다룰 때 널리 사용되는 대표적인 유틸리티 메서드입니다.문법_.first(array, n);이 함수는 배열과 숫자 두 개의 매개변수를 받습니다. 두 번째 매개변수로 전달한 숫자만큼 배열의 앞쪽 요소들이 결과로 반환됩니다.예제 1다음 예제에서는 배열만 인수로 전달했습니다. 반환할 개수를 지정하지 않으면 기본적으로 첫
객체 반전(inverting)은 underscore.js라는 자바스크립트 프레임워크가 등장하기 전까지는 상당히 까다로운 작업 중 하나였습니다. underscore.js는 다양한 유틸리티 함수를 제공하며, 그중 하나가 바로 _.invert()입니다. 이 메서드는 객체의 키(key)/값(value) 쌍을 서로 뒤바꾸는 역할을 합니다. 예를 들어 어떤 객체에 name/Kiran이라는 키/값 쌍이 있다면, _.invert() 메서드를 적용한 후에는 Kiran/name처럼 값과 키의 위치가 서로 바뀌게 됩니다. 지금부터 예제를 통해 자세히