js get object values from string path

예시 데이터

const data = {
    student: {
      info: {
        roll_number: "10",
        scores: {
          math: 95
        }
      },
      class: "1st"
    },
    teacher: {
      name: "Mr. Smith",
      school: "ABC"
    },
    roll_number: "wrong"
  };

 

input: `path = 'student.info.roll_number'`
output: `"10"`

 

input: `path = 'student.class'`
output: `"1st"`

 

input: `path = 'roll_number'`
output: `"wrong"`

 

 

함수 작성하기 

function getObjectValue(obj, path) {
}

 

방법1.

function getObjectValue(obj, path) {
    const pathArr = path.split('.')
    
    let current = obj;
    for (const path of pathArr) {
        current = current[path]
        if (!current) return undefined
    }
    return current
}

 

포인트는 각 path를 for로 순회할 때 마다 찾은 value 값을 저장하는 obj(위 코드에서는 current 변수)가 필요하다.

그래야 nested object 구조에서 가장 먼저 나오는 path를 찾아서, current 에 계속 재 할당해가면서 원하는 value 값을 찾을 수 있다.

예를들면 path가 `'student.info.roll_number'` 라면 아래와 같다.

 

current 변수 값 디버깅

for 이전

{
  student: { info: { roll_number: '10', scores: { math: 95 } }, class: '1st' },
  teacher: { name: 'Mr. Smith', school: 'ABC' },
  roll_number: 'wrong'
} 

 

current[student]

{ info: { roll_number: '10', scores: { math: 95 } }, class: '1st' }

 

current[info]
{ roll_number: '10', scores: { math: 95 } }  

 

current[roll_number]
10  

 

 

방법2.

function getObjectValue(obj, path) {
    const pathArr = path.split('.')
    return pathArr.reduce((acc, curr) => {
        return acc? acc[curr] : undefined
    }, obj)
}

 

방법1과 마찬가지로 path를 우선 . 단위로 나눈 array를 기준으로 loop를 돌린다.

좀 더 js스러운 고차함수인 reduce 함수를 이용해서 훨씬 짧은 코드를 풀 수 있다. 처음 initial value를 input으로 받는 obj 로 설정하고, 각 path 스트링 값을 `curr`라는 reduce 함수 내부의  current value 변수로 담아준다. path가 다 돌때까지 path로 찾은 객체값을 acc라는 누적 변수에 재할당해주는 거다.

 

여기서 포인트는 4번째 줄에 `acc`가 존재하는지를 확인하지 않으면, TypeError: Cannot read properties of undefined (reading 'path') 에러가 난다. 따라서 acc 라는 누적값이 없으면 바로 undefined를 리턴해줘야 한다.

 

예를들어 `path = 'nonexistent.path'` 예시일때, reduce 함수 내부의 acc와 curr를 디버깅 해보면 아래와 같다. 

 

1st loop

누적 acc

{
  student: { info: { roll_number: '10', scores: [Object] }, class: '1st' },
  teacher: { name: 'Mr. Smith', school: 'ABC' },
  roll_number: 'wrong'
}  

현재 curr

nonexistent 

 

2nd loop

누적 acc

undefined 
현재 curr

path

 

두번째 루프를 돌때 이미가지고 있는 누적 acc값은 undefined 값인데 여기다 path 라는 키값을 찾으려니 에러가 난다. 

 

 

방법1, 2 모두 Time Complexity는 `O(N)`이 된다. 

 

테스트 코드 

function testGetObjectValue() {
  const data = {
    student: {
      info: {
        roll_number: "10",
        scores: {
          math: 95
        }
      },
      class: "1st"
    },
    teacher: {
      name: "Mr. Smith",
      school: "ABC"
    },
    roll_number: "wrong"
  };

  const tests = [
    { path: 'student.info.roll_number', expected: "10" },
    { path: 'student.class', expected: "1st" },
    { path: 'teacher.name', expected: "Mr. Smith" },
    { path: 'teacher.school', expected: "ABC" },
    { path: 'student.info.scores.math', expected: 95 },
    { path: 'roll_number', expected: "wrong" },
    { path: 'student.grade', expected: undefined },
    { path: 'student.info.roll_number.number', expected: undefined },
    { path: 'student.info', expected: data.student.info },
    { path: 'nonexistent.path', expected: undefined },
  ];

  let passed = 0;

  for (const { path, expected } of tests) {
    const result = getObjectValue(data, path);
    const isEqual = JSON.stringify(result) === JSON.stringify(expected);
    console.log(
      isEqual
        ? `✅ Passed: ${path} => ${JSON.stringify(result)}`
        : `❌ Failed: ${path} => ${JSON.stringify(result)}, expected ${JSON.stringify(expected)}`
    );
    if (isEqual) passed++;
  }

  console.log(`\n🧪 ${passed}/${tests.length} tests passed.`);
}

// 실행
testGetObjectValue();