JS 변수생성 팁

사소한것이라도 의미를 파악할 수 있는 이름으로!


const x = 1
const y = 2
const z = x+y

코드를 봤을때는 x,y,z 가 각각 어떤역할을 하는지 파악할 수 있다. 하지만 각각 변수들이 흩어져있고 복잡한 로직이 들어간다면 각 변수들이 무엇을 하기위한 변수인지 파악하기 힘들다.


const firstNumber = 1
const secondNumber = 2
const addResult = firstNumber+secondNumber


const clientId = 1
const userName = 'wonBeom'
const info = {
	'id':clientId,
	'name':userName
}

client와 user는 누가봐도 같은 의미를 가지고있어보인다. 단어를 user로 통일하고 info또한 user의 정보임을 명시해주자


const userId = 1
const userName = 'wonBeom'
const userInfo = {
	'id':userId,
	'name':userName
}


const div = document.createElement('div')
div.style.width = '100px'

위 코드에서 100px이라는 값이 어떤의미를 가지는지 알 방도가없다. 저 값은 div를 생성할때 기본값을 주기위함이다. 추후 재사용성, 의미부여 등을 위해 변수로 만들어서 사용하자.


const defaultWidth = 100
const div = document.createElement('div')
div.style.width = `${divWidth}px`


for (let i = 0; i < arr.length; i++) {
    const x = arr[i];
		doSomething(x)
	}

x가 어떻게 쓰이는지 무엇을 하는건지 알 방법이 없다.


for (let index = 0; index < userArr.length; index++) {
    const userId = arr[index];
		doSomething(userId)
	}