JavaScript에서 두 개의 배열을 하나로 합쳐야 할 때 가장 간단하고 널리 사용되는 방법은 concat() 메서드입니다. 이 메서드는 기존 배열을 변경하지 않고, 두 배열의 요소를 모두 포함하는 새로운 배열을 반환합니다.예제 코드다음은 JavaScript에서 두 개의 배열을 결합하는 전체 예제 코드입니다.<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=devi
JavaScript에서 배열의 모든 요소를 단순히 이어 붙이는 것이 아니라, 특정 조건을 만족하는 요소만 골라서 하나의 문자열로 합치고 싶은 경우가 있습니다. 이럴 때 filter() 메서드와 join() 메서드를 함께 사용하면 아주 간단하게 해결할 수 있습니다.아래 예제에서는 배열 요소 중 2로 나누어 떨어지는(짝수) 값들만 필터링한 뒤, 지정한 구분자로 연결하여 화면에 출력합니다.예제 코드<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8
JavaScript로 개발하다 보면 객체 배열의 키(key) 이름을 바꿔야 하는 경우가 종종 있습니다. 이때 중요한 것은 원본 배열을 훼손하지 않고 새로운 형태의 배열을 만들어내는 것입니다. 가장 깔끔한 방법은 배열의 map() 메서드를 활용하는 것입니다. 핵심 원리 map() 메서드는 기존 배열을 직접 수정하는 대신, 콜백 함수의 반환값으로 구성된 새로운 배열을 반환합니다. 따라서 각 객체에 대해 새로운 키에 기존 값을 복사한 뒤, 더 이상 필요 없는 기존 키를 delete 연산자로 제거하면 키 이름이 변경된 새 배열을 얻을 수
자바스크립트 모듈(Module)은 ES 2015(ES6)에서 처음 도입된 기능입니다. 모듈을 사용하면 하나의 거대한 코드 덩어리를 재사용 가능한 작은 단위로 나누어 관리할 수 있으며, 각 모듈 안에는 클래스나 함수 등을 포함시킬 수 있습니다.모듈에서는 export 키워드를 사용해 변수, 함수, 객체를 외부로 내보내고, 다른 파일에서는 import 키워드를 통해 해당 요소들을 가져와 사용할 수 있습니다.주의 사항Note − 이 예제를 실행하려면 로컬호스트(Localhost) 서버 환경이 필요합니다. 파일을 직접 열어서 실행
자바스크립트의 구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 값을 꺼내어 변수에 담는 기능으로 널리 알려져 있지만, 이를 활용하면 이미 존재하는 다른 객체에 새로운 속성을 동시에 할당하는 것도 가능합니다.구조 분해 할당으로 객체에 속성 할당하기핵심 문법은 ({ a: obj.a, b: obj.b } = sourceObj) 형태입니다. 소스 객체의 각 프로퍼티 값이 콜론(:) 뒤에 지정된 대상 객체의 속성에 순서대로 대입됩니다. 이때 전체 표현식을 괄호로 감싸야 한다는 점을 유의해야 합니다. 그렇지 않
자바스크립트에는 접근 제한자(private) 키워드가 없기 때문에, 외부에서 직접 접근할 수 없는 변수를 만들려면 클로저(Closure)를 활용하는 것이 대표적인 방법입니다. 함수 내부에 선언된 변수는 함수 외부에서 접근할 수 없지만, 그 내부에서 반환된 함수는 해당 변수에 대한 참조를 유지합니다. 이러한 특성을 이용하면 변수를 안전하게 숨기면서도 제어된 방식으로만 조작할 수 있습니다.핵심 개념외부 함수가 실행되고 종료된 후에도, 내부 함수는 외부 함수의 스코프에 있는 변수를 기억하고 접근할 수 있습니다.따라서 변수를 외부 함수 안
JavaScript에서 객체(Object)와 배열(Array)을 다룰 때 자주 사용되는 두 가지 메서드 조합, Object.keys().map()과 Array.map()의 차이를 예제 코드를 통해 살펴보겠습니다.두 메서드의 기본 개념Object.keys().map()객체에는 직접 map() 메서드를 사용할 수 없습니다. 따라서 Object.keys()로 객체의 키(key)들을 배열로 추출한 뒤, 그 배열에 map()을 적용하는 방식으로 활용합니다. 주로 객체의 키를 순회하며 값을 계산하거나 변환할 때 유용합니다.Array.map()
클로저를 활용한 비공개 멤버의 기본 원리JavaScript에서는 생성자 함수 내부에 let 또는 var로 변수를 선언하면, 클로저(closure) 덕분에 외부에서 직접 접근할 수 없는 비공개(private) 멤버를 만들 수 있습니다. 이렇게 선언된 변수는 함수 내부에서 정의된 메서드(소위 특권 메서드)를 통해서만 접근할 수 있으며, 객체 속성처럼 obj.personName 형태로 접근하려 하면 undefined가 반환됩니다.흥미로운 점은 각 인스턴스가 생성될 때마다 새로운 클로저 스코프가 만들어진다는 것입니다. 따라서 아래 예제처럼
JavaScript에서는 concat() 메서드와 sort() 메서드를 조합하여 배열의 요소들을 동일한 배열 안에 복제할 수 있습니다. 핵심 아이디어는 원본 배열을 자기 자신과 연결(concat)하여 각 요소가 두 번씩 포함된 새로운 배열을 만드는 것입니다. 동작 원리 arr.concat(arr) : 원본 배열과 자기 자신을 연결하여 모든 요소가 두 번씩 들어간 새로운 배열을 반환합니다. .sort() : 연결된 배열의 요소들을 정렬하여 보기 좋게 순서를 정리합니다. 예제 코드 다음은 배열 요소를 동일한 배열 내에서 복제하는 전
이 글에서는 JavaScript를 사용해 여러 체크박스 조건에 따라 배열을 동적으로 필터링하는 방법을 소개합니다. 사용자가 체크박스를 선택할 때마다 filter() 메서드가 실행되어, 지정한 조건(예: 50보다 큰 수, 5의 배수, 3의 배수)을 만족하는 요소만 남게 됩니다. 예제 코드 <!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, ini
JavaScript 개발을 하다 보면 키-값 쌍으로 이루어진 딕셔너리 형태의 객체를 객체 배열(목록) 형태로 변환해야 하는 경우가 자주 있습니다. 예를 들어 API 응답 데이터를 가공하거나, 화면에 목록 형태로 렌더링하기 전에 데이터 구조를 바꿔야 할 때가 그렇습니다.Object.values() 메서드 활용하기가장 간단하고 널리 사용되는 방법은 Object.values() 메서드를 사용하는 것입니다. 이 메서드는 객체가 가진 모든 열거 가능한 속성 값들을 배열로 반환합니다.다음은 중첩된 딕셔너리를 객체 배열로 변환하는 완전한 예제
자바스크립트에서 객체로 이루어진 배열에도 일반 배열과 동일하게 다양한 배열 메서드를 적용할 수 있습니다. 아래 예제는 pop(), push(), splice() 메서드를 객체 배열에 사용하는 방법을 보여줍니다. pop(): 배열의 마지막 요소를 제거합니다. push(): 배열의 끝에 새로운 요소를 추가합니다. splice(): 지정한 위치부터 특정 개수만큼 요소를 제거하거나 교체합니다. 예제 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF
JavaScript에서 객체를 깊은 복제(deep clone)한다는 것은 원본 객체와 완전히 독립적인 새로운 객체를 만드는 것을 의미합니다. 이렇게 하면 복사본의 속성을 변경해도 원본 객체에는 아무런 영향을 주지 않습니다.가장 널리 사용되는 방법은 JSON.stringify()로 객체를 문자열로 변환한 뒤, JSON.parse()로 다시 객체로 변환하는 것입니다. 이 방식은 중첩된 객체까지 모두 새롭게 생성되므로 깊은 복제가 가능합니다.예제다음은 JavaScript에서 객체를 깊은 복제하는 전체 코드입니다.<!DOCTYPE h
new 연산자는 생성자 함수를 가진 내장 객체 타입이나 사용자가 직접 정의한 객체 타입의 인스턴스(instance)를 생성할 때 사용하는 JavaScript의 핵심 문법입니다.new 연산자를 사용하면 생성자 함수가 실행되면서 새로운 빈 객체가 만들어지고, 함수 내부의 this 키워드가 해당 객체를 가리키게 됩니다. 그 결과, 속성과 메서드를 가진 독립적인 객체 인스턴스가 반환됩니다.new 연산자의 동작 원리new 연산자가 실행되면 내부적으로 다음 과정이 순차적으로 일어납니다.1. 빈 객체가 새롭게 생성됩니다.2. 생성된 객체의 프로
블록 스코프란 무엇인가? 자바스크립트는 let 또는 const 키워드로 선언된 변수에 대해서만 블록 스코프(block scope)를 지원합니다. 반면 var 키워드로 선언된 변수는 함수 스코프(function scope)만 지원하며, 중괄호 { } 로 묶인 블록 단위의 스코프는 적용되지 않습니다. 쉽게 말해, 블록 안에서 let으로 선언한 변수는 해당 블록을 벗어나면 접근할 수 없지만, var로 선언한 변수는 블록 외부에서도 그대로 접근이 가능합니다. 블록 스코프는 ES6(ECMAScript 2015)에서 let과 const가 도입
개요JavaScript에서 객체 내부에 중첩된 객체 배열을 처리해야 할 때, map() 또는 forEach() 메서드를 활용하면 각 요소에 쉽게 접근할 수 있습니다. 이 글에서는 중첩된 JSON 구조를 순회하면서 데이터를 추출하는 방법을 실제 예제와 함께 살펴보겠습니다.map()과 forEach()의 차이점forEach()는 배열의 각 요소에 대해 주어진 함수를 실행하기만 할 뿐 반환값이 없습니다. 반면 map()은 각 요소를 변환한 결과로 새로운 배열을 반환합니다. 따라서 단순히 데이터를 출력하거나 부수 효과(side effect
JavaScript에는 소수점 숫자를 다룰 때 유용하게 사용할 수 있는 두 가지 내장 함수가 있습니다. 바로 Math.round()와 Math.trunc()입니다. 이 두 함수는 비슷해 보이지만 동작 방식에 중요한 차이가 있으므로, 상황에 맞게 올바른 함수를 선택하는 것이 중요합니다.Math.round()와 Math.trunc()의 차이점Math.round() — 소수점 숫자를 가장 가까운 정수로 반올림합니다. 소수 부분이 0.5 이상이면 올리고, 0.5 미만이면 버립니다.Math.trunc() — 소수점 이하를 단순히 제거하고 정
JavaScript에서 배열의 마지막 요소를 확인하고 싶다면 pop() 메서드를 사용하면 됩니다. 아래 예제는 버튼을 클릭하면 배열의 마지막 요소를 화면에 출력하는 간단한 웹 페이지입니다. 예제 코드 <!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document</
단락 평가란 무엇인가? 단락 평가(Short-circuit evaluation)는 자바스크립트에서 &&(AND)와 ||(OR) 논리 연산자를 사용할 때 적용되는 핵심 동작 방식입니다. 이름 그대로 회로가 끊기듯 평가 도중에 나머지 연산을 건너뛰는 것이 특징입니다. 논리 연산자를 사용한 표현식은 항상 왼쪽에서 오른쪽 순서로 평가되며, 결과가 확정되는 순간 뒤에 남은 표현식은 아예 실행되지 않습니다. &&(AND) 연산자의 단락 평가 && 연산자는 모든 피연산자가 true여야 전체 결과가 t
JavaScript 객체를 새 배열로 변환하기JavaScript에서는 구조 분해 할당(Destructuring)과 for...of 반복문을 활용하면 복잡한 객체의 데이터를 원하는 형태의 새로운 배열로 손쉽게 변환할 수 있습니다. 이 글에서는 학교(school) 객체에 담긴 학생 정보를 추출하여 새로운 문자열 배열로 만드는 방법을 예제와 함께 살펴보겠습니다.핵심 개념 정리구조 분해 할당: 객체나 배열의 값을 한 번에 여러 변수로 꺼내올 수 있는 문법입니다.for...of 문: 배열이나 이터러블 객체의 요소를 순회할 때 사용합니다.템플