IT 수업 9주차 (13) 함수(function, const, hoisting)

 

 

● 함수 : 수를 받아 처리하는 논리적 공간
             재사용성, 유지보수 위해

 

 

 

function은 위치가 어디에 있든 먼저 처리된다.

 

하지만 이렇게 했을 경우 출력하는 코드보다 밑에 있으면 에러가 뜨기 때문에 맨 위로 올려줘야한다.

 

 

 

 

 

- 인자o, 반환 o

기본적으로 함수는 호출했던 위치로 돌아오게 된다.

 

 

 

 

- 인자o, 반환 x

인자를 받아 return은 되지만 값을 가지고 돌아오지 않아 반환이 되지 않는다.

그래서 undefined가 나오게 된다.

 

 

 

 

- 인자x, 반환 o

함수 호출은 가능하지만 인자를 받지 못한다.

 

 

 

 

 

- 인자x, 반환 x

인자도 받지 못하고 값도 주지않아 내부적으로만 처리된다.

 

 

 

 

 

● 함수의 리턴형태 (object)

 return {}; 을 없애면 돌아오긴 하지만 리턴값이 없어 undefined가 나온다.

 

 

주석을 풀면 오브젝트 값을 가지고 온게 된다.

 

 

 

이렇게 get함수를 사용하면 값만 받아 올 수 있다.

 

 

 

 

 

● 함수의 가변인자(...args) 사용

어떤 값이든 배열형태로 값을 받는다.

 

 

 

 

 

 

 

 

● HOISTING (끌어올린다)

 

코드가 실행되기 전 변수선언,
함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상

 

 

function을 사용하면 호이스팅이 되서 위에 쓰든 밑에 쓰든 상관 없이 오류가 나지 않고 출력된다.

 

 

 

하지만 const를 사용하면 호이스팅 처리가 되지 않기 때문에 위에 쓰게 되면 오류가 발생하게 된다.

 

 

 

함수표현식 (()=>{}) 권장
이유. 코드 구조를 무너뜨린다.
이유. 절차대로 처리가 되지 않는다.

 

 

 

 

function을 사용하면 에러 발생하지 않는 것을 보도록 할 것이다.

 

먼저 js파일 2개를 만들어 준 뒤 변수명을 동일하게 작성해준다.

 

 

 

js 1 파일

js 2 파일

 

그리고 새로운 html파일을 만들어 두 js파일을 연결 시켜준뒤 출력시켜 본다.

 

그러면 변수명이 동일해도 에러가 나지 않고 값이 출력되는 것을 볼 수  있다.

 

 

 

 

하지만 const를 사용하여 지역화를 시키면 함수명이 동일 했을 때 오류가 발생하는 것을 볼 수 있다.

js 1 파일

js 2 파일

 

 

 

 

 

 

function(){} 형태로 함수 생성시
     - Hoisting Issue
     - 함수이름 중첩되더라도 허용(에러 확인 불가)
     - 함수의 전역화

const name=()=>{} 형태로 함수 생성시
      - Hoisting 적용 x
      - 함수 이름 중첩시 에러 발생
      - 함수의 지역화

 

 

 

 

 

 

 

 

즉! js 에서 const를 사용해서 코드를 적는게 좋다!!