JavaScript는 문자열을 인코딩하기 위해 escape() 함수를 제공해 왔습니다. 하지만 escape() 함수는 현재 폐기(deprecated)된 상태이므로, 실제 개발에서는 encodeURI() 또는 encodeURIComponent()를 사용하는 것이 좋습니다.문법escape(string);encodeURIComponent(str);예제 1: escape() 함수 사용다음 예제에서는 escape() 메서드를 사용하여 문자열 Tutorix is the best e-learning platform!!!을 인코딩하고, 그 결과를
문자열 인코딩과 디코딩의 기본JavaScript에서 문자열을 인코딩하려면 encodeURIComponent() 또는 encodeURI()를 사용하고, 디코딩하려면 decodeURIComponent() 또는 decodeURI()를 사용합니다. 과거에는 escape() 함수로 문자열을 인코딩했지만, 이 함수는 이미 폐기(deprecated)된 상태이므로 현재는 encodeURI()를 사용하는 것이 표준입니다.두 함수의 차이도 알아두면 좋습니다. encodeURI()는 URL 전체를 인코딩할 때 사용하며, :, /, ?, #처럼 URL
JavaScript에서 getter를 활용하면 객체의 속성을 마치 일반 속성처럼 자연스럽게 접근할 수 있습니다. 이러한 동작을 가능하게 해주는 키워드가 바로 get입니다. getter는 내부적으로 계산 로직을 숨기면서도 속성 접근 문법을 그대로 유지할 수 있어 코드의 가독성과 캡슐화를 높여줍니다. 지금부터 간단한 예제를 통해 그 동작 방식을 살펴보겠습니다.예제 1: 괄호를 사용해 호출한 경우아래 예제에서는 details 속성을 함수처럼 details() 형태로 호출하고 있습니다. 하지만 details는 getter로 정의된 속성이므
JavaScript 객체에 메서드 추가하기JavaScript 객체에 메서드를 추가하는 것은 객체 생성자(object constructor)에 메서드를 추가하는 것보다 훨씬 간단합니다. 기존 객체의 속성에 함수를 할당하기만 하면 되기 때문입니다.이미 생성된 객체에 새로운 속성을 정의하듯이, 그 속성 값으로 함수를 지정하면 해당 함수가 곧바로 객체의 메서드로 동작합니다.예제아래 예제에서는 먼저 객체 타입을 생성한 뒤, 각 객체의 속성들을 정의합니다. 속성 생성이 완료되면 각 객체에 개별적으로 메서드를 할당하고, 이 메서드를 통해 속성
객체 생성자(object constructor)에 속성(property)을 추가하는 방식은 일반 객체에 속성을 추가하는 것과 다릅니다. 일반 객체는 코드 어디에서든 자유롭게 속성을 추가할 수 있지만, 객체 생성자의 경우 반드시 생성자 함수 내부에 속성을 정의해야 합니다.예제 1: 생성자 외부에 속성 추가 시 발생하는 문제다음 예제는 일반 객체처럼 생성자 외부에 속성을 추가한 경우입니다. 여기서는 객체 생성자를 사용했기 때문에, 속성이 생성자 내부에 정의되지 않으면 아래 출력 결과와 같이 undefined가 반환됩니다.<html
JavaScript에서 객체 생성자(object constructor)에 메서드를 추가하는 방식은 일반 객체에 메서드를 추가하는 것과 다릅니다. 일반 객체는 생성 후에도 자유롭게 메서드를 추가할 수 있지만, 객체 생성자의 경우 그렇게 할 수 없습니다.객체 생성자에 메서드를 만들려면 반드시 생성자 함수 내부에 정의해야 합니다. 이는 생성자 함수로부터 new 키워드로 인스턴스를 생성할 때, 내부에 정의된 메서드만이 각 인스턴스에 제대로 포함되기 때문입니다.예제다음 예제에서는 Business라는 객체 생성자 함수 내부에 name() 메서
JavaScript 객체 구조 분해 할당(Object Destructuring)이란?객체의 프로퍼티에 접근할 때 일반적으로는 객체명.프로퍼티명 형태로 접근합니다. 하지만 구조 분해 할당(Destructuring)을 사용하면 이러한 규칙적인 방식 대신, 객체에서 필요한 값을 꺼내 훨씬 간결하고 직관적으로 다룰 수 있습니다. 이번 글에서는 JavaScript 객체 Destructuring의 개념과 사용 방법을 예제와 함께 자세히 알아보겠습니다.예제 1 - 일반적인 방식으로 객체 프로퍼티 접근하기아래 예제에서는 person이라는 객체를
클래스(class)란 무엇인가?클래스(class)는 일종의 함수이지만, function 키워드 대신 class 키워드를 사용하여 선언합니다. 그리고 객체의 속성(property)은 constructor() 메서드 내부에서 할당합니다. constructor() 메서드는 클래스 객체가 초기화될 때마다 자동으로 호출됩니다.쉽게 말해 클래스는 객체를 생성하기 위한 설계도(템플릿)라고 할 수 있습니다. new 키워드를 사용해 인스턴스를 만들면 생성자가 실행되며, 각 객체에 고유한 속성 값이 부여됩니다.핵심 포인트class 키워드로 클래스를
constructor() 메서드는 자바스크립트 클래스에서 특별한 역할을 담당합니다. 클래스의 속성(property)을 초기화하는 공간이며, 클래스가 인스턴스화되는 순간 자동으로 호출됩니다. 흥미로운 점은 constructor() 메서드를 직접 작성하지 않아도, 자바스크립트 엔진이 보이지 않는 빈 생성자를 자동으로 추가해 준다는 것입니다.사용자 정의 메서드 만들기클래스 안에는 생성자 외에도 개발자가 원하는 메서드를 자유롭게 추가할 수 있습니다. 사용자 정의 메서드를 만드는 문법은 생성자와 마찬가지로 클래스 본문 내부에 함수 이름과 매
정적(Static) 메서드란 무엇인가?JavaScript에서 static 키워드로 선언된 정적 메서드는 클래스 자체에 속하는 메서드입니다. 따라서 정적 메서드는 클래스를 통해서만 호출할 수 있으며, 해당 클래스로 생성한 객체(인스턴스)를 통해서는 호출할 수 없습니다.이러한 특성 때문에 정적 메서드는 인스턴스의 상태(this)에 의존하지 않는 유틸리티 함수나 팩토리 함수를 만들 때 주로 활용됩니다.예제 1 — 클래스로 정적 메서드 호출하기 (성공)다음 예제에서는 Company 클래스 내부에 static comp() 메서드를 정의하고,
자바스크립트에서 static 메서드 내부에 객체를 직접 사용하려고 하면 기대한 결과를 얻을 수 없습니다. 하지만 객체를 매개변수(parameter)로 전달하면 정상적으로 접근할 수 있습니다. 지금부터 그 이유와 해결 방법을 간단히 살펴보겠습니다.static 메서드의 특징static 키워드로 선언된 메서드는 클래스의 개별 인스턴스가 아니라 클래스 자체에 속합니다. 따라서 생성된 객체를 통해 호출할 수 없으며, 반드시 Company.comp()처럼 클래스 이름을 통해 호출해야 합니다. 이 특성을 이해하면 아래 두 예제의 차이를 쉽게 파
extends 키워드란 무엇인가?JavaScript에서 extends 키워드는 클래스 상속(class inheritance)을 구현할 때 사용됩니다. extends를 통해 생성된 자식 클래스는 부모 클래스가 가진 모든 메서드와 속성을 그대로 물려받을 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 중복을 줄이며, 더 체계적인 객체 지향 프로그래밍이 가능해집니다.기본 동작 원리자식 클래스는 class 자식클래스 extends 부모클래스 형태로 선언하며, 이렇게 선언된 클래스는 부모 클래스의 모든 기능을 상속받습니다.예제 코드아래
클래스(Class)에서는 getter와 setter를 사용할 수 있습니다. 속성의 값을 반환하기 전이나 설정하기 전에 특별한 처리를 하고 싶다면 getter와 setter를 활용하는 것이 현명한 방법입니다.클래스에 getter와 setter를 추가하려면 각각 get과 set 키워드를 사용합니다. getter는 속성 값을 읽어올 때 호출되고, setter는 속성 값을 지정할 때 호출됩니다.예제 코드<html> <body> <p id="method"></p> <scrip
setTimeout()이란?setTimeout()은 자바스크립트 타이밍 이벤트 중 하나로, window 객체가 제공하는 대표적인 메서드입니다. window 객체는 지정한 시간 간격으로 코드를 실행할 수 있도록 해주는데, 그중 setTimeout()은 일정 시간이 지난 후 특정 함수를 딱 한 번 실행하는 데 사용됩니다.setTimeout()은 두 개의 매개변수를 인자로 받습니다. 첫 번째는 실행하고자 하는 함수이고, 두 번째는 함수가 실행되기까지 기다릴 시간을 나타내는 시간(밀리초)입니다. 예를 들어 2000을 전달하면 함수가 2초
setInterval() 메서드란 무엇인가?setInterval()은 자바스크립트가 제공하는 다양한 타이밍 이벤트(timing events) 중 하나입니다. window 객체는 특정 시간 간격마다 코드를 실행할 수 있도록 허용하며, 그중 setInterval()은 지정한 시간마다 함수를 반복적으로 호출하는 역할을 합니다.이 메서드는 두 가지 필수 인자를 받습니다. 첫 번째는 반복 실행할 함수이고, 두 번째는 해당 함수를 반복할 시간 간격(밀리초 단위)입니다.문법(Syntax)window.setInterval(function, mil
요일(Weekday)이란?한 주의 요일은 월요일부터 일요일까지 각각 1부터 7까지의 숫자에 대응됩니다. JavaScript의 Date 객체는 이러한 요일 정보를 손쉽게 가져올 수 있도록 getDay() 메서드를 제공합니다. 지금부터 getDay() 메서드의 사용법을 간단명료하게 살펴보겠습니다.문법(Syntax)var d = getDay();getDay() 메서드는 별도의 매개변수를 받지 않으며, 호출 시 해당 날짜의 요일에 해당하는 숫자를 그대로 반환합니다. 예를 들어 오늘이 월요일이라면 1, 화요일이라면 2가 출력되는 방식입니다.
JavaScript에서 값을 문자열(string)로 변환하는 방법은 크게 5가지가 있습니다. 각각의 방식은 상황에 따라 장단점이 있으므로, 용도에 맞는 방법을 선택하는 것이 중요합니다.빈 문자열 연결 — 값에 빈 문자열()을 더하는 가장 간단한 방법템플릿 문자열 — 백틱(``)을 사용한 템플릿 리터럴 활용JSON.stringify() — 객체나 배열을 직렬화할 때 유용한 방법toString() — 값이 가진 기본 메서드를 호출하는 방식String() — 전역 String 함수를 사용하는 가장 안전한 방법예제 코드다음 예제에서는 위에
Symbol.isConcatSpreadable이란?Symbol.isConcatSpreadable은 JavaScript의 잘 알려진(well-known) 심볼 중 하나로, Array.prototype.concat() 메서드를 사용할 때 객체가 배열 요소로 펼쳐질(flatten)지 여부를 설정하는 데 사용됩니다. 이 값이 false로 설정되면 배열이 펼쳐지지 않고 하나의 요소로 그대로 병합됩니다.기본적으로 Symbol.isConcatSpreadable의 값은 true입니다. 따라서 명시적으로 선언하지 않는 한, concat() 실행 시
date.toJSON() 메서드란?date.toJSON()은 JavaScript에 기본으로 내장된 함수로, 특정 Date 객체의 내용을 문자열 형태로 변환할 때 사용됩니다. Date 객체는 Date() 생성자를 이용해 만들 수 있습니다.이 메서드가 반환하는 문자열은 ISO 8601 표준 형식(YYYY-MM-DDTHH:mm:ss.sssZ)을 따르며, 시간대는 항상 UTC(협정 세계시) 기준입니다. 또한 JSON.stringify()가 객체를 직렬화할 때 이 메서드를 자동으로 호출하기 때문에, 날짜 데이터를 JSON으로 처리할 때 매우
JavaScript의 Math 객체를 활용하면 다양한 수학 연산을 간편하게 수행할 수 있습니다. 그중 Math.cbrt() 메서드는 숫자의 세제곱근(cuberoot)을 구하는 데 특화된 함수입니다. 이 메서드는 숫자 하나를 매개변수로 받아, 해당 값의 세제곱근을 결과로 반환합니다.기본 문법Math.cbrt(64);매개변수로 전달된 숫자의 세제곱근 값을 계산하여 반환합니다. 별도의 추가 설정 없이 바로 사용할 수 있어 매우 간편합니다.예제 1: 양수의 세제곱근 구하기다음 예제에서는 양수 값들에 대해 세제곱근을 구하여 화면에 출력합니다