TIL 05 - Function

hojung choi·2021년 5월 23일
0

js

목록 보기
6/17
post-thumbnail

Function

함수는 입력값을 받은 후에 함수 안의 프로그램에서 특정 작업을 수행한다.
자바스크립트에서는 함수의 입력값을 인수라고 부르고 함수의 출력값을 반환값이라고 부른다

함수 정의

함수 선언문 정의

함수는 function키워드를 사용하여 정의한다.

function square(x) {return x*x};

square함수는 인수의 제곱을 계산하여 반환한다.
여기서 인수는 x
반환은 return을 통해 한다

함수 리터럴 정의

var square = function(x) {return x*x;}

함수리터럴은 이름이 없는 함수로, 익명함수 또는 무명함수라고 부른다
함수 선언문으로 정의한 함수는 끌어올리지만 함수 리터럴로 정의한 함수는 끌어올리지 않는다.

화살표 함수 정의

es6부터 추가된 화살표 함수 표현식은 함수 리터럴의 단축표현이다.

var square = function(x) {return x*x;}
var square = (x) => {return x*x;}

인수가 하나만 있으면 인수를 묶는 괄호를 생략할 수 있다

var suqare = x => {return x*x;}

함수 리터럴과 화살표 함수의 차이점

- this의 값이 함수를 정의할 때 결정된다

함수 리터럴로 정의한 함수의 this는 함수를 호출할 떄 결정된다.
그러나 화살표 함수의 this갑슨 함수를 정의할 때 결정된다.
this의 자세한 정리는 나중에 정리하도록 하자! (사실 넘 헷갈림,,)

- arguments변수가 없다

- 생성자로 사용 할 수 없다

화살표 함수 앞에 new연산자를 분여서 호출 할 수 없다.

- yield 키워드를 사용할 수 없다

❌ return 다음에 코드를 넣어도 읽지 않아요 🙅🏻‍♀️

return 뒤에 코드를 넣어도 컴퓨터는 retrun으로 함수에서 빠져나왔기 때문에 return뒤에 코드를 읽지 않는다!


함수 이름

함수 이름은 해당 함수의 기능을 이해하기 쉽게 지어야한다.
함수의 이름은 일반적으로 동사 또는 동사로 시작되는 어휘로 만든다

ex ) newName (캐멀표기법) , new_name (밑줄표기법)


함수 호출

square(3); // 9

여기서 인수값은 3
3*3 = 9
9가 함수의 반환값이 된다.

여기서, 함수를 호출할 떄 전달하는 값을 인수, 함수 정의문의 인수를 인자 라고 부른다


함수의 Hoisting

변수 선언문과 마찬가지로 함수 선언문을 코드의 첫머리로 끌어올린다

console.log(square(5)) // 25
function square (x) {return x*x};

변수의 유효범위 (Scope)

드디어 나왔다! scope! 변수를 공부할때 나왔던 개념이다
그때는 {}라고 생각하고 일단 넘어가자 했는데 이제 제대로 정리해보자!

변수에 접근 할 수 있는 범위를 그 변수의 유효범위(scope)라고 한다
유효범위로 정하는 방법에는

  • 어휘적 범위 (lexical scope) : 프로그램의 구문만으로 유효범위를 정한다
  • 동적 범위 (dynamic scope) : 프로그램 실행 중에 유효범위를 정한다

자바스크립트는 어휘적 범위를 채택하고 있다.

자바스크립트 변수는 유효 범위에 따라 두가지로 나뉜다

  • 전역변수 : 함수 바깥에서 선언된 변수로 유효범위가 전체 프로그램
  • 지역변수 : 함수 안에서 선언된 변수와 함수 인자로 유효범위는 변수가 선언된 함수 내부
    var a = "global"; // 전역변수
    function f() {
     var b = "local" // 지역변수
     console.log (a);
     return b;
    }
    f();
    console.log(b); // b is not defined

    여기서 a는 전역변수이다
    전역변수의 유효범위는 전체 프로그램이므로 변수 a는 함수 f내부에서도 유효하다.
    변수 b는 함수f안에서만 유효한 지역변수이다.
    함수 f바깥에서 변수b를 읽으려고 하면 오류가 발생한다

    함수도 반복문과 마찬가지로 중첩되어 쓸 수 있다.
    자식의 함수는 부모의 함수에 접근 할 수 있는데 이것이 클로저이다! 클로저에 대해서는 다음에 다뤄보도록 😹

함수의 장점

  • 재사용이 가능하다 : 똑같은 작업을 여러 번 반복해야 할 떄 그 작업을 함수로 만들어두면, 함수 호출만으로 같은 작업을 여러 번 반복 할 수 있다.
  • 만든 프로그램을 이해하기 쉽다 : 함수를 사용하면 같은 작업을 모아 이름을 붙일 수 있다. 프로그램을 읽을때 큰 흐름을 쉽게 파악할 수 있다
  • 프로그램 수정이 간단해진다 : 함수를 사용하지 않으면 똑같은 처리를 프로그램 곳곳에 작성해야 한다. 그러나 함수로 정리해 두면 해당 함수만 수정하면 되므로 수정이 간단해진다

📌 TMI

함수는 객체! 원시타입과 객체타입의 비교를 확실히 알 것!

워낙 큰 개념을 정리하려고 하니 어디서 부터 어떻게 정리를 해야할지 막막했다 ㅠㅠ 하나를 정리하면 또 다른 개념이 또 생겨나고 그렇게 꼬리에 꼬리를 물고.... 클로져와 프로토타입까지 나왔었다 ㅎㅎ... 하나씩 천천히 정리해 나가야지 👊🏻

profile
🧚🏻‍♀️ Front-End Developer

0개의 댓글