[JavaScript & TypeScript] - 함수

Parkboss·2022년 5월 27일

JavaScript / TypeScript

목록 보기

6/8

1.함수 선언문

function myFn(x) {
   return x + 100;
}

const result = myFn(10);

함수 선언문은 함수 이름을 생략할 수 없다.
함수 선언문은 표현식이 아닌 문이다.
세미클론 ; 생략 가능하다.

2. 함수 표현식

 const myFnV2 = functin () {
 return 100;
}

myFnV2();

함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다.
함수를 호출할 때는 함수 이름이 아니라 함수 객체(myFnV2)를 가르키는 식별자를 사용해야 한다.
세미클론 ; 생략 불가능하다.

3. 함수 생성 시점과 함수 호이스팅

//함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined

//함수 호출
console.log(add(2,5)); //7
console.log(sub(2,5)); // TypeError: sub is not a function

//함수 선언문
functin add(x,y) {
  return x+y;
}

//함수 표현식 
var sub = functin(x,y) {
  return x-y;
};

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출이 가능하다.
그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
함수 선언문과 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

1. 함수 호이스팅 (function hoisting)
코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태다.
따라서 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수도 있다.
이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.

2.변수 호이스팅
변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

So 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출을 해야된다.
함수 선언문 대신 함수 표현식을 사용할 것을 권장한다.

4. 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수 (Immediately Invoked Function Expression)라고 한다.

(function () {
  var a = 3;
  var a = 5;
  return a * b;
}());

코드를 실행하는 순간 값으로 취급해서 바로 ( ) 호출하고 끝나 버린다.
즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다.

5. 가변 인자

가변 인자는 이름 그대로, 변할 수 있는 인자란 뜻이다.

function sum(a, b, c) {
  return a + b + c;
}

const abcSum = sum(10, 20, 30, 40, 50, 60);

여기서 const abcSum = sum(10, 20, 30, 40, 50, 60); 초과된 인수가 그냥 버려지는 것이 아니다.
인자가 가변적일때도 처리를 할 수 있는 방법은 arguments객체의 프로퍼티로 보관한다.

6. arguments 프로퍼티

arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열객체이며, 함수 내부에서 지역 변수처럼 사용된다.
arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

function sum() {
  let res = 0;

// arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for문으로 순회할 수 있다.
  for(let i = 0; i < argumernts.length; i++){
    res += argumernts[i];
}
  return res;
}

cosole.log(sum()); //0
console.log(sum(1, 2));  //3
console.log(sum(1, 2, 3)); //6

코드를 접었을 때 sum의 함수의 내부 코드는 바깥쪽에서 보이지 않는다.
이것을 함수의 시그니처, 함수의 외모라고 한다.

function sum() {...
}

cosole.log(sum()); //0
console.log(sum(1, 2));  //3
console.log(sum(1, 2, 3)); //6

함수의 이름과 인자 정보를 알 수 있어야 되는데 이 함수가 가변 인자를 처리하는지, 가변 인자를 처리하지 않고 인자를 아무것도 받지 않는지를 알 수가 없다.
이를 해결하기 위해 전개 파라미터(rest paramaeter)를 사용한다.

7. Rest 파라미터

Rest 파라미터 (나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function sum(...args) {
  let s = 0;

  for(let i = 0; i < args.length; i++){
    res += args[i];
}
  return res;
}

cosole.log(sum()); //0
console.log(sum(1, 2));  //3
console.log(sum(1, 2, 3)); //6

Rest 파라미터와 arguments 객체를 모두 사용할 수 있다.
기존에 암묵적으로 작동되는 arguments 방식과는 달리 함수 시그니처에 명시적으로 등장하는 방식이기 때문에 굉장히 풍부한 정보를 사용자에게 전달해 줄 수 있다.

8. 함수 호출

myFnV2();
sum.call(null, 10,20,30);  
sum.apply(null, [10,20,30]);

apply와 call 메서의 본질적인 기능은 함수를 호출하는 것이다.
apply메서드는 호출할 함수의 인수를 배열로 묶어서 전달한다.
call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.
apply와 call은 형태는 다르지만 결과적으로 동일한 효과를 낸다.

const arr = [10,20,30]
myFnV2();
sum.call(null, 10,20,30);  
sum.apply(null, arr);

함수의 호출에 인자 값을 외부로부터 공급받아서(arr) 훨씬 더 유연하게 사용할 수 있다.
이것이 가능한 메커니즘은 apply 함수 호출 방법이다.

9. 화살표 함수

화살표 함수(arrow function)는 function 키워드 대신 화살표(=>, fat arrow)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.
화살표 함수는 표현만 간략한 것이 아니라 내부 동작도 기존의 함수보다 간략하다.

화살표 함수는 함수 표현식으로 정의해야 된다.
인자와 코드 블록 사이에 화살표 기호를 사용한다.

const sumV2 = (a,b, ... args) => {
  let s = 0;

 for(let i = 0; i < args.length; i++){
    s = s + args[i];
}
  return s;
}

1. 코드 블록이 하나일 때 리턴하는 경우 브레이스 생략 가능 또한 return도 생략된다.

const ten = x => 100 + x;  

ten(10);

(출력)
110

2. 매개변수가 여러 개인 경우 소괄호 ( )안에 매개변수를 선언한다.

const arrow = (x,y) => {...};

3. 매개변수가 한 개인 경우 소괄호 ( )를 생략할 수 있다.

const arrow = x => {...};

4. 매개변수가 없는 경우 소괄호()를 생략할 수 없다.

const arrow = () => {...};

이 강의만 4번 들었다... 선생님 대사도 외우것어
어제 헤이조이스에서 여성 현직 개발자 라이브 세션을 들었다!
들으면서 전문적인 용어와 시스템에 대해서 막 설명해 주시는데 아직 잘 못 알아 듣겠...^^
근데 진짜 느낀 건! 너무 멋있는 여성 개발자들이 많다는 거❤
더 좋은 건 헤이조이스에서 라이브 세션들은 사람들을 위해 오픈 채팅방을 만들어줬다는 거!!
거기서 사람들끼리 따로 디스코드 방을 만들어서 직군별 채널도 나눠져 있고 스터디, 채용 공고도 올라온다는 거!!!!!!! 느무 조아라
해이해진 정신을 다시 바로 잡을 수 있어서 듣기 잘했다!