JavaScript204 [JavaScript]문자열을 배열로 변환하는 방법 문자열을 배열로 변환하는 방법 JavaScript에서 문자열을 배열로 변환해야 하는 상황이 발생할 수 있습니다. 예를 들어, 문자열 "010-1234-5678"에서 하이픈(-)을 기준으로 문자열을 분리하고 분리된 문자열을 배열로 구성할 수 있습니다. ['010', '1234', '5678'] 또 다른 상황으로 단일 문자를 요소로 가지는 배열로 변환하거나 크기가 1인 배열로 변환해야 하는 상황이 발생할 수 있습니다. // 문자열 "010-1234-5678"을 단일 문자로 구성된 배열로 변환 ['0', '1', '0', '-', '1', '2', '3', '4', '-', '5', '6', '7', '8'] // 문자열 "010-1234-5678"을 크기가 1인 배열로 변환 ['010-1234-5678'] .. JavaScript/문자열 2022. 10. 1. [JavaScript]문자열을 분리하는 방법 문자열을 분리하는 방법 JavaScript에서 문자열을 분리해야 하는 상황이 발생할 수 있습니다. 예를 들어, 문자열 "010-1234-5678"에서 하이픈(-)을 기준으로 문자열을 분리할 수 있습니다. ["010", "1234", "5678"] 위 상황에서 JavaScript가 제공하는 split() 메서드를 사용하여 문자열을 분리하여 배열에 할당할 수 있습니다. 이번 포스팅은 JavaScript에서 제공하는 split() 메서드를 사용하여 문자열을 분리하는 방법을 소개합니다. String에서 제공하는 split 메서드 String에서 제공하는 split() 메서드를 사용하여 특정 구분자를 기준으로 문자열을 분리할 수 있습니다. 특정 구분자는 문자열 또는 정규표현식으로 설정할 수 있습니다. str.s.. JavaScript/문자열 2022. 10. 1. [JavaScript]함수가 존재하는지 확인하는 방법 함수가 존재하는지 확인하는 방법 JavaScript는 느슨한 타입의 프로그래밍 언어라서 변수 타입이 명확하지 않을 수 있습니다. 예를 들어, 다음과 같이 변수의 값이 문자열이었다가 숫자형으로 변경되거나 함수로 변경될 수 있습니다. // 문자열(string) let sum = 'sum'; // 숫자(number) sum = 100; // 함수(function) sum = function(x, y) { return x + y; } 따라서, sum이라는 변수가 처음에는 함수였다가 나중에 문자열 또는 숫자로 변경돼서 함수처럼 호출한 경우 다음과 같이 TypeError가 발생합니다. let sum = function(x, y) { return x + y; } sum = 100; // Uncaught TypeErr.. JavaScript/Tip 2022. 9. 24. [JavaScript]임의의 색상을 생성하는 방법 임의의 색상을 생성하는 방법 JavaScript에서 임의의 색상을 생성해야 하는 경우가 존재할 수 있습니다. 예를 들어, 버튼을 클릭할 때마다 특정 HTML 영역에 임의의 색상을 적용하는 경우가 있겠네요. JavaScript는 임의의 색상을 생성하는 기능을 제공하지 않으므로 개발자가 직접 임의의 색상을 생성하는 함수를 구현해야 합니다. 이번 포스팅은 JavaScript에서 임의의 색상을 생성하는 함수를 구현합니다. 기본 지식 컴퓨터에서 색상은 RGB 또는 16진수로 표현합니다.(HSL 표기법도 있지만, 이번 포스팅에서 설명하지 않겠습니다.) RGB는 Red, Green, Blue를 나타냅니다. 그리고 RGB는 16진수로 변환할 수 있으며, 16진수는 RGB로 변환할 수 있습니다. 예를 들어, 16진수로 .. JavaScript/Tip 2022. 9. 24. [JavaScript]문자열인지 확인하는 방법 문자열인지 확인하는 방법 이번 포스팅은 JavaScript에서 변수가 문자열인지 확인하는 몇 가지 방법과 주의사항을 소개합니다. typeof 연산자 첫 번째 방법으로 JavaScript에서 타입을 확인할 수 있는 typeof 연산자를 사용하여 변수가 문자열인지 확인할 수 있습니다. typeof 연산자는 피연산자의 데이터 유형을 반환하는 기능을 가지고 있으며, JavaScript의 기본 타입과 함수가 아닌 경우 객체로 취급합니다. 다음 예제는 typeof 연산자를 사용하여 다양한 데이터 타입을 확인합니다. const strValue = 'Hello'; const numValue = 100; const dateValue = new Date(); const array = [1, 2, 3]; const sum .. JavaScript/문자열 2022. 9. 23. [JavaScript]16진수를 RGB로 변환하는 방법 16진수를 RGB로 변환하는 방법 웹 브라우저에 표현되는 16진수의 RGB(Red, Green, Blue)를 16진수가 아닌 기존 RGB 값으로 변환해야 하는 경우가 존재할 수 있습니다. 예를 들어, "ff640a"라는 16진수로 표현된 RGB는 첫 번째 두 자리 쌍이 빨간색(Red), 그다음 두 자리 쌍이 녹색(Green), 마지막 쌍이 파란색(Blue)을 나타냅니다. 즉, "ff640a"는 빨간색을 표현하는 "ff", 녹색을 표현하는 "64", 파란색을 표현하는 "0a"로 분할됩니다. "ff"를 10진수로 255, "64"는 10진수로 100, "0a"는 10진수로 10이므로 JavaScript에서 16진수로 표현된 RGB를 다음과 같이 배열로 변환할 수 있습니다. // "ff640a" [255, 1.. JavaScript/Tip 2022. 9. 23. [JavaScript]RGB를 16진수로 변환하는 방법 RGB를 16진수로 변환하는 방법 대부분의 사진을 편집하는 프로그램은 0에서 255까지의 RGB(Red, Green, Blud) 모델을 사용하여 색상을 나타냅니다. 특정 색상을 웹 브라우저에 표현하고 싶다면, 이 RGB 값을 16진수로 가져와야 합니다. JavaScript는 숫자를 16진수로 변환하는 toString() 메서드를 제공하지만, RGB 값을 16진수로 변환하는 기능은 제공하지 않습니다. 따라서, RGB 값을 16진수로 변환하기 위해서는 toString() 메서드를 사용하여 개발자가 직접 해당 기능을 가진 함수를 구현해야 합니다. 이번 포스팅은 toString() 메서드를 사용하여 RGB 값을 16진수로 변환하는 함수를 구현합니다. 순서 1. 정수를 16진수로 변환하는 함수 구현 먼저, 0에서.. JavaScript/Tip 2022. 9. 23. [JavaScript]문자열 비교하는 방법 문자열 비교하는 방법 이번 포스팅은 JavaScript에서 문자열을 비교할 수 있는 몇 가지 방법을 소개합니다. 방법 1. 동치 연산자(===) 가장 잘 알려져 있고 대부분 많이 사용하는 방법인 동치 연산자(===)를 사용하여 두 문자열을 비교할 수 있습니다. const str1 = 'Hello'; const str2 = 'Hello'; console.log(str1 === 'Hello'); // true console.log(str1 === str2); // true 동등 연산자(==)는 두 피연산자의 값이 동일한 경우 true를 반환하며, 동치 연산자(===)는 두 피연산자의 값과 타입이 동일한 경우 true를 반환합니다. 다음 예제는 문자열 '1'이랑 숫자 1을 비교합니다. const strValu.. JavaScript/문자열 2022. 9. 23. [JavaScript]객체 구조 분해(Object Destructuring) 객체 구조 분해(Object Destructuring) Destructuring이라는 단어는 무언가를 파괴 또는 축소하는 것을 의미합니다. JavaScript의 구조 분해는 배열이나 객체에 할당된 데이터에서 특정 값 또는 여러 값을 추출하는 방법입니다. 객체의 프로퍼티를 가져오는 일반적인 방법은 점 표기법 또는 대괄호 표기법을 사용하여 동일한 프로퍼티 이름을 작성하는 것입니다. const person = { name: '둘리', age: 20 }; // 점 표기법 const name1 = person.name; const age1 = person.age; // 대괄호 표기법 const name2 = person['name']; const age2 = person['age']; 구조 분해를 사용하면, 다음.. JavaScript/객체 2022. 9. 22. [JavaScript]배열 구조 분해(Array Destructuring) 배열 구조 분해(Array Destructuring) Destructuring이라는 단어는 무언가를 파괴 또는 축소하는 것을 의미합니다. JavaScript의 구조 분해는 배열이나 객체에 할당된 데이터에서 특정 값 또는 여러 값을 추출하는 방법입니다. 배열의 요소를 가져오는 일반적인 방법은 대괄호 표기법을 사용하여 인덱스로 접근하는 것입니다. const strArray = ['One', 'Two', 'Three']; const strOne = strArray[0]; const strTwo = strArray[1]; const strThree = strArray[2]; console.log(strOne); // One console.log(strTwo); // Two console.log(strThree).. JavaScript/배열 2022. 9. 20. [JavaScript]배열의 slice와 splice 메서드의 차이점 배열의 slice와 splice 메서드의 차이점 JavaScript의 slice() 메서드와 splice() 메서드는 배열을 자르거나 배열의 요소를 제거하는 목적으로 사용됩니다. 두 메서드는 이름과 사용 목적이 비슷하므로 동일한 역할을 수행하는 것처럼 보이지만, 몇 가지 차이점이 존재합니다. 이번 포스팅은 slice() 메서드와 splice() 메서드 사용 방법과 차이점을 소개합니다. slice 메서드 JavaScript의 Array에서 제공하는 slice() 메서드는 이름 그대로 무언가를 자르는 것을 의미합니다. 시작 위치부터 마지막 위치까지 배열의 요소를 자를 수 있으며, 원래 배열을 변경하지 않고 새로운 배열을 반환합니다. arr.slice([begin[, end]]) slice() 메서드는 두 개.. JavaScript/배열 2022. 9. 19. [JavaScript]특정 조건을 만족하는 배열의 인덱스 가져오는 방법 특정 조건을 만족하는 배열의 인덱스 가져오는 방법 이번 포스팅은 JavaScript에서 특정 조건을 만족하는 배열의 인덱스를 가져오는 몇 가지 방법을 소개합니다. 방법 1. findIndex 메서드 가장 잘 알려져 있는 방법으로 배열의 findIndex() 메서드를 사용하는 것입니다. findIndex() 메서드의 매개 변수로 특정 조건식에 대해 Boolean 값을 반환하는 콜백 함수를 전달하면, 특정 조건에 해당하는 인덱스를 반환합니다. 다음 예제는 숫자 타입의 배열에서 10보다 큰 요소의 인덱스를 가져옵니다. const numArray = [0, 5, 15, 10]; const findIndex = numArray.findIndex((num) => num > 10); console.log(findIn.. JavaScript/배열 2022. 9. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음