[TIL] 클론 코딩

이지예·2022년 6월 18일
0

clonecoding

목록 보기
2/3

클론 코딩

클론 코딩을 하고 모르는 부분을 공부하여 정리 해 보았다.
모두 JavaScript 내용들이다.

함수

JavaScript는 함수를 특별한 종류의 값으로 취급하기 때문에, 변수에 값을 할당하는 것처럼 변수에 함수를 할당할 수 있다. 또한 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있다.

function Hi(){		
  alert("Hello");
}
alert(Hi);

마지막 줄의 Hi 옆에 괄호가 없기 때문에 함수는 실행되지 않고, 첫번째줄에서 세번째 줄에 해당하는 코드의 내용만 alert되게 된다.

변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다. 방법은 변수를 복사하는 방법과 동일하다.

세미콜론

함수 선언문에는 세미 콜론이 붙지 않았지만, 선언한 함수를 변수에 할당하는 경우에는 함수의 표현식 끝에 세미콜론이 붙어야 한다. 이 경우 함수 표현식은 구문 안에서 값의 역할을 하기 때문에, 모든 구문의 끝에 세미 콜론을 붙이는 JavaScript의 특성 상 세미콜론이 붙게 된다.

let Hi=function(){};

콜백 함수

함수를 함수의 인자로 전달하고, 필요하다면 인수로 전달한 함수를 '나중에 호출(called back)'하는 것이 콜백 함수의 개념이다.

function ask(question, yes, no){
  if (confirm(question)) yes()
  else no();
}
function showOk(){
  alert('동의하셨습니다.');
}
function showCancel(){
  alert('취소 버튼을 누르셨습니다.');
}
ask('동의하십니까?',showOk, showCancel);

ask 함수가 호출되고, confirm 창에 '동의하십니까?'라는 말과, 확인 취소 버튼이 생기게 된다.
확인을 누르면 showOk가 콜백이 되고, 취소를 누르면 showCancel이 콜백 된다.

익명 함수

아래 코드는 위와 같은 의미지만 다르게 짠 코드이다.

function ask(question, yes, no){
  if(confirm(question)) yes()
  else no();
}
ask(
  '동의하십니까?',
  function() {alert('동의하셨습니다.');},
  function() {alert('취소 버튼을 누르셨습니다.');}
);

ask(...) 안에 선언된 함수는 이름이 없는데, 이러한 함수를 익명 함수라고 부른다.
익명 함수는 변수에 할당된 함수가 아니기 때문에 ask 바깥에서는 접근할 수 없다.

화살표 함수

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들수 있는 방법이다.

let func=(arg1, arg2, arg3) =>expression

인자 arg1,2,3를 받는 함수 func이 만들어지고, func는 화살표 우측의 표현식(expression)을 평가하고 평가 결과를 반환한다. expresstion부분에 들어가야할 인수가 하나밖에 없다면 괄호를 생략할 수 있지만, 코드의 길이가 여러줄인 경우 중괄호 안에 expression의 내용을 적어야 한다.
또한 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 한다.

위의 화살표 함수는 아래 함수의 축약 버전이라고 볼 수 있다.

let func=function(arg1, arg2, arg3){
  return expression;
};

인수가 하나도 없을 때는 괄호를 비워놓으면 된다.

let Hi=()=>alert('Hello');
Hi();

0개의 댓글