JavaScript/JavaScript 문법60 [JavaScript]객체 배열 정렬하는 방법 JavaScript에서 배열을 정렬하는 경우는 종종 있으며, 정렬해야 하는 기준은 객체의 특정 속성일 수 있습니다. 이번 포스팅에서는 객체를 요소로 가지는 배열을 정렬하는 방법에 대해 소개합니다. 다음은 객체를 요소로 가지며 정렬되지 않은 배열입니다. let pens = [ {color: 'red', price: 5000, brand: 'monami'}, {color: 'blue', price: 3000, brand: 'paker'}, {color: 'green', price: 4000}, {color: 'black', price: 1000, brand: 'abc'}, {color: 'yellow', price: 2000}, ] 배열 pens는 객체를 요소로 가지며, 모든 객체는 "color"와 "pri.. JavaScript/JavaScript 문법 2022. 1. 3. [JavaScript]소수점 반올림하는 방법 이번 포스팅에서는 JavaScript에서 소수점 반올림하는 방법들을 소개합니다. 목차 toFixed() 함수 Math.round() 함수 Math.floor() 함수 Math.ceil() 함수 toPrecision() 함수 toFixed() 함수 toFixed() 함수는 인수로 전달된 소수 자릿수로 반올림된 숫자를 문자열 타입으로 반환합니다. 다음은 toFixed() 함수 사용 예제입니다. (123.678).toFixed(); // 124 (123.678).toFixed(1); // 123.7 (123.678).toFixed(2); // 123.68 (123.678).toFixed(3); // 123.678 (123.678).toFixed(4); // 123.6780 typeof (123.678).toF.. JavaScript/JavaScript 문법 2021. 12. 24. [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]물음표 사용 방법, 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]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]코드 실행 시간 측정 방법 이번 포스팅에서는 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]rest와 spread 차이 rest 매개변수 rest 매개변수는 모든 요소를 배열로 모은 것이며, 여러 개의 함수 인수를 전달하는 경우 사용됩니다. function printNumber(one, two, ...rest) { console.log(one); console.log(two); console.log(rest); } printNumber(1, 2, 3, 4, 5, 6, 7); 실행 결과 위 예제에서 인수 one은 1을 참조하며 two는 2를 참조하며, 나머지 매개변수인 ...rest는 1과 2 이후에 전달된 모든 인수(3, 4, 5, 6, 7)를 참조합니다. 다음은 rest 매개변수를 구조 분해(destructuring)에 사용하는 예제입니다. let arrNumber = [1, 2, 3, 4, 5]; let [firstN.. JavaScript/JavaScript 문법 2021. 12. 14. [JavaScript]객체 변경을 방지하는 방법 JavaScript에서 객체의 속성을 변경하지 못하도록 불변 객체를 만드는 세 가지 방법을 소개합니다. 목차 Object.freeze() 함수 Object.seal() 함수 Object.preventExtensions() 함수 Object.freeze() 함수 Object.freeze() 함수를 사용하여 객체를 동결시켜 수정되는 것을 방지할 수 있습니다. 다음은 Object.freeze() 함수의 기능입니다. 속성 제거 불가능 새로운 속성 추가 불가능 기존 속성 값 변경 불가능 객체의 속성은 delete 키워드로 제거할 수 있습니다. 하지만, Object.freeze() 함수를 사용하여 동결시킨 객체의 속성은 제거되지 않습니다. const userInfo = { name: 'Kang', age: 30 }.. JavaScript/JavaScript 문법 2021. 12. 6. [JavaScript]객체(Object)의 freeze(), seal() 함수의 차이점 이번 포스팅에서는 JavaScript의 Object.freeze() 함수와 Object.seal() 함수의 차이점을 소개합니다. 목차 JavaScript의 불변성 Object.freeze() 함수 Object.seal() 함수 JavaScript의 불변성 JavaScritp의 불변성은 더 이상 무언가를 변경할 수 없는 상태입니다. const 키워드로 변수를 선언할 경우 해당 변수는 상수로 정의되며 값을 변경할 수 없습니다. const testValue = 'testValue'; testValue = 'Value Update'; 실행 결과 하지만, 객체는 변수와는 다르게 동작합니다. 객체는 값을 가지지 않으며, 값을 참조합니다. 변수는 Call by value 객체는 Call by reference 값을 .. JavaScript/JavaScript 문법 2021. 12. 6. [JavaScript]객체(Object)가 비어있는지 체크하는 방법 이번 포스팅에서는 JavaScript의 객체(Object)가 비어있는지 체크하는 방법을 소개합니다. 목차 Object.keys() 함수와 constructor 속성 사용 JSON.stringify() Lodash 라이브러리의 isEmpty() 함수 for ... in 반복문과 hasownProperty() 함수 사용 Object.keys() 함수와 constructor 속성 사용 Object.keys() 함수와 constructor 속성을 같이 사용하여 객체가 비어있는지 확인할 수 있습니다. 다음은 Object.keys() 함수와 constructor 속성을 사용한 예제입니다. const obj1 = { key: ''} ; console.log(obj1 && Object.keys(obj1).length .. JavaScript/JavaScript 문법 2021. 12. 2. [JavaScript]JSON parse 와 JSON stringify 차이 JSON이란? JSON(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JavaScript 전용으로 만들어졌지만, 현재는 Java, Python, Go, C#과 같은 다른 프로그래밍 언어에서도 JSON 형식을 사용하여 클라이언트-서버 간 데이터를 공유하는데 사용되고 있습니다. 이번 포스팅에서는 JSON.parse와 JSON.stringify의 차이를 설명합니다. 목차 JSON.parse JSON.stringify JSON.parse JSON.parse는 JSON 문자열을 파싱합니다. 파싱이란? 문장을 문법적 부분으로 나누고 나누어진 부분을 식별하는 것입니다. JSON은 문장을 : 관계로 식별합니다. 클라이언트-서.. JavaScript/JavaScript 문법 2021. 12. 2. 이전 1 2 3 4 5 다음