Javascript203

• 

  [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.

• 

  [JavaScript]JSON.parse 및 JSON.stringify를 객체 복사에 사용하면 안되는 이유 JavaScript에서 중첩된 객체를 비교하는 작업은 까다로운 작업입니다. 특히 React 생명주기 함수에서 prevState와 현재 state를 비교할 때, 비교해야 하는 값이 중첩된 객체 또는 배열인 경우 많은 어려움에 직면합니다. 저는 JavaScript의 중첩된 객체와 배열을 공부하면서 두 개의 중첩된 객체를 비교하는 방법으로 JSON.stringify가 좋은 방법인줄 알았습니다. 하지만, 객체에 대해 좀 더 공부하면서 JSON.stringify를 사용해야 하는 경우도 있고 사용하지 말아야 하는 경우가 있다는 것을 알게 되었습니다. 이번 포스팅은 중첩된 객체를 JSON.parse 및 JSON.stringify를 사용하여 복사하였을 경우 어떠한 문제가 발생하는지 알아보도록 합니다. 목차 얕은 복사의.. JavaScript/JavaScript 문법 2021. 12. 2.

• 

  [JavaScript]배열에 중복 값이 있는지 확인하는 방법 이번 포스팅은 JavaScript에서 배열에 중복 값이 있는지 확인하는 방법을 소개합니다. 목차 프리미티브 배열(Primitive of Array)과 객체(object) 프리미티브 배열(Primitive of Array)에서 중복 감지 객체 배열(Array of Objects)에서 중복 감지 프리미티브 배열(Primitive of Array)과 객체(Object) 프리미티브 배열(Primitive of Array)은 JavaScript의 원시 값을 요소로 하는 배열입니다. JavaScript의 원시 값 string, number, bigint, boolean, undefined, null 다음 문자열 배열에서 'A' === 'A'는 동일하므로 true입니다. const arr = ['A', 'A', 'B.. JavaScript/배열 2021. 12. 1.

• 

  [JavaScript]배열이 비어있는지 확인하는 방법 이번 포스팅에서는 JavaScript에서 배열이 비어 있는지 확인하는 방법을 소개합니다. Array.length는 배열의 길이(length)를 반환합니다. 배열이 비어 있는지 확인하려면 length 속성이 0인지 체크합니다. const arr = []; if(arr !== 0) { console.log("Not Empty"); } JavaScript에서 0, null, undefined는 거짓으로 평가됩니다. 즉, 배열의 길이가 0인 경우 거짓이므로 if문과 같은 조건문에서 false로 평가됩니다. 다음은 위에서 작성한 코드를 심플하게 작성하였습니다. const arr = []; if(arr) { console.log("Not Empty"); } JavaScript는 타입을 체크하지 않기 때문에 변수(함.. JavaScript/배열 2021. 12. 1.

• 

  [JavaScript]배열을 결합하는 방법 이번 포스팅에서는 두 개 이상의 1차원 배열을 결합하는 방법을 소개합니다. 목차 concat() 함수 Spread 연산자(...) push() 함수 concat() 함수 가장 기본적인 방법은 concat() 함수를 사용하여 두 개의 배열을 연결하는 것입니다. concat() 함수는 배열을 결합하고 새로운 배열을 반환합니다. console.log([1,2,3].concat([4,5,6])); console.log([4,5,6].concat([1,2,3])); 실행 결과 세 개 이상의 배열을 결합하는 경우 빈 배열( [] )을 활용할 수 있으며, concat() 함수에 여러 개의 배열을 인수로 전달합니다. let concatArr = [].concat([1,2], [3,4], [5,6]); console.l.. JavaScript/배열 2021. 11. 29.

• 

  [JavaSciprt]배열을 비교하는 방법 이번 포스팅에서는 JavaScript에서 두 개의 배열을 비교하는 방법을 소개합니다. 목차 Array.prototype.every() Lodash의 isEqual() 함수 JSON.stringify() 정리 Array.prototype.every() 배열의 every() 함수를 사용하여 배열의 모든 요소가 비교 대상의 배열에도 존재하는지 확인할 수 있습니다. 길이가 동일하고 한 배열의 각 요소가 비교 대상의 배열에도 존재하면, 두 배열은 동일하다고 할 수 있습니다. const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; const sameArray = arr1.length === arr2.length && arr1.every((value, idx) => value === a.. JavaScript/배열 2021. 11. 29.

• 

  [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.

• 

  [React]객체 배열에서 값 변경 이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다. 다음과 같이 객체의 배열(objArray)을 가지는 state가 있다고 가정합니다. state = { objArray: [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" } ] } 그리고 code가 "B"인 name의 값을 "Update"로 변경해야 합니다. 순서 1. 배열의 요소 찾기 먼저 객체의 배열에서 키, ID, 코드처럼 유일한 값이라고 생각되는 속성을 기준으로 요소.. React/React 문법 2021. 11. 9.

• 

  [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.