javascript79 [javascript] 자바스크립트 JSON Object 비교하기 (값비교, 두 JSON 비교) 안녕하세요. 오늘은 자바스크립트에서 JSON 구조로 된 Object 간 값 비교하는 여러 가지 방법을 정리해 보려고 합니다. 일반적인 Object값이라면 간단하게 === 비교를 하면 되지만 JSON처럼 key, value 구조를 가진 데이터는 바로 비교가 불가능합니다. 그럼 어떤 방식으로 비교하여 처리를 하는지 알아보도록 하겠습니다. 1. 동일한 JSON 데이터 비교 우선 aObject라는 json 구조의 데이터와 bObject라는 json 구조의 데이터의 값을 동일하게 준비하였습니다. 비교하는 방법은 총 5가지로 준비를 해봤습니다. 1. 일반 비교 const compare1 = aObject === bObject; 첫번째는 가장 단순한 === 비교입니다. 보통 일반적인 타입의 데이터를 비교할 때 많이 .. 2023. 1. 15. [javascript] 자바스크립트 "[object Object]" is not valid JSON (syntaxError 문법 에러 처리) 안녕하세요. 오늘은 자바스크립트에서 JSON.parse() 함수를 사용하다 보면 자주 마주하는 에러를 포스팅하려고 합니다. 에러 내용은 "[object Object]" is not valid JSON 입니다. 위의 에러 내용은 보통 JSON.parse() 함수를 사용하여 JSON 타입의 문자열 데이터를 다시 JSON 타입의 데이터로 parsing 하는데 이미 JSON 타입의 데이터인데 JSON.parse()를 사용하여 발생하게 되는 에러입니다. 에러 내용에서도 볼 수 있듯이 [object Object] 데이터는 JSON 타입의 데이터인데 강제로 JSON으로 만들어 달라고 해서 에러가 발생을 한 상태입니다. 위의 상황을 재현한 소스 코드를 작성하였습니다. 위의 소스 코드를 보게 되면 dataObj는 이미 .. 2023. 1. 14. [javascript] 자바스크립트 encodeURIComponent, decodeURIComponent 알아보기 오늘은 자바스크립트의 encodeURIComponent와 decodeURIComponent에 대한 내용을 주제로 정리해 보려고 한다. encodeURI, decodeURI와 유사하지만 예약된 문자를 조금 더 인코딩 & 디코딩해주는 차이가 있다. 웹 애플리케이션을 개발한다면 URL에 속한 URI가 정말 중요한 요소이고, 상황에 따라서 이 URI를 인코딩 & 디코딩하는 것은 매우 중요한 작업이다. 자바스크립트에서는 이 작업을 간편하게 처리할 수 있도록 두 함수를 제공하고 있으며, 각 함수가 어떤 특징이 있는지 하나씩 살펴보도록 하자.encodeURIComponentencodeURIComponent 함수는 URI 구성 요소를 안전하게 인코딩하는 데 사용된다. 이 함수는 URI에서 특수한 의미를 갖는 문.. 2023. 1. 13. [javascript] Expected property name or '}' in JSON at position 1 at JSON.parse (자바스크립트 문법 에러 처리) 오늘은 자바스크립트의 JSON.parse 에러에 대해서 원인과 해결 방법에 대해 정리해 보려고 한다. 에러 내용에서도 유추할 수 있듯이 JSON.parse() 함수 사용 중에 발생한 에러라고 볼 수 있다. 보통 이 에러는 JSON 형식이 잘못되었거나 파싱할 수 없는 문자열이 있을 때 발생하게 된다. 에러 발생 내용 JSON.parse() 에러 원인 자바스크립트에서 JSON을 다루다보면 에러가 종종 발생하곤 한다. 특히 JSON 형식으로 파싱할 때 위의 에러가 발생하는 경우가 많은데 어떤 상황에 주로 발생하는지 유형을 확인해 보도록 하자. JSON 형식 오류 JSON 형식이 올바르지 않은 경우에 발생할 수 있다. JSON 객체의 키는 반드시 문자열이어야 하며, 쌍 따옴표로 둘러싸인 문자열이어야 한다. 예를.. 2023. 1. 12. [javascript] 자바스크립트 배열 요소 삭제 (slice, splice, delete, filter 비교 정리) 안녕하세요. 오늘은 자바스크립트에서 배열의 특정 요소를 삭제하는 방법들을 포스팅하려고 합니다. 배열의 요소를 삭제하는 방법은 크게 4가지로 정리를 하였습니다. 하나씩 예제 소스 코드와 함께 알아보도록 하겠습니다. 1. slice 먼저 slice 기능에 대한 예제 소스 코드입니다. 배열 데이터를 간단하게 만들었고, 해당 배열의 요소를 삭제하였습니다. 예시 : arr.slice(2, 4) 특징 : 삭제 대상 요소들을 반환, 원본 배열 데이터는 변하지 않음 start : 삭제 대상 시작 인덱스 end : 삭제 대상 마지막 인덱스 (end 인덱스는 해당되지 않음) // 2번 요소에서부터 1개 삭제 var slice = dataList.slice(2, 4); 위의 내용과 같이 배열의 2번째부터 4번째까지 삭제를 .. 2023. 1. 8. [javascript] 자바스크립트 특정 문자 찾기 (indexOf, includes, search 비교 정리) 안녕하세요. 오늘은 자바스크립트에서 기본으로 제공하는 특정 문자를 찾는 기능들에 대해 정리하였습니다. indexOf, includes, search 세 기능에 대해 사용 방법 1. indexOf 먼저 indexOf의 예제 소스 코드입니다. 테스트로 문자열 데이터와 배열 데이터를 세팅하였고, 테스트 데이터를 대상으로 찾을 일반 keyword 값과 정규식 keyword 값도 같이 세팅했습니다. indexOf는 찾고자 하는 특정 문자값이 있으면 해당 문자값의 인덱스 번호를 반환하게 됩니다. 'abcde'에서 'c' 문자값의 인덱스는 2이며, 반환값은 2가 됩니다. 각각 데이터 유형별로 keyword 정보를 indexOf를 사용하여 값이 있는지 로그를 통해 확인해 보겠습니다. * 실행 결과 indexOf를 이용.. 2023. 1. 7. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음
