[Javascript] 리스트 데이터는 배열이 좋다!

너무 당연해서 알려주지 않는 건 팩트

 

편안

---

 자바스크립트로 코딩을 하다 보면 리스트 형식의 데이터를 다뤄야 하는 일이 당연히 많습니다. 그리고 그 데이터를 다루는 데 있어서 서버에서 어떤 식으로 보내줄지 항상 고민을 하는데요, 그냥 결론부터 말씀드립니다.

 

가능하면 배열안에 객체를 넣으세요.

 

 앞으로 자바스크립트를 쓰면서 코딩을 하게 되면 filter, find, map, sort 등 리스트에 특화된 많은 함수들을 만날 수 있게 됩니다. 그런데 함수들을 찾아보면 알겠지만 배열일 경우에 사용하는 함수들입니다. 아마 코딩 좀 해본 분들은 "당연히 리스트 형식의 데이터는 배열 형식이지 다른 게 있나?"라고 하겠지만 초보의 눈에서 보면 당연한 것이 아니게 됩니다. 제가 그랬거든요.

 

 예전에 코딩을 독학하면서 만들었던 첫번째 프로젝트에서 리스트를 다룬 제 방법을 보여드립니다.

const informaion = {
    client: 'arikong',
    age: '4',
    gender: 'mail',
    codes: [ 'a1', 'a2', 'a3', 'a4', 'a5' ],
    values: [ 'b1', 'b2', 'b3', 'b4', 'b5' ]
}

 어떤 고객의 정보, 해당하는 코드, 코드에 대한 점수를 객체로 표현했습니다. 위 코드는 짧게 해 놓았지만 사실 20개가 넘고 values의 값도 간단한 배열로 표현했지만 7~8가지 값을 가지고 있었어요. 그리고 데이터베이스에는 각 code값을 설명하는 데이터가 들어있습니다.

 

 그 당시 생각으로는 이제 데이터베이스로 codes값만 보내면 따로 가공할 필요없이 바로 설명하는 값을 얻을 수가 있고, 리스트를 만드는 데 있어서도 codes값을 for문으로 돌려서 쭉 표현하고 values값은 index값으로 가져올 수 있으니 되겠다!라는 생각이었습니다.

for ( let i=0; i < informaton.codes.length; i++ ) {
	let code = information.codes[i]
	let value = information.values[i]
	console.log( code, value)
}

 사실 기능상으로는 문제가 없습니다. 구현하면서 values의 값이 있는지 체크해보는 함수가 늘어나서 그게 좀 짜증났지만 가능했었거든요. 그런데 이 리스트에서 특정한 값만 찾거나, 특정값만 삭제하는 작업을 할 때 혼돈이 찾아왔습니다. 누가 그랬죠? 시작이 반이라고? 제 생각엔 그 이상인거 같아요. 처음부터 뜯어고쳐야 했거든요.

 

---

 만약 위 데이터를 배열로 만들었으면 어땠을까? 라고 생각하는 순간 새로운 세상이 열렸습니다.

const information = {
    name: 'arikong',
    age: '4',
    gender: 'male',
    codes: [
    	{ code: 'a1', value: 'b1' },
        { code: 'a2', value: 'b2' },
        { code: 'a3', value: 'b3' },
        { code: 'a4', value: 'b4' },
        { code: 'a5', value: 'b5' }
    ]
}

 언뜻보면 무슨 차이인가 싶겠지만 이제 함수를 사용함에 있어서 객체 하나를 찾아서 그 값을 찾고 수정하고 삭제하는데 상당히 편해질 것이라는 것을 예상할 수 있습니다. 이전 데이터에서는 index를 찾아서 각각의 배열마다 값을 수정해야 하고 확인해야 하는 반면에, 지금 데이터는 find함수를 통해서 바로 찾을 수 있고, filter를 이용해서 걸러낼 수도 있습니다.

 

 왜 그런지 모르겠지만... 저 배열안에 있는 객체의 모습을 보면 기분이 좋아져요. 훗...

---

 그리고 생각해봤습니다. 객체는 어떻게 표현되어야 하는 것일까? 예전 프로젝트에서는 그냥 Key값과 Value값을 갖는 데이터 표현방식, 또는 집합체라고 생각했었는데, 지금은 하나의 물건 또는 사람, 그 자체라는 생각을 합니다.

 

 예를 들어 사람 A, B, C가 있다고 했을 때, 예전에는 A, B, C의 나이를 묶고, 성별을 묶어서 객체로 만들었습니다. 특정한 집합을 만들었죠. 그렇게 되면 나이가 어떤지, 성별이 어떤지 한눈에 들어오지만, 어떤 사람의 나이와 성별을 같이 생각해야 할 때는 복잡해지게 됩니다. 

 

 이제 A, B, C를 따로 객체 하나하나 만들게 되면, 사람 한 명 한 명을 바라볼 수 있고 누가 어떤지 확인이 쉬워집니다. 그런데 나이만 따로 알고 싶고, 성별만 알고 싶은 일이 생기는데, 그럴 때는 자바스크립트 함수가 일을 쉽게 할 수 있게 도와줍니다. 코드가 짧아지죠. 읽기 쉬워집니다.

 

 코드 좀 해본 분이라면 당연히 알고있고, 자연스럽게 알게 되는 이 정보를 누군가는 궁금해하지 않을까 하면서 포스팅해봅니다.

 

제가 그래요... 내가 하고 있는 코딩이 맞나 싶을때가 있어요...