JavaScript/JavaScript 문법60 [JavaScript]JSON.parse 및 JSON.stringify를 객체 복사에 사용하면 안되는 이유 JavaScript에서 중첩된 객체를 비교하는 작업은 까다로운 작업입니다. 특히 React 생명주기 함수에서 prevState와 현재 state를 비교할 때, 비교해야 하는 값이 중첩된 객체 또는 배열인 경우 많은 어려움에 직면합니다. 저는 JavaScript의 중첩된 객체와 배열을 공부하면서 두 개의 중첩된 객체를 비교하는 방법으로 JSON.stringify가 좋은 방법인줄 알았습니다. 하지만, 객체에 대해 좀 더 공부하면서 JSON.stringify를 사용해야 하는 경우도 있고 사용하지 말아야 하는 경우가 있다는 것을 알게 되었습니다. 이번 포스팅은 중첩된 객체를 JSON.parse 및 JSON.stringify를 사용하여 복사하였을 경우 어떠한 문제가 발생하는지 알아보도록 합니다. 목차 얕은 복사의.. JavaScript/JavaScript 문법 2021. 12. 2. [JavaScript]console 객체 사용 방법 console 객체란? JavaScript의 console 객체는 브라우저의 콘솔에 접근을 할 수 있도록 해주는 객체입니다. 개발자는 console 객체를 활용하여 코드에서 사용한 변수의 값을 출력할 수 있으며, 올바른 값이 출력되었는지 디버깅 할 수 있습니다. 이번 포스팅은 console.log() 이외에도 유용한 기능을 소개합니다. 목차 console.log() console.error() console.warn() console.clear() console.time() 및 console.timeEnd() console.table() console.assert() console.group() 및 console.groupEnd() console.log() console.log()는 주로 콘솔에 전달된 .. JavaScript/JavaScript 문법 2021. 11. 29. [JavaScript]Object.assign() 함수와 Object.create()의 차이점 이번 포스팅에서는 Object.assign() 함수와 Object.create() 함수의 차이점을 소개합니다. 목차 Object.assign() 함수 Object.create() 함수 핵심 내용 Object.assign() 함수 Object.assign() 함수는 열거 가능한 속성(enumerable properties)을 복사하여 새로운 객체를 반환합니다. 위에서 언급한 열거 가능한 속성은 for...in 루프 또는 Object.keys() 함수를 사용하여 접근할 수 있는 속성을 의미합니다. 다음 코드는 for...in 루프를 사용하여 student의 모든 속성을 접근하는 예제입니다. const student = { code: 1000, name: 'Kang', age: 29 }; for (const .. JavaScript/JavaScript 문법 2021. 11. 16. [JavaScript]배열에서 임의의 요소를 가져오는 방법 이번 포스팅에서는 배열에서 임의의 요소를 가져오는 방법을 소개합니다. 목차 Math.random Lodash sort() 함수로 섞기(Shuffle) Math.random Math.random 함수를 사용하여 배열에서 임의의 인덱스를 가져올 수 있습니다. 그런 다음 랜덤한 인덱스를 사용하여 배열에서 요소를 가져올 수 있습니다. 다음은 Math.random() 함수를 사용하여 배열에서 랜덤한 값을 추출하는 예제입니다. const strArray = ['A', 'B', 'C', 'D', 'E']; const randomValue = strArray[Math.floor(Math.random() * strArray.length)]; Math.random() 함수는 0 ~ 1 사이의 숫자를 반환합니다. 그리고 0.. JavaScript/JavaScript 문법 2021. 11. 10. [JavaScript]var, let, const 차이 및 함수 유효범위 이번 포스팅에서는 ES6부터 추가된 let, const 키워드를 사용하여 변수를 선언하는 방식 그리고 기존의 var 키워드를 사용하여 변수를 선언하는 방식의 차이점과 함수 유효범위에 대해 소개합니다. 목차 var 함수 유효범위 let 또는 const 결론 var var 키워드로 선언된 변수는 값을 재할당 또는 수정할 수 있습니다. var varValue = 100; varValue = 200; var 키워드로 선언된 변수는 함수 내부에서만 사용할 수 있으며, 함수 외부에 생성된 변수는 전역 변수입니다. 다음 코드에서 var로 선언된 변수는 함수 내부에서 선언되었기에 함수 외부에서는 사용할 수 없습니다. function PrintVarValue() { var varValue = 100; console.lo.. JavaScript/JavaScript 문법 2021. 11. 9. [JavaScript]Array.flat() 함수로 배열 병합 이번 포스팅에서는 배열을 병합하는 Array.flat() 함수를 소개합니다. 목차 Array.flat() 대체 솔루션 Array.flat() Array.flat() 함수는 지정한 깊이까지 재귀적으로 이어 붙인 1차원 배열을 생성합니다. 다음은 2차원 배열을 flat() 함수로 이어붙인 예제입니다. const arr = [['A', 'B'] , 'C', ['D']] const flatArr = arr.flat(); console.log(flatArr); // ['A', 'B', 'C', 'D'] Array.flat() 함수의 매개변수 array.flat() 함수의 매개변수에는 중첩 배열에서 평탄화하고자 하는 깊이의 값을 설정하며, 기본값은 1입니다. 즉, 다음 코드는 동일합니다. array.flat(); .. JavaScript/JavaScript 문법 2021. 11. 8. [JavaScript]const와 Object.freeze()의 차이 이번 포스팅에서는 const와 Object.freeze()의 차이를 소개합니다. 목차 개요 const Object.freeze() 개요 ES6은 출시 이후 몇 가지 새로운 기능과 함수를 JavaScript에 도입했습니다. 새로운 기능 중에는 Object.freeze() 함수와 const가 존재합니다. Object.freeze() 함수와 const는 비슷한 특징을 가지고 있지만, 완전히 다르게 동작합니다. const const 키워드로 생성된 변수는 값을 재할당할 수 없습니다. const 키워드로 생성된 상수 변수에 값을 재할당하려고 하면 TypeError가 발생합니다. Object.freeze() freeze는 "얼리다"라는 의미로 freeze() 함수는 "객체를 동결하기 위한 함수"입니다. 불변 객체와.. JavaScript/JavaScript 문법 2021. 11. 8. [JavaScript]캐시(Cache) 사용 방법 이번 포스팅에서는 JavaScript에서 캐시(Cache) API를 사용하는 방법을 소개합니다. 목차 Cache 란 Cache API 정리 Cache 란? 캐시는 데이터나 값을 미리 복사해 놓는 임시 저장소입니다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다. 캐시는 웹에도 존재하며, 웹 캐시(web cache) 또는 HTTP 캐시(HTTP cache)라고 말합니다. 웹 캐시에는 서버-클라이언트 통신간 발생하는 정적 자산(HTML pages, CSS, JavaScript files, images, JSON 등)을 웹 캐시에 복사합니다. 캐시 API를 활용하면, 웹 캐시에 복사된 정적 자산들을 제어할 수 있습니다. 캐시 확인 window에서 ca.. JavaScript/JavaScript 문법 2021. 11. 8. [JavaScript]숫자 포맷 설정 JavaScript에서 숫자에 콤마 또는 포맷을 설정하는 방법을 소개합니다. 목차 Intl.NumberFormat 함수 toLocaleString 함수 참고 Intl.NumberFormat 함수 Intl.NumberFormat 함수는 숫자의 형식을 설정하는 함수로 지정된 지역의 통화 또는 백분율을 표시하는데 사용할 수 있습니다. Intl.NumberFormat 함수의 형식은 다음과 같으며, 지역을 설정하는 첫 번째 매개변수(locales)와 숫자를 다양하게 표현할 수 있는 두 번째 매개변수(options)가 존재합니다. new Intl.NumberFormat([locales[, options]]); locales(생략 가능) - 지역을 설정할 수 있습니다. - 'en-IN', 'ja-JP', 'en-US.. JavaScript/JavaScript 문법 2021. 11. 1. [JavaScript]==, === 차이 JavaScript에서 값을 비교하기 위해 == 연산자와 === 연산자를 사용합니다. 두 연산자는 값이 일치하면 true를 반환하며, 값이 일치하지 않으면 false를 반환합니다. 이번 포스팅에서는 == 연산자와 === 연산자에 대해 정리합니다. 목차 == 연산자 === 연산자 == 연산자 JavaScript는 타입 변환에 대해 유연하게 동작합니다. == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교합니다. 타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있습니다. 10 == 10 // true 10 == '10' // true true == 1 // true true == '1' // true true == 'true' // false.. JavaScript/JavaScript 문법 2021. 8. 25. [JavaScript]타입 확인 방법 JavaScript는 타입을 유연하게 처리할 수 있는 프로그래밍 언어입니다. 그래서 변수에 어떠한 값이 할당될지 예상하기가 어렵습니다. 이번 포스팅은 JavaScript에서 타입을 체크하는 3가지 방법인 typeof, instanceof, Object.prototype.toString을 정리합니다. 목차 typoeof instanceof Object.prototype.toString typeof typeof 연산자는 우측 피연산자의 타입을 문자열로 반환합니다. typeof 1 // "number" typeof 'code' // "string" typeof undefined // "undefined" typeof function () {console.log('code')} // "function" type.. JavaScript/JavaScript 문법 2021. 8. 20. [JavaScript]특정 문자열을 제거하는 4가지 방법 JavaScript에서 특정 문자열을 제거하는 4가지 유용한 방법을 소개합니다. substr(), substring(), slice(), replace() 4가지 함수를 사용하여 문자열을 제거할 수 있습니다. replace() 함수는 문자열을 대체하는 기능을 가졌지만, 특정 문자열을 빈 값('')으로 대체함으로써 제거하는 방법처럼 사용할 수 있습니다. 이번 포스팅은 위에서 소개한 4가지 함수 사용 방법을 정리하였습니다. substr() 함수를 사용하여 길이만큼 문자열을 추출 substr() 함수는 특정 위치에서 시작하여 길이만큼 문자열을 반환합니다. str.substr(start, length) start - 추출하고자 하는 문자열의 시작 위치입니다. - 음수일 경우 시작 위치는 문자열의 길이 + sta.. JavaScript/JavaScript 문법 2021. 8. 19. 이전 1 2 3 4 5 다음