학습목표

1) DRY, KISS 원칙 예시 코드 제시
2) 작성한 코드에서 변수화 판단과 인자로 받는 함수 작성

1. 재사용 가능한 함수

함수란? 한가지 일을 수행하는 코드가 블럭으로 묶여있는 것 (= 재사용 가능한 코드 블록)

• 기능이 많아지면 복잡할 수 밖에 없지만, 최소한 복잡도를 낮추어 비용을 최소화할 수 있음

1-2.함수를 잘 짤 수 있는 원칙들

1-2-1. DRY(Don't Refeat Yourself)

DRY: 중복 코드 줄이기 작업
장점: 로직의 관리 포인트가 줄어든다 = 여러 코드를 반복ㅈ거으로 수정하지 않아도 된다.

(before)
fetch("http://localhost:8000/products/1")

(after)
export const API = "http://localhost:8000";
fetch(`${API}/product/1`);

1-2-2. KISS(Keep It Simple, Stupid)

KISS: 함수를 가급적 단순하게 유지

• 함수 이름을 짓기 힘들다면 하나의 함수에 너무 많은 일을 몰아넣은 건 아닌지 검토하기

// DON'T
width = container > 960 ? (growWithContainer ? (container * 0.8) : 960) : container;

// DO
if (container > 960) {
  if (growWithContainer) {
    width = container * 0.8;
  } else {
    width = 960;
  }
} else {
  width = container;
}

위의 두가지 규칙이 무조건 지켜져야 하는 것은 아니다! 하지만 대부분의 경우에서 위의 규칙들은 읽기 좋고 쓰기 좋게 만들어준다.

2. 재사용 가능한 함수 만들어보기

재사용 가능한 함수 만드는 process

1. 일회성 코드

console.log("안녕하세요, 위코더!");
console.log("안녕하세요, 위코더!");

2. 변수화 할 수 있는 부분을 나누어보기

console.log("안녕하세요, " + "위코더" + "!");

3. 변수화 할 수 있는 부분을 함수의 인자로 받아오기

function sayHello(**person**) {
	console.log("안녕하세요, " + **person** + "!");
}

sayHello("위코더");

4. 변경되는 것이 많을 때, 인자의 갯수를 늘려보기

function saySomething(message, person) {
	console.log(message + ", " + person + "!");
}

saySomething("안녕하세요", "위코더");
saySomething("안녕히가세요", "위코더");

5. 인자가 다양한 타입에 대응하도록 하기

function saySomething(message, people) {
	const peopleArr = Array.isArray(people) ? people : [people]
	
	for (const person of peopleArr) {
		console.log(message + ", " + person + "!");
	}
}

saySomething("안녕하세요", "위코더1")
saySomething("안녕하세요", ["위코더1", "위코더2", "위코더3"]) 

2-2 알아두면 유용한 테크닉

1. 객체 계산된 속성명

const foo = "속성"
const data = {
	["계산된" + foo + "명"]: "객체 계산된 속성명 문법!"
}

console.log(data["계산된속성명"])
// "객체 계산된 속성명 문법!"

2. 함수 기본 매개변수

const sayHello = (message = "안녕하세요!") => {
	return message
}

sayHello() // "안녕하세요!"
sayHello("안녕히 가세요!") // "안녕히 가세요!"