[section 8:함수 다루기] 클린코드 자바스크립트

함수 VS 메소드 VS 생성자

1. 함수

• 1급 객체 : 변수나 데이터에 담길 수 있음.
• 매개변수로 전달 가능(콜백함수)
• 함수가 함수를 반환(고차함수)

function func(){
return this;}


func()

2. 매서드 : 객체에 의존성이 있는 함수, OOP 행동을 의미함

const obj = {
method(){
return this;}}

obj.method()

3. 생성자 : class를 만드는 함수 ( 현재는 사용 X)

function Func(){
return this;}

const instance = new Func();

arguments VS parameter

• parameter : 함수의 정의에서 사용되는 값
• argument : 함수를 호출 할 때 사용하는 값

복잡한 파라미터 관리하기

-파라미터가 여러개라도 파라미터의 순서가 있으면 파악하기가 쉬움.

• 순서가 상관없으면 객체 구조할당을 통해서 받기

• 통으로 객체를 받기보다는, 구조할당을 통해서 객체를 받을 것!

• 섹션 6참고

• 파라미터가 없을 때 에러 던지기

function createCAr({name, brand,color,type}){
if(!name){}
  throw new Error('name is a required');
}

Default Value

• 구조분해 할당을 통해 객체를 받을 경우 기본 값을 세팅해서 받기

const required = (argName)=>{
throw new Error('required is'+argName);};

function createCarousel({
items = required('items'),
margin = 0,
center = false,
} = {}){
  //={}는 객체가 없을때를 표현함.
...
}
return ...

나머지 매개변수

• 스프레이드 오퍼레이터와는 다름!
• 배열로 받아서 사용 가능
• 파라미터 중 가장 나중에 받아야함.

//기존 코드
function sumTotal(){
return Array.from(arguments).reduce(acc,curr)=> acc+curr);
}

sumTotal(1,2,3,4,5,6,7,8,9,10);


//클린코드
function sumTotal(initValue, bonusValue,...args){
return args.reduce((acc,curr)=> acc+curr initValue);}

sumTotal(100,99,1,2,3,4,5,6)

void & return

• void함수에는 리턴을 사용하지 말 것.
• 무조건 리턴할 필요는 없음.
• push를 리턴하면 length가 나옴!
• 각 함수마다 반환값들이 있으니 공식문서를 참고해서 볼 것.
• void함수를 리턴하면 undefind가 나옴
• 리턴이 필요할 경우 네이밍부터 잘해주자.

화살표 함수

• 메소드 안에서 화살표 함수를 사용할 경우 this 조작법 주의하기
• arguments객체 사용 불가(rest parameter 사용 가능 ...args)
• call, apply, bind 모두 사용 불가
• 생성자 함수 사용 불가

콜백함수

• 공통되는 함수들을 받아서 새로운 함수를 만들 수 있음.

function register(){
  const isConfirm = confirm('회원가입에 성공했습니다.');
 
  if(isConfirm){
    redirectUserInfoPage();
  }
}

function login(){
  const isConfirm = conFirm('로그인에 성공했습니다.');
  
  if(isConfirm){
    redirectIndexPage();
  }
}

//위와같이 두개로 나뉘어져있는 함수를 
//콜백함수를 이용해서 아래와 같이 만들 수 있다.

function confirmModal(messaage, cbFunc){
  const  isConfirm = confirm(message);
  
  if(isConfirm && cbFunc){
    cbFunc();
  }
}

function register(){
  confirmModal('회원가입에 성공했습니다.',redirectUserInfoPage );
}
function login(){
  confirmModal('로그인에 성공했습니다.',redirectIndexPage );
}

이번 예시는 진짜 쩔었다,,,
지금 하고 있는 프로젝트에서 완전 똑같은 구조의 컴포넌트가 있는데, 어떻게 줄일까 고민하다가 나중에 리팩토링하자 하고 넘어간 부분이였는데 콜백함수를 사용해서 간결하게 만들 수 있다니....그저 눈물뿐 ㅜㅜ

순수 함수

• 사이드이펙트가 없고
• 외부에서 값을 조작할 수 없고 언제나 같은 값을 내뱉는 함수!
• 함수 내에서 사용하는 변수는 파라미터로 받거나, 함수 내에서 선언해서 사용하기
• 객체를 다룰 때는 꼭 복사를 해서 사용하기! => 원본 객체가 손상됨.