Javascript203

• 

  [JavaScript]객체를 배열로 변환하는 방법 이번 포스팅에서는 JavaScript에서 객체를 배열로 변환하는 방법들을 소개합니다. 고전적인 방법 JavaScript에서 객체를 배열로 변환하는 고전적인 방법은 객체의 속성을 반복적으로 접근하여 push() 함수로 배열에 값을 추가하는 방법입니다. 다음은 객체의 key(속성명)를 배열로 변환하는 예제입니다. let strObj = { A : 'A string', B : 'B string', C : 'C string' }; let strArr = []; for (let objKey in strObj) { if(strObj.hasOwnProperty(objKey)) { strArr.push(objKey); } } console.log(strArr); // ['A', 'B', 'C'] 객체의 key(속성명).. JavaScript/JavaScript 문법 2021. 12. 24.

• 

  [JavaScript]Date 객체 유효성 체크 이번 포스팅에서는 JavaScript에서 Date 객체가 유효한 값을 가지는지 체크하는 방법을 소개합니다. 목차 isNaN() 함수와 instanceof 연산자 isFinite() 함수와 instanceof 연산자 isNaN() 함수와 instanceof 연산자 instanceof 연산자와 isNaN() 함수를 같이 사용하여 Date 객체의 유효성을 체크할 수 있습니다. instanceof 연산자는 객체의 타입을 확인할 수 있는 연산자로 boolean 값을 반환합니다. 다음은 JavaScript의 객체의 타입을 instanceof 연산자로 확인하는 예제입니다. new Date() instanceof Date // true new Array() instanceof Array // true new Strin.. JavaScript/객체 2021. 12. 23.

• 

  [JavaScript]Date와 new Date 차이점 이번 포스팅에서는 Date, Date(), new Date()의 차이점을 소개합니다. 목차 Date Date() new Date() Date ECMAScript의 타입에는 Date 타입이 존재하지 않으며, 아래 8개의 타입이 존재합니다. undefined null boolean string symbol number bigint object 값의 타입을 반환하는 typeof 연산자는 값의 정확한 타입을 반환하지 않는 문제가 있습니다. typeof 연산자로 null의 타입을 확인하면 'object'가 반환되지만, instanceof 연산자로 null 타입이 Object인지 확인하면 false가 반환됩니다. typeof null // 'object' null instanceof Object // false E.. JavaScript/객체 2021. 12. 22.

• 

  [JavaScript]물음표 사용 방법, Null 병합 연산자, 옵셔널 체이닝 이번 포스팅에서는 JavaScript의 물음표(?)를 사용하는 사례를 설명합니다. JavaScript에서 물음표를 잘 활용하면 코드를 좀 더 간결하게 작성할 수 있습니다! 조건부 삼항 연산자( ? : ) 조건부 삼항 연산자는 JavaScript뿐만 아니라 다른 프로그래밍 언어에서도 사용되는 연산자입니다. 조건부 삼항 연산자는 전통적인 조건문 if...else문의 약어입니다. if...else문 대신 조건부 삼항 연산자를 사용하면 코드가 더 간결해지고 깔끔해 보입니다. ▶ 조건부 삼항 연산자 구문 조건 ? A : B; 조건이 true면 A가 반환되고 조건이 false면 B가 반환됩니다. 위 조건부 삼항 연산자를 if...else문으로 작성하면 다음과 같습니다. if (조건) { return A; } els.. JavaScript/JavaScript 문법 2021. 12. 22.

• 

  [JavaScript]문자열을 숫자로 변환 이번 포스팅에서는 JavaScript에서 문자열을 숫자로 변환하는 몇 가지 방법을 소개합니다. 단항 연산자( +, - ) + 연산자는 피연산자를 Number 타입으로 변환하며 - 연산자는 피연산자를 음수인 Number 타입으로 변환합니다. 단항 연산자는 문자열에 따라 정수 또는 부동 소수점 숫자로 자동 변환합니다. 그리고 문자열이 아닌 true, false, null도 숫자로 변환됩니다. 단항 연산자가 숫자로 해석할 수 없으면 NaN을 반환합니다. console.log(+'10'); // 10 console.log(-'10'); // -10 console.log(+'123.456'); // 123.456 console.log(-'123.456'); // -123.456 console.log(+true);.. JavaScript/JavaScript 문법 2021. 12. 22.

• 

  [JavaScript]prompt 함수 사용 방법 prompt 함수란? JavaScript에서 prompt() 함수는 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용됩니다. 프롬프트 상자에서 계속 진행하려면 "확인" 또는 "취소" 버튼을 클릭해야 합니다. 이번 포스팅에서는 prompt() 함수를 다루는 방법을 소개합니다. prompt() 함수 설명 prompt() 함수는 두 개의 인수를 가지는 함수이며, 사용하는 즉시 프롬프트 상자가 화면에 표시됩니다. let promptObj = prompt(message, default); 첫 번째 인수는 프롬프트 상자에 표시되는 레이블이며, 두 번째 인수는 프롬프트 상자의 텍스트 박스에 표시되는 문자열입니다. 두 개의 인수는 생략 가능하며, 다음은 크롬 브라우저에서 prompt() 함수를 사용.. JavaScript/함수 2021. 12. 21.

• 

  [JavaScript]배열을 섞는 방법 이번 포스팅에서는 JavaScript에서 배열을 섞는 방법을 소개합니다. Fisher-Yates Shuffle 알고리즘 Fisher-Yates Shuffle 알고리즘은 마지막 인덱스를 시작으로 반복문이 실행됩니다. 배열 요소를 순회하여 배열의 임의의 요소로 값을 변경합니다. 인덱스 위치가 0에 도달하면 반복문은 종료됩니다. 다음은 JavaScript에서 Fisher-Yates Shuffle 알고리즘이 적용될 배열입니다. let originArray = ["A", "B", "C" , "D", "E", "F" , "G", "H", "I"]; 배열을 인자로 받으며, 배열의 요소를 뒤섞는 함수를 정의합니다. const shuffleArray = (array) => { // ... } Fisher-Yates Sh.. JavaScript/배열 2021. 12. 20.

• 

  [JavaScript]try-catch로 잡을 수 없는 예외 대부분의 개발자들은 애플리케이션이 에러로 인해 중단되는 것을 방지하기 위해 습관적으로 try-catch문을 작성합니다. 하지만 JavaScript에서는 try-catch문으로 잡을 수 없는 예외가 존재합니다. 이번 포스팅에서는 JavaScript에서 try-catch문으로 잡을 수 없는 예외가 무엇인지 설명합니다. 목차 구문 오류(SyntaxError) 비동기 코드에서 예외 Promise 예외 구문 오류(SyntaxError) 구문 오류(SyntaxError)는 코드가 실행 중이 아니라 구문이 분석되는 동안 발생하는 에러입니다. 그러므로 try-catch문으로 구문 오류를 처리할 수 없습니다. 다음은 구문 오류(SyntaxError)를 catch 못하는 예제입니다. errorFunc = function(.. JavaScript/JavaScript 문법 2021. 12. 20.

• 

  [JavaScript]Moment.js 대신 Day.js 사용 Moment.js란? Moment.js는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리입니다. Moment.js는 날짜 및 시간과 관련된 라이브러리 중에서 가장 오래되었으며, 많은 개발자들에게 사용되었지만, 현재 다음 두 가지 이유로 개발이 중단되었습니다. Moment.js의 용량 문제 너무 오래되어 신규 기능 추가가 어려움 Moment.js의 단점을 극복하기 위해 Day.js, Luxon.js, date-fns.js 등 여러 라이브러리들이 개발되었으며, 이번 포스팅에서는 Day.js 라이브러리에 대해 소개합니다. Day.js란? Day.js는 Moment.js의 축소 버전으로 동일한 API를 사용하며 용량은 Moment.js 파일의 2~3% 밖에 .. JavaScript/라이브러리 2021. 12. 17.

• 

  [JavaScript]코드 실행 시간 측정 방법 이번 포스팅에서는 JavaScript에서 코드 실행 시간을 측정하는 몇 가지 방법을 소개합니다. 목차 Date 객체 console.time() 사용 performance.now() 사용 Date 객체 Date 객체를 사용하여 고전적인 방법으로 코드 실행 시간을 측정할 수 있습니다. 다음은 Date 객체를 사용하여 실행 시간을 측정하는 예제입니다. let loop = 100000000; // 1억 let sum = 0; let startTime = new Date().getTime(); for (let i = 1; i JavaScript/JavaScript 문법 2021. 12. 17.

• 

  [JavaScript]Moment.js 사용 방법 Moment.js란? Moment.js는 JavaScript에서 날짜 및 시간을 조작하고 작업하는데 도움이 되는 JavaScript 라이브러리입니다. Moment.js는 JavaScript에서 날짜 및 시간과 관련된 라이브러리 중에서 가장 오래되었지만, 현재 다음 두 가지 이유로 개발이 중단되었습니다. Moment.js의 용량 문제 너무 오래되어 신규 기능 추가가 어려움 Moment.js 개발자 중 한 명은 Moment.js의 단점을 극복하기 위해 Luxon.js라는 라이브러를 만들었으며, 날짜 및 시간을 조작하는 라이브러리는 Luxon.js 외에도 Day.js, date-fns.js 등 여러 가지가 존재합니다. Moment.js의 단점을 극복하기 위해 다른 라이브러리 사용을 권장하지만, Moment.j.. JavaScript/라이브러리 2021. 12. 16.

• 

  [JavaScript]일반 함수와 화살표 함수 차이 화살표 함수(Arrow Function)란? 화살표 함수는 ES6에 도입된 새로운 기능으로 일반 함수를 보다 간결하게 작성할 수 있습니다. 일반 함수와 화살표 함수는 동작 방식은 비슷하지만, 몇 가지 차이가 존재합니다. 이번 포스팅에서는 일반 함수와 화살표 함수의 차이를 소개합니다. 구문(Syntax) [일반 함수] function addFunc(x, y) { return x + y; }; [화살표 함수] let addFunc = (x, y) => {return x + y}; 화살표 함수는 일반 함수에 비해 많은 코드 입력을 요구하지 않습니다. 더 짧은 코드로 동일한 결과를 얻을 수 있습니다. 화살표 함수는 본문이 짧은 경우 중괄호와 return문을 생략할 수 있습니다. let addFunc = (x, .. JavaScript/함수 2021. 12. 15.