BFE.dev 라는 사이트를 찾게 되었다.
여기에는 프론트 엔드 관련한 많은 문제들이 있었는데 생각에 도움이 많이 되는 것같다. 해외 사이트라서 문제가 영어로 나와서 해석하는데 시간이 필요하지만 영어 공부도 할수 있으니 르끼 비키자나
첫번째로 easy로 문제를 풀기 위해서 자바스크립트 > 176 번 문제를 풀었다.
문제는 이렇다.
undefined 값을 null로 바꿔야 한다. 간단한 문제 였다.
이곳에는 테스트 케이스가 없는 것 같고 그냥 submit 하면 내 코드를 실행시켜주는데 테스트 케이스 처럼 실행시켜주는 것 같다.
just run above code 는 그냥 내거 함수 실행 시켜주는 버튼인데
내가 생각하는 테스트 케이스 넣고 함수를 실행시키고 console.log로 확인하는것 같다.
나는 submit 눌러서 테스트 케이스 하나 가져와서 실행시키면서 내 코드가 맞는지 테스트 하는 것으로 실행했다.
문제는 쉬울줄 알았는데
테스트 케이스를 확인해보니 중첩에 중첩에 중첩 이렇게 나타나 있어서 쉽지 않았다.
중첩에 중첩이라서 나는 재귀 함수를 활용해서 문제를 풀었다.
내가 푼 풀이이다.
function undefinedToNull(arg) {
// your code here
// console.log(typeof arg,typeof arg === 'object')
for(let key in arg){
const value = arg[key];
let newValue = deepInside(value);
arg[key] = newValue;
}
return arg
}
function deepInside(value){
// console.log(value,'deepinside')
if(typeof value==='object'){
for(let key in value){
const newValue = value[key];
value[key]=deepInside(newValue);
}
}
// console.log(changeValue);
return value===undefined ? null:value;
}
undefinedToNull({a: undefined, b: { c: { d: undefined, e: ['BFE.dev', undefined]} }} )
배열도 , 객체도 object 타입이기 때문에 object이면 재귀를 실행하도록 했다 .
이렇게 푸니 4개 문제 다 통과할수 있었다.
정확성, 그리고 성능 이런 것은 측정안하는 것 같다. 아직 처음이라서 잘 모르겠지만..
posts 버튼을 누르면 사람들이 해결한 코드를 볼수 있다.
프로그래머스는 문제를 풀어야지만 다른 사람의 코드를 볼수 있는데 여기서는 바로 볼수 있다. 과연 장점인가 ?
AI도 활용하게 했다.(버튼이 따로 있다 ) AI 버튼을 누르면 질문하는게 아니고 그냥 AI가 답을알려준다 ??..
다른 사람의 풀이를 구경했다.
const replacer = (key,val) => typeof val === 'undefined' ? null : val;
const undefinedToNull = (arg) => JSON.parse(JSON.stringify(arg,replacer));엄청 간결하게 문제를 해결했다. JSON.parse(JSON.stringify 이부분이 특히 새롭다.
GPT에게 이 부분에 대해서 물어봤다.
JSON.stringify가 null / undefined를 어떻게 다루냐면
🔹 1) 값 자체가 undefined
JSON.stringify(undefined) // undefined
→ 아예 결과가 undefined라서
JSON.parse(undefined) // ❌ 에러
🔹 2) 값 자체가 null
JSON.stringify(null) // "null"
JSON.parse("null") // null
3) 객체 안에 있을 때
JSON.stringify({ a: undefined }) // "{}"
JSON.stringify({ a: null }) // "{"a":null}"
❗ 중요 포인트
* undefined → 날아감
* null → 유지됨객체에 있을때 undefiend를 날려 버린다고 한다. 그래서 사용하지 말라고 했지만 코드에서는 replacer를 넣어서 잘했다고 말해줬다.
JSON.stringify
JSON.stringify 를 사용할때 나는 인자를 1개만 넣어 사용해왔는데
3개 까지 가능하다고 한다
JSON.stringify(value, replacer?, space?)인자 역할
value 변환할 값
replacer 값을 필터링 / 변환하는 함수 또는 배열
space pretty print용 들여쓰기
두번째 인 자 replacer는 값들을 순회한다
예)
JSON.stringify({ a: 1 }, (key, val) => {
console.log(key, val);
return val;
});
출력 :
key:”” val: { a: 1 }
key”:a” val: 1
객체 일때 : { a: 1, b: 2 }
출력 :
"" { a: 1, b: 2 }
"a" 1
"b" 2
자동으로 객체 , 배열 값들을 순회해주니 재귀를 사용안한 거구나. 라고 이해 할수 있었다.
하지만 이코드에 단점이 있었다.
실무에서는 사용하기 까다롭다 .
1️⃣ 타입 정보가 깨진다 (가장 치명적)
JSON.stringify의 근본적 한계야.
| 원래 값 | 결과 |
| ------------- | ------ |
| Date | 문자열 |
| Map / Set | {} |
| Function | null |
| Symbol | null |
| BigInt | ❌ 에러 |
👉 undefined만 바꾼다고 생각하면 착각
실제로는 JSON으로 못 표현하는 건 전부 손실
어떤 함수, Map, set이 들어와도 다 null,{}로 처리된다. 실무에서 사용하게 되면 에러가 날듯 하다.
