전통적으로 JavaScript의 객체(object)는 각자 고유한 메서드(method)와 프로퍼티(property)를 가지고 있습니다. 하지만 apply() 함수를 활용하면 여러 객체를 결합하여, 주어진 모든 객체에 접근할 수 있는 하나의 공용 메서드를 만들 수 있습니다.apply() 함수는 사실 call() 함수와 거의 동일하게 작동합니다. 두 함수 모두 첫 번째 인수로 this에 바인딩할 객체를 받습니다. 차이점은 인수를 전달하는 방식에 있는데, 배열(array) 형태의 변수를 전달해야 하는 상황이라면 apply() 함수가 유용
bind() 함수란 무엇인가?자바스크립트에서 apply() 함수가 실행 결과로 값(value)을 반환하는 것과 달리, bind() 함수는 코드를 실행할 수 있는 새로운 함수 자체를 반환합니다.즉, 두 함수 모두 this 값을 바인딩하는 역할은 같지만, 즉시 실행되느냐 나중에 실행할 수 있는 함수를 돌려주느냐가 핵심적인 차이입니다.예제 1: bind()와 apply()의 출력 결과 비교아래 코드에서 apply()는 곧바로 값을 출력하는 반면, bind()는 함수를 출력하는 것을 확인할 수 있습니다.<html> <bod
CSS 스타일을 활용하면 자바스크립트(JavaScript)만으로도 HTML 요소를 손쉽게 숨기거나 다시 표시할 수 있습니다. 핵심은 CSS의 display 속성입니다. 값을 none으로 설정하면 요소가 화면에서 사라지고, block으로 설정하면 다시 나타납니다. 1. HTML 요소 숨기기 요소를 숨기려면 해당 요소를 선택한 뒤 style.display 값을 none으로 지정하면 됩니다. 예제 코드 아래 예제에서는 Hideme 버튼을 클릭하는 순간, <p> 태그에 들어 있던 텍스트가 화면에서 사라집니다. <htm
JavaScript에서 undefined의 불리언 값은 false입니다. 흥미로운 점은 undefined뿐만 아니라 null, false, NaN, 빈 문자열() 역시 모두 false로 평가된다는 것입니다. 이처럼 false로 변환되는 값들을 falsy 값이라고 부르며, 조건문이나 논리 연산에서 중요한 역할을 합니다.예제다음 예제에서는 undefined, false, NaN, 빈 문자열의 불리언 값을 화면에 출력합니다.코드의 처음 세 줄을 살펴보면 배열 안에 hole(구멍)이 생성됩니다. 배열 arr은 인덱스 0~3까지만 값을 가지
JavaScript의 toString() 메서드는 배열을 문자열로 변환하는 용도뿐만 아니라, 숫자를 다른 진법 형태로 변환할 때도 활용됩니다. 이 메서드는 2진법(base 2)부터 36진법(base 36)까지의 숫자 표현을 지원합니다.메서드에 인자로 원하는 진법 값을 전달하면, 해당 진법으로 변환된 문자열이 반환됩니다. 인자를 생략하면 기본값인 10진수가 적용됩니다.구체적인 예제를 통해 살펴보겠습니다.예제 1다음 예제에서는 숫자 26을 2진수, 8진수, 10진수, 16진수 등 다양한 진법 형태로 변환하여 출력합니다.<html&
JavaScript에서는 숫자(number)를 객체(object)로 변환하지 않는 것이 좋습니다. 그 이유는 숫자는 객체와 비교할 수 없고, 심지어 객체끼리도 서로 비교할 수 없기 때문입니다. 예제 1: 원시 숫자 값 비교 다음 예제에서는 숫자 500을 변수 x와 변수 y에 각각 할당합니다. 두 변수를 서로 비교하면 출력 결과에서 볼 수 있듯이 Boolean 값 true가 표시됩니다. <html> <body> <script> var x =
JavaScript Atomics.store() 메서드란?Atomics.store()는 JavaScript에 내장된 메서드로, 배열의 특정 위치에 지정한 값을 저장하는 데 사용됩니다. 이 메서드는 정수형 타입 배열(Integer Typed Array), 인덱스, 저장할 값 총 세 개의 인수를 받으며, 저장이 완료되면 해당 값을 반환합니다.Atomics 객체는 여러 스레드가 동시에 같은 메모리에 접근할 때 발생할 수 있는 경쟁 상태(race condition)를 방지하기 위해 원자적(atomic) 연산을 제공합니다. 따라서 멀티스레드
JavaScript에서 객체(object)의 속성(property)에 접근하는 방법은 크게 두 가지가 있습니다. 하나는 점 표기법(dot notation)이고, 다른 하나는 대괄호 표기법(bracket notation)입니다.방법 1: 점 표기법 (Dot Notation)Object.property;방법 2: 대괄호 표기법 (Bracket Notation)Object[property];두 방식의 차이를 더 잘 이해하기 위해 아래 예제를 살펴보겠습니다.예제 1: 점 표기법으로 속성에 접근하기다음 예제에서는 person이라는 객체를 정
자바스크립트(JavaScript)에서 배열은 엄밀히 말해 진짜 배열이 아닙니다. 사실 배열은 자바스크립트의 객체(object)에 해당합니다. 따라서 typeof() 연산자로 데이터 타입을 확인하면 배열이라 하더라도 항상 object가 출력됩니다. typeof() 연산자의 문법 typeof(operand); 매개변수 — typeof() 연산자는 하나의 피연산자(operand)를 받아 해당 값의 데이터 타입을 문자열로 반환합니다. 아래 예제에서 변수 a는 분명 배열이지만, typeof() 연산자는 object를 반환합니다. 모든 배열이
Array.isArray() 메서드는 범용적(universal)이기 때문에 어떤 환경에서도 정상적으로 동작합니다. 반면 instanceof 연산자는 범용적이지 않아, iframe처럼 새로운 실행 환경이 만들어진 경우에는 올바른 결과를 반환하지 못합니다.구문 1Array.isArray(array);구문 2array instanceof Array;다음 예제에서는 새로운 환경을 따로 만들지 않았기 때문에 Array.isArray()와 instanceof 모두 동일한 결과를 출력합니다.예제<html> <body> &l
JavaScript에서 중첩된 JSON 객체 접근하기중첩된 JSON 객체에 접근하는 방법은 중첩된 배열에 접근하는 방식과 매우 유사합니다. 여기서 말하는 중첩 객체(nested object)란 또 다른 객체 내부에 포함되어 있는 객체를 의미합니다.아래 예제에서는 person이라는 메인 객체 내부에 vehicles라는 객체가 들어 있습니다. 점 표기법(dot notation)을 사용하면 중첩 객체의 속성(car)에 간단하게 접근할 수 있습니다.예제 1<html> <body> <script>
JavaScript에서 중첩(nested) 객체의 속성을 수정하는 방법은 크게 두 가지가 있습니다. 하나는 점 표기법(Dot Notation)이고, 다른 하나는 대괄호 표기법(Bracket Notation)입니다. 두 방식의 기능은 완전히 동일하며, 차이는 오직 표기 방식뿐입니다.아래에서 각각의 방법을 예제와 함께 자세히 살펴보겠습니다.점 표기법(Dot Notation)점(.)을 이용해 객체의 경로를 순서대로 연결하여 원하는 깊이의 속성에 접근하고 값을 변경할 수 있습니다. 코드가 간결하고 가독성이 좋아 가장 널리 사용되는 방식입니
JavaScript에서 객체의 속성(property)을 삭제하려면 delete 연산자를 사용해야 합니다. delete 연산자는 점 표기법(dot notation)과 대괄호 표기법(bracket notation) 두 가지 방식 모두에서 사용할 수 있습니다.문법(Syntax)delete object.property;예제(Example)다음 예제에서는 처음에 country 속성에 접근하면 그 값인 England가 출력됩니다. 그러나 delete 키워드를 사용해 해당 속성을 삭제한 후에는 England 대신 undefined가 출력되는 것
JavaScript에서 문자열을 날짜 객체로 변환하려면 Date() 메서드를 사용해야 합니다. 이 메서드는 플랫폼에 독립적인 형식으로 특정 시점을 나타내는 날짜 인스턴스를 생성합니다.예제다음 예제에서는 str이라는 이름의 문자열을 먼저 JSON.parse() 메서드로 파싱한 후, Date() 메서드를 사용하여 날짜 객체로 변환하는 과정을 보여줍니다.<html> <body> <script> var str = '{"name":"Ram",
Object.freeze()와 const의 차이점은, 전자는 객체의 변경 가능성(mutability)을 방지하지만 후자는 그렇지 못하다는 데 있습니다. 두 개념을 하나씩 자세히 살펴보겠습니다. const란 무엇인가? const는 let과 거의 같은 방식으로 동작합니다. const로 선언된 변수는 한 번 정의되면 다시 재할당(reassignment)할 수 없습니다. 또한 const로 선언한 변수는 var처럼 함수 스코프(function scope)가 아니라 블록 스코프(block scope)를 따릅니다. 그러나 const 키워드의 가
Object.freeze() 메서드는 객체를 불변(immutable) 상태로 만들 수 있지만, 중첩된 객체(nested object)가 포함된 경우에는 내부 객체의 변경까지 막아주지 못합니다. Object.freeze()는 최상위 부모 객체에만 불변성을 제공할 뿐, 내부에 존재하는 자식(중첩) 객체에는 접근하지 않습니다. 1. 중첩 객체가 없는 경우 다음 예제에는 중첩된 객체가 없습니다. Object.freeze() 메서드가 객체 전체를 동결하려고 시도하기 때문에, 동결 이후에도 name 속성은 변경되지 않습니다. <html&
단어가 아닌 문자(Non-word Characters)란?문자열을 처리하다 보면 알파벳, 숫자 등 의미 있는 텍스트 외에 특수 기호나 불필요한 문자들이 섞여 있는 경우가 많습니다. 이럴 때 정규 표현식(Regular Expression)을 활용하면 손쉽게 원하는 문자만 남길 수 있습니다.핵심 원리는 매우 간단합니다. 정규 표현식 패턴으로 단어가 아닌 문자(non-word characters)를 찾아낸 뒤, 해당 문자들을 빈 문자열()로 교체(replace)하면 됩니다.예제 코드다음 예제에는 다양한 특수 문자가 섞여 있으며, 그 사이
디코딩(Decoding)자바스크립트에서 인코딩된 문자열을 디코딩할 때는 unescape() 메서드를 사용합니다. 이 메서드는 escape() 메서드로 인코딩된 문자열을 입력받아 원래 상태로 되돌려 줍니다. 즉, 문자열에 포함된 16진수 문자들이 unescape() 메서드를 통해 각각이 나타내는 실제 문자로 치환됩니다.문법unescape(string)예제다음 예제에서는 두 개의 느낌표(!!)가 먼저 escape() 메서드를 사용해 16진수 문자로 변환되었습니다. 그 후 unescape() 메서드를 사용하여 다시 원래의 자연스러운 문자
JavaScript에서 URL 구문 분석하기JavaScript에서 URL을 구문 분석할 때는 정규 표현식보다 DOM 메서드를 활용하는 것이 훨씬 간단하고 효율적입니다. 정규 표현식을 사용하면 코드가 복잡해지고 유지보수가 어려워지지만, DOM 메서드를 이용하면 단 한 번의 함수 호출만으로 파싱된 URL의 각 구성 요소를 손쉽게 얻을 수 있습니다.아래 예제에서는 먼저 함수를 하나 정의하고, 그 안에서 DOM 메서드를 사용해 앵커 태그(<a>)를 생성합니다. 이후 매개변수로 전달받은 URL을 앵커 태그의 href 속성에 할당하
JavaScript에서 두 문자열을 하나로 합치려면 + 연산자를 사용합니다. 일반적으로 문자열 사이에 공백을 넣으려면 공백을 명시적으로 추가해야 하지만, 첫 번째 문자열 자체에 이미 공백이 포함되어 있다면 굳이 공백을 따로 지정할 필요가 없습니다.1. 첫 번째 문자열에 공백이 이미 있는 경우아래 예제에서는 str1에 이미 공백이 포함되어 있기 때문에, 공백 없이 단순히 연결(concatenation)만으로도 두 문자열을 자연스럽게 합칠 수 있습니다.예제 코드<html> <body> &nbs