JavaScript 코드 리팩터링

1. if문을 자체함수로 추출한다.

const cats = [ 
	{ name: 'Mojo', months: 84 }, 
	{ name: 'Mao-Mao', months: 34 }, 
	{ name: 'Waffles', months: 4 }, 
	{ name: 'Pickles', months: 6 } ] 
var kittens = [] 
for (var i = 0; i < cats.length; i++) {
	if (cats[i].months < 7) {
    	kittens.push(cats[i].name) 
    } 
} 
console.log(kittens)

위와 같은 코드가 있다면,

const isKitten = cat => cat.months < 7

자체함수로 추출하여 if문 부분을

if (isKitten(cats[i])) {	}

로 변경 하는 것이다.

장점

• 가독성이 좋다.
  의도가 명확해진다. 함수의 변수명에 의도를 적을 수 있다.
• 재사용이 가능하다.
  코드는 항상 재사용이 가능하게 만들어야한다.

2. cat의 name를 추출하는 부분을 자체함수로 변경

cat[i].name

의 부분을
for문 밖에서 자체함수로 지정한다.

const getName = cat => cat.name

filter와 map 으로 for문에서 벗어난다

const kittens = cat.filter(isKitten).map(getName)

3. filter 와 map 을 자체함수로 변경

const getKittenNames = cats =>
	cats.filter(isKitten)
    .map(getName)

그리고 함수를 호출해 변수에 넣어준다.

const cats = getKittenNames(cats)

참고