이번 글에서는 두 개의 인수를 받는 함수를 작성해 보겠습니다. 첫 번째 인수는 문자열 또는 숫자 리터럴로 구성된 배열이고, 두 번째 인수는 문자열입니다. 이 함수는 배열의 모든 요소 앞뒤에 해당 문자열을 붙여 하나의 문자열로 만들어 반환해야 합니다.예를 들어 다음과 같습니다.applyText([1,2,3,4], a);위 호출은 a1a2a3a4a를 반환해야 합니다.for 루프보다 map() 메서드가 좋은 이유이러한 요구 사항을 처리할 때는 for 루프보다 배열의 map() 메서드를 사용하는 것이 더 간결하고 가독성이 뛰어납니다. ma
예시로 사용할 문자열은 다음과 같습니다.const a = 250,5;쉼표(,) 뒤의 숫자가 한 자릿수라면 그 뒤에 0을 붙여야 합니다. 즉, 250,5는 250,50으로 변환되어야 합니다.또한 문자열에 쉼표가 두 개 이상 포함되어 있다면 -1을 반환해야 합니다.이 작업은 split()과 replace() 함수를 조합하면 간단하게 처리할 수 있습니다. 아래 예제를 통해 확인해 보겠습니다.예제const a = 250,5; const roundString = (str) => { if(str
JavaScript에서 배열을 객체로 변환하기실무에서는 중첩된 배열(배열의 배열)을 키가 있는 객체 형태로 변환해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 2차원 배열이 있다고 가정해 보겠습니다.const data = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];여기서 목표는 각 하위 배열을 a, b, c, d와 같은 영문 알파벳 키를 가진 객체로 바꾸는 것입니다.이 작업은 map()으로 외부 배열을 순회하고, 각 하위 배열에 reduce()를 적용해 객체를 생성하는 방식으로 깔끔
선형 검색이란?선형 검색(Linear Search)은 가장 기본적인 검색 알고리즘 중 하나입니다. 배열의 첫 번째 요소부터 시작하여 마지막 요소까지 순차적으로 탐색하면서, 찾고자 하는 값과 일치하는 요소가 있는지 확인합니다. 값을 발견하면 해당 인덱스를 반환하고, 끝까지 찾지 못하면 검색에 실패했음을 알립니다.선형 검색은 정렬되지 않은 배열에서도 사용할 수 있으며, 구현이 매우 간단하다는 장점이 있습니다. 다만 시간 복잡도가 O(n)이므로 대량의 데이터를 다룰 때는 이진 검색 같은 더 효율적인 알고리즘을 고려하는 것이 좋습니다.Ja
JavaScript에서 Boolean 타입으로 평가될 때 false로 판정되는 값들을 거짓 값(Falsy Value)이라고 합니다. 조건문이나 논리 연산을 다룰 때 이 개념을 정확히 이해하는 것은 매우 중요합니다.JavaScript의 대표적인 거짓 값다음 값들은 Boolean으로 변환되면 모두 false로 평가됩니다.false — 불리언 리터럴 그 자체0 — 숫자 0빈 문자열 — "", 또는 ``(백틱)으로 표현된 길이가 0인 문자열null — 의도적으로 비어 있음을 나타내는 값undefined — 값이 할당되지
자바스크립트에서 함수는 객체로 취급됩니다. 그렇기 때문에 함수를 다른 함수의 매개변수(인자)로 전달할 수 있고, 심지어 함수에서 또 다른 함수를 반환하는 것도 가능합니다.이처럼 자바스크립트의 함수는 일급 함수(First-Class Function)라고 불리며, 변수·객체·배열 등에 저장할 수 있습니다. 또한 함수를 인자로 받거나 함수를 반환하거나 두 가지 모두 수행하는 함수를 고차 함수(Higher-Order Function)라고 합니다.일급 함수란?일급 함수는 프로그래밍 언어가 함수를 일반적인 값처럼 다룰 수 있음을 의미합니다.
웹 개발을 하다 보면 사용자에게 더 익숙한 12시간制(오전/오후) 형식으로 시간을 표시해야 하는 경우가 많습니다. 이 글에서는 자바스크립트(JavaScript)를 이용해 24시간 형식의 시간을 12시간 형식으로 변환하는 간단한 프로그램을 소개합니다.예제 코드다음은 HTML 입력창에 시(hour)와 분(minute)을 입력받아, 버튼 클릭 시 12시간 형식으로 변환해 화면에 출력하는 전체 코드입니다.<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF
HTML5 캔버스에 이미지를 그리려면 JavaScript의 drawImage() 메서드를 사용하면 됩니다. 이 메서드는 <img> 요소나 다른 캔버스를 소스로 받아 지정한 좌표에 이미지를 렌더링해 줍니다.아래 예제에서는 버튼을 클릭하면 화면에 표시된 꽃 이미지가 캔버스 위에 그려지도록 구현했습니다.예제 코드<DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=d
함수형 프로그래밍에서 자주 언급되는 커링(Currying)과 부분 적용(Partial Application)은 비슷해 보이지만 개념적으로 분명한 차이가 있습니다. 두 기법 모두 함수를 재사용성 높게 만들어 주는 강력한 도구입니다.커링(Currying)이란?커링은 여러 개의 인자를 받는 함수를, 인자를 하나씩만 받는 여러 개의 함수로 변환하는 기법입니다. 즉, 함수가 다른 함수를 반환하고, 그 반환된 함수도 다시 하나의 인자만 받아 체인(chain) 형태로 연결할 수 있습니다.예를 들어 multiply(2)(5)처럼 함수를 연속으로
JavaScript에서는 객체를 생성한 후에도 언제든지 새로운 속성(property)과 메서드(method)를 동적으로 추가할 수 있습니다. 가장 간단하고 널리 사용되는 방법은 점 표기법(dot notation)으로, 객체명.속성명 = 값 형태로 작성하면 됩니다.객체에 속성·메서드를 추가하는 주요 방법점 표기법(Dot Notation): object.property = value대괄호 표기법(Bracket Notation): object[property] = value — 속성 이름에 공백이나 특수문자가 있을 때 유용합니다.Obje
비동기 함수(Asynchronous Function)란?비동기 함수는 작업의 완료를 기다리지 않고 프로그램이 계속 실행되도록 만드는 함수입니다. 즉, 대기하지 않습니다! 이러한 방식 덕분에 사용자가 체감하는 대기 시간이 크게 줄어듭니다. 사실 자바스크립트라는 언어 자체가 근본적으로 비동기적으로 동작하도록 설계되어 있습니다.예를 들어, 실행에 많은 시간이 소요되는 무거운 요청(대용량 데이터 조회, 외부 API 호출 등)을 처리한다고 가정해 보겠습니다. 이를 동기(synchronous) 방식으로 처리하면 요청이 완료될 때까지 프로그램
자바스크립트에서 객체 배열(array of objects)을 하나의 객체(object)로 평면화(flatten)하려면, 객체 배열을 유일한 인자로 받는 함수를 직접 만들어 사용하면 됩니다. 이 함수는 각 키 뒤에 해당 요소의 인덱스를 붙인 형태의 평면화된 객체를 반환합니다.이 방식의 시간 복잡도는 O(mn)입니다. 여기서 n은 배열의 크기, m은 각 객체가 가진 프로퍼티의 개수를 의미합니다. 반면 공간 복잡도는 O(n)으로, 실제 배열의 크기에 비례합니다.예제 코드아래 코드는 객체 배열을 하나의 객체로 평면화하는 과정을 보여줍니다.
공식 String.prototype.split() 메서드에는 문자열을 인덱스 1 또는 임의의 인덱스 n부터 분할하는 기능이 기본적으로 제공되지 않습니다. 하지만 split()을 사용하는 방식을 조금만 응용하면 원하는 동작을 충분히 구현할 수 있습니다.접근 방법핵심 아이디어는 두 개의 배열을 만드는 것입니다.ACTUAL 배열: 문자열 전체(0부터 끝까지)를 분할한 결과LEFTOVER 배열: 시작 위치(STARTPOSITION)까지 0부터 분할한 결과이후 LEFTOVER 배열의 각 요소를 순회하면서 ACTUAL 배열에서 해당 요소를 제
JavaScript에서 여러 개의 값을 함수에 전달할 때, 각각의 매개변수를 일일이 나열하는 대신 객체 하나로 묶어서 전달하면 코드가 훨씬 깔끔해집니다. 특히 구조 분해 할당(Destructuring)을 활용하면 함수 선언부에서 필요한 값만 곧바로 추출할 수 있어 가독성과 유지보수성이 크게 향상됩니다.구조 분해 할당으로 객체 전달하기함수의 매개변수 자리에 중괄호 { }를 사용하면, 전달받은 객체에서 원하는 속성들을 자동으로 분해하여 사용할 수 있습니다. 아래 예제에서는 addNum({ a, b, c, d }) 형태로 네 개의 속성값
자바스크립트의 구조 분해 할당(Destructuring Assignment)은 객체나 배열의 값을 손쉽게 추출해 변수에 담을 수 있는 강력한 문법입니다. 그렇다면 이미 선언된 변수에도 구조 분해 할당을 사용할 수 있을까요? 정답은 가능하다입니다. 다만 한 가지 주의할 점이 있습니다.이미 선언된 변수에 구조 분해 할당하기변수를 새로 선언하면서 구조 분해할 때는 const { name, age } = obj;처럼 작성하면 됩니다. 하지만 이미 선언된 변수에 값을 할당할 때는 문장이 중괄호({})로 시작하면 코드 블록으로 해석될 수 있으
JavaScript에서 함수는 하나의 객체로 취급됩니다. 그렇기 때문에 함수를 다른 함수의 매개변수로 전달할 수 있고, 심지어 함수 안에서 또 다른 함수를 반환하는 것도 가능합니다. 이러한 특성 덕분에 JavaScript의 함수는 일급 객체(first-class citizen)라고 불립니다. 즉, 함수를 변수, 객체, 배열에 자유롭게 저장할 수 있으며, 인자로 넘기거나 반환값으로 활용할 수도 있습니다. 여기서 고차 함수(Higher-Order Function)란 다음 중 하나 이상을 수행하는 함수를 의미합니다. 함수를 매개변수(인
JavaScript에서 배열의 각 요소를 일괄적으로 변환해야 할 때 가장 널리 사용되는 메서드가 바로 map()입니다. map() 메서드는 원본 배열을 변경하지 않으면서, 콜백 함수가 반환한 값들로 구성된 새로운 배열을 생성합니다.map() 메서드의 기본 문법arr.map((element, index, array) => { /* 변환 로직 */ });콜백 함수는 배열의 모든 요소에 대해 순서대로 실행되며, 각 호출의 반환값이 새 배열의 해당 위치에 저장됩니다. 인덱스(index)와 원본 배열(array)은 필요할 때만 선택적으
JavaScript의 메서드 차용(Method Borrowing)이란?JavaScript에서 메서드 차용은 한 객체에 정의된 메서드를 다른 객체에서 빌려와 재사용하는 강력한 기법입니다. 이를 가능하게 해주는 핵심 메서드가 바로 call(), apply(), 그리고 bind()입니다.이 세 가지 메서드는 모두 함수 내부의 this 값을 명시적으로 지정할 수 있도록 해주기 때문에, 원래 해당 객체에 속해 있지 않은 메서드도 마치 자신의 것처럼 호출할 수 있습니다.call(), apply(), bind()의 차이점call() — 인수를
템플릿 리터럴(Template Literal)은 단순히 문자열을 조합하는 기능을 넘어, 태그드 템플릿 리터럴(Tagged Template Literal)이라는 강력한 문법도 제공합니다. 태그드 템플릿 리터럴은 함수를 정의하듯 템플릿 문자열을 직접 파싱할 수 있게 해주는 기능으로, 문자열 처리 로직을 자유롭게 커스터마이징할 때 매우 유용합니다.태그드 템플릿 리터럴의 동작 원리일반적인 함수 호출과 달리, 태그드 템플릿 리터럴은 괄호( ) 없이 함수 이름을 템플릿 문자열 바로 앞에 붙여 호출합니다. 이때 태그 함수는 다음과 같은 인자를
JavaScript의 템플릿 문자열(템플릿 리터럴)은 백틱(``)으로 감싸 정의하며, ${} 구문을 사용해 변수나 함수 호출 결과를 손쉽게 삽입할 수 있습니다. 특히 이 치환식 안에 또 다른 템플릿 문자열을 작성하는 중첩(nesting) 기법을 활용하면 복잡한 문자열 조합도 가독성 있게 처리할 수 있습니다. 예제 코드 다음은 CLICK HERE 버튼을 클릭했을 때, 중첩된 템플릿 문자열을 사용해 성과 이름을 합친 전체 이름(fullName)을 화면에 출력하는 예제입니다. <!DOCTYPE html> <html lan