JavaScript/Javascript_Advanced

[JS]Function(함수) part.1

MoZZANG 2022. 4. 12. 14:28
함수정의 방법1 - 함수 선언(정의)문 - Hoisting이 된다.

 

 

함수정의 방법2 - 함수표현식(익명함수) - Hoisting 안된다.

▲ 변수가 함수를 참조하게 된다. 즉 변수에 함수를 대입한다.

 

 

 

함수정의 방법3 - 즉시 실행함수

 

 

JS에서의 함수특징

 

 

 

 

이제 하나씩 예제를 보면서 알아보자

 

 

 

- Function생성자 함수를 이용

 

▲ 출력은 잘 되지만 이렇게 사용하지는 않는다.

 

 

- 함수 선언(정의)문으로 함수 정의하기

▲ 함수 정의(선언)문을 사용해서 함수를 정의하면 hoisting이 일어난다. 때문에 출력결과를 보면 '정의문 위에서 호출:'부분이 제일 처음으로 출력된 것이 아닌, add()함수안의 내용들이 먼저 출력된 것을 볼 수 있다.

 

▲ arguments란?

 

 

 

▲add함수는 인자를 2개받는데 5개를 넣어주면 어떻게 될까? JS에서 함수는 가변인자를 사용하기 때문에 에러가 나거나 하지 않는다.

 

▲인자를 5개를 넣어도 함수는 잘 출력되는 것을 볼 수 있다.

 

 

 

 

 

또다른 함수를 정의해보자

 

 

▲ 함수 호출전이므로 sum은 is not defined가 나온다.

 

▲ 호출을 하면 각 인자들은 함수에 내장되어있는 arguments라는 녀석이 인자들을 담아서 컬렉션 형태로 타입을 제공한다. 배열형식이지만 100% 배열은 아니다.

 

위 함수 호출 결과

 

 

 

▲ 함수내에서 var를 붙여서 선언한 변수는 함수내의 지역변수가 되어 함수밖에서는 사용할 수 없고, 함수내에서 변수를 선언하더라도 var를 붙이지 않고 선언한 변수는 전역변수로 되어 함수 호출 시 window객체의 속성이 되므로 해당 페이지 어디서든 사용가능해진다.

 

 

 

 

 

 

▲ 함수 선언(정의)문 형태로 만들면 Hoisting이 일어나지만 함수 표현식 형태로 함수를 정의하면 hoisting이 일어나지 않으므로 위 코드의 exp()는 정의가 되지 않았다는 에러가 발생하는 것이다. 따라서 함수 표현식 아래에서 호출해야 한다.

'JavaScript > Javascript_Advanced' 카테고리의 다른 글

[JS]Function(함수) part.3  (0) 2022.04.12
[JS]Function(함수) part.2  (0) 2022.04.12
[JS]For문 & While문  (0) 2022.04.11
[JS]Switch문  (0) 2022.04.11
[JS]If문  (0) 2022.04.11