JavaScript 함수

JavaScript 함수

함수는 유용하게 쓰입니다.

기본 함수는 

function 함수명 () {

코드;

}

또한 익명으로 

var sfd = function(){

코드;

}

이렇게 두 가지의 기본 형태가 있습니다.

대신 주의사항은 일반 함수 정의 방식으로 사용 시 정상 작동을 하지만

익명 함수 선언 시 오류가 발생할 수도 있습니다.

갈고리인 호이스팅 기술을 지원하는데요 

예를 들어서 

*일반 함수 정의 방식(호이스팅) (O)

testFnc(); <==== 호출 문

function testFnc() { <==== 함수 정의문
    코드;

}

이렇게 되있는 형태가 호이스팅 기술입니다. 이때는 정상작동을 합니다.

하지만 

* 익명 함수 선언 방식 (X)

testFnc();

var testFnc= function(){

코드;

}

위와 같은 형태는 오류가 발생하게 됩니다.

또한 함수에는 매개변수가 있겠죠 ??

이는

function 함수명{(매개변수1,....)

코드;

}

함수명(데이터1,...);

위의 형태로 매개변수를 이용할 수있습니다.

매개변수를 정의하지 않고도 매개변수를 이용할 수 있는데요.

이는 함수 내부에서 argument[0],... 등을 이용하여 직접 참조가 가능합니다.

함수 내부에 return 문이 있을 시 반환 해주고 함수가 종료를 합니다. 

따라서 return 아래있는 코드들은 무시가 됩니다.

---

함수 스코프

함수 스코프는 변수 또는 함수의 유효 범위를 가리킵니다.

지역 변수는 함수 스코프 영역에서 선언한 변수이고

지역 함수는 함수 스코프 영역에서 선언한 함수입니다.

function scope(){

var 변수; <----- 지역 변수

function fn(){ <----- 지역 함수

코드;

}

}

전역 변수는 전체가 쓸 수 있지만 지역 변수에서 사용 하고 난 후 초기화가 되어 전역 변수를 참조하게됩니다.

따라서 여러 명에서 작업하거나 개발할 때 지역 함수를 이용하여 개발하는 것이 효율적이라 할 수 있겠습니다.

예를 들어서

var num=100;

function menu(){ <----------------개발자 A

num+= 100;

alert(num);

}

function menu(){ <----------------개발자 B

alert(num);

}

이 둘은 같은 함수를 통해 개발을 진행했습니다. 하지만 결과는 200이 되어야하지만 개발자 A가 개발한 영역은 지워지고

개발자 B의 함수가 실행이되어 100이 출력이 됩니다.

이를 막기위해서는 즉시실행 함수로 지역함수로 이용하면 됩니다.

예를 들어서

(function() { <-------개발자 A

var num=100;

function menu(){

num+=100;

alert(num);

}

menu();

}());

(function() { <-------개발자 B

var num=100;

function menu(){

alert(num);

}

}());

정상적으로 출력이 될겁니다.

---

객체 생성자 함수

내장 객체를 생상헐 때 객체를 생성하게되죠.

마찬가지로 객체 생성자 함수를 선언 후 이를 사용하는 방법을 알아보겠습니다.

new 키워드가 사용되겠죠.

function 함수명(매개변수1,.....매개변수n){

this.속성명=새값;

this.함수명=function(){

코드;

}

}

var 참조변수(인스턴스 네임) = new 함수명();

= 아래와 동일

var 참조변수 = {속성: 새값,함수명 : function(){ ... } }

---

메모리 절약을 위한 프로토타입

function 함수명(매개변수1,.....,매개변수n){

this.속성=새값;

}

함수명.prototype.함수명=fucntion(){

자바스크립트 코드;

}

원래 함수 내부에 등록된 속성을 출력하는 함수들을 등록하게 됩니다.

이렇게 되면 메모리가 많이 소비가 됩니다.

이를 위해서 함수 내부에 등록하는 함수를 따로 빼서

함수명.prototype.함수명=function(){

}

으로 정의해주면 됩니다.