[JavaScript] 함수 2

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

바로 이전 공부시간에는 함수의 구성요소와 함수를 왜 사용해야하는지를 이야기하면서,

실행컨텍스트, 스코프까지 알아보았어요.

이어서 함수에 대해 이야기해볼까요? 

 

https://hjp-recipe.tistory.com/24?category=835412 

[JavaScript] 함수 1_실행컨텍스트, 스코프

 

---

 

어휘적 스코핑 (lexical scopint)

- 코드가 작성된 구조에 의해서 실행이 되는 것

- 문자열 그대로 실행이 된다.

 

함수가 호출만 되었다고 실행되는 것이 아니라 코드가 작성된 구조에 따라 실행 된다.

즉, 무조건 호출을 했다고 해서 그 함수가 실행되는 것이 아니라 구조를 잘 정렬해야 실행된다. 

 

 

***1급 함수***

아래 3가지 조건을 충족한다면 1급 객체라고 할 수 있다.

1. 변수에 담을 수 있어야 한다.

2. 함수(혹은 메소드)의 인자(매개변수,parameter)로 전달할 수 있어야 한다.

3. 함수(혹은 메소드)의 반환값(return)으로 전달할 수 있어야 한다.

 

>> 함수가 변수화가 되는 것. 함수 자체를 저장하는 것

 

함수는 변수에 대입될 수 있다. 

 

변수에 함수를 대입하면 문자열로 취급하게 된다. 문자열이기 때문에 문자열 수정이 가능하다. 

a.replace('+','-') 를 작성하면 add함수의 return x-y 로 변경될 수 있다. 

문자열 그대로 실행하는 것 > 작성된 구조 자체로 실행되는 것이 lexical scoping이다. 

그러나 단점!

해킹 문제!

그래서 함수를 변수에 대입하는 것을 꺼려한다. 

 

---

 

값으로서의 함수

다른 값과 마찬가지로 함수도

1. 변수에 대입하여 호출할 수 있다.

2. 배열이나 객체에 넣을 수 있다.

3. 함수를 다른 함수에 인수로 넘기거나 함수에서 함수를 반환할 수도 있다.

 

배열에 함수를 넣으면,

for문을 돌릴 때 함수를 한번에 돌릴 수도 있고,

module.export로 한번에 분리할 수 있기도 하고,

return값으로 배열로 함수를 여러개 넘길 수도 있다.

 

---

 

익명 함수 (Anonymous Fucntion)

오류

올바름

>> 익명함수는 이름이 없어서 호출이 되지 않는다.

>> 그래서 호출하기 위해변수에 저장한 후 변수의 이름을 통해 호출해야 한다.

 

 

 

익명함수는 일회성 함수를 만들 때 사용, 바로 직접적으로 작성하기 때문에 재사용할 수 없다. 

 

function add(x, y) { 
    return x+y 
}

const a = add;

 

function result(a, x, y) { 
   return a(x, y) 
} 

function result (function (x, y) { 
   return x+y;

}, 3, 5) {

   return function (x, y) { 
      return x+y;

   } (3, 5)

}

 

a 변수 대신 function (x, y) { 
   return x+y;

}

를 직접 작성

 

>> 직접 작성하면 일회용으로 사용할 수밖에 없다. 재사용이 불가능하다. 

 

---

화살표 함수 (Arrow Function)

 

return대신 => 화살표를 사용하여 간단한 코드를 만들 수있다.