김루루의 개발일기

function 함수이름짓기 (2) - javascript 0604 본문

프론트엔드/Javascript

function 함수이름짓기 (2) - javascript 0604

김루루 2021. 6. 13. 20:20

◎ 함수 == 주석

함수를 간결하게 만들면 테스트와 디버깅이 쉬워진다. 그리고 함수 자체로 주석의 역할까지 한다.

자기설명적 코드 (self - describing) : 이름만 보고도 어떤 동작을 하는지 알수 있는 코드.

 

◎ 함수 이름짓기

함수 이름만 보고도 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

함수이름 ex
show... 무언가를 보여주는 함수.  showMessage()
get... 값을 반환하는 함수.  getAge()
calc... 값을 반환하는 함수.  calcSum()
create...  무언가를 생성하는 함수. createForm()
check... 무언가를 확인하고 불린값을 반환하는 함수. checkPermission()

함수는 동작 하나만 담당해야된다. 

다음은 개발자들이 흔히 하는 실수다.

  • getAge() 나이를 얻어오는 동작만 해야됨. alert창에 나이를 출력해주는 동작은 이 함수에 들어가지 않는게 좋다.
  • createForm() form을 만들고 이를 반환하는 동작만 해야됨. form문서를 추가하는 동작은 이 함수에 들어가지 않는게 좋다.
  • checkPermission() 승인여부를 확인하고 그 결과를 반환하는 동작만 해야함. 승인여부를 보여주는 메세지를 띄우는 동작은 이 함수에 들어가지 않는게 좋다.

 


◎ 함수 표현식

  • 자바스크립는 함수를 '특별한 종류의 값'으로 취급한다.(다른언어에서 처럼 '특별한 동작을 하는 구조'로 취급하지 않는다)
  • 자바스크립트에서 함수는 값이다. 값처럼 취급할 수있다.

 

함수선언방식을 함수표현식으로 바꾸기

//함수 선언 방식
function sayHi(){
   alert('hello');
}


//함수 표현식(function Expression)
//함수를 만들고 그 함수를 변수 sayHi에 할당한다.
let sayHi = function(){
    alert('hello');
};

 

 

변수를 복사해 다른 변수에 할당하는것 처럼 함수를 복사해 다른 변수에 할당할 수 도 있다.

function sayHi(){
    alert('hello');
}

let func = sayHi;
func();
sayHi();

// 주의! 변수에 복사할때
//sayHi;   함수 그자체가 복사됨.
//sayHi(); 함수 그자체가 아니라 함수 호출 결과(반환값)만 저장됨.

※ 함수 표현식 끝에 세미콜론(;)이 붙는 이유

{} 중괄호로 만든 블록 끝에는 ;이 없어도 된다.

함수표현식은 let sayHi =... ; 과 같은 구문안에 값의 역할을 한다.

모든 구문 끝에는 ;을 붙이는데 함수 표현식에 쓰인 ; 은 

함수 표현식이기에 붙여진게 아니라 구문의 끝이기 때문에 붙여진 것이다.

Comments