이전 포스트에서 사용자 입력 검증을 하면서 해당 입력에 대한 alert를 구현하고자 변수의 이름 추출하는 기능을 고민하다가 stackoverflow에서 답을 찾을 수 있었다.

먼저, 어떤 로직을 통해서 변수를 추출할 수 있는가하면 Object.keys() 또는 for ... in을 이용하는 것이다. 한 마디로 key-value로 이루어진 object를 이용하여 key값을 추출하면 변수의 이름을 얻을 수 있는 방식이다.

말로만 해서는 이해하기 어려우니 Varible to String -> varToString함수를 통해서 예시를 들겠다. 그리고 typescript로 진행하므로 이 함수에 대한 type 정의부터 해보자

🍀 define interface

interface VarToString{
  [key: string]: any;
}

value type으로 any를 지정했는데 value값이 어떤 값인지 예측이 되지 않으므로 any를 썼다.

🍀 implement varToString

varToString을 구현하기 전에 먼저 Object.keys()와 for ... in을 살펴보자

Object.keys()

Object.keys()는 주어진 객체의 속성 이름들(key)을 배열에 담아서 반환해주는 method이다.

const personInfo = {
  name: "someone",
  age: 28,
  address: "seoul",
};

console.log(Object.keys(personInfo));

 ['name', 'age', 'address']이 출력된다.

for ... in statement

const personInfo = {
  name: "someone",
  age: 28,
  address: "seoul",
};

for (const key in personInfo) {
  console.log(key);
}

출력

name
age
addres

위의 Object.keys()와 for ... in의 예제를 보면 공통적으로 key값을 뽑아낼 수 있는 것을 알 수 있다. 여기서 key값과 변수이름을 추출하는 것과 무슨 상관이냐고 생각할 수 있지만 key값을 뽑아낼 수 있다는 것을 이용하여 변수의 이름을 뽑아낼 수 있다!! 즉, key에 변수이름을 value에는 변수값을 넣어주면 구현할 수 있다.

varToString function

varToString

import VarToString from '../interfaces/VarToString';

export default function varToString(varObj: VarToString){
  if (varObj != null && typeof varObj === 'object'){
    return Object.keys(varObj)[0]
  }else{
    throw new Error(
      "invalid parameter, variable shoudle be enclose with curly brackets like -> {variable}"
    );
  }
}

이제 변수이름을 추출하는 함수를 만들었다. 이제 테스트를 해 보기 위해 {name: 'someone}이란 object를 넣었을 때 name이 나오는지 확인해보자

const name = 'someone;
const varName = varToString({ name });
console.log(varName);

출력 🔽

🚀 마치며

변수의 이름을 어떻게 추출할 수 있나 많이 헤맸다... 하지만 stackoverflow 행님의 도움으로 해결할 수 있었다. 개발 공부를 하면서 stackoverflow의 도움도 많이 받지만, geeksforgeeks, 다른사람의 blog, 회사의 tech blog, medium, reddit등 도움되는 사이트들이 많다. 이러한 것들이 없다면 어떻게 개발할까라는 생각에 공감하는 개발자가 많다고 생각이 든다. 다른 개발자 분들이 올려놓은 코드를 통해 많은 것을 배울 수 있다. 개개인마다 각자의 스타일로 코드를 작성하는 것이 있겠지만 훌륭한 다른 사람들을 통해서 고칠점을 고친 나만의 아름다운 코드 스타일을 만들고 싶다.🚀

📒 참고

stackoverflow