함수

함수 - 코드를 저장하는 공간.

변수와 함수의 차이점

변수	함수
1개의 데이터만 저장	자바스크립트 코드를 저장
var라는 키워드를 이용하여 선언	function이라는 키워드를 이용하여 선언
문자형, 숫자형, 논리형 데이터를 보관	출력문, 제어문 등의 코드를 저장하고 데이터를 반환.
객체를 참조

선언 방법

function 함수명(){

 자바스크립트 코드;

}

참조 변수 = function(){

 자바스크립트 코드;

}

호출

함수명();

참조 변수();

함수 선언

함수 호출 결과

일반 함수 myFnc()는 호출 시 호이스팅(hoisting) 기술을 지원하여 함수 정의문 보다 호출 문이 먼저 나와도 함수 정의문을 끌어올려서 함수를 호출한다.

하지만 익명 함수 theFnc()는 오류가 발생.

 

매개변수가 있는 함수

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

 자바스크립트 코드;

}

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

매개변수가 있는 함수

매개변수 없이 함수에 전달된 값 받아오기

function 함수명(){

 arguments;

}

함수명(데이터1, 데이터2, 데이터3);

매개변수 없이 함수에 전달된 값 받아오기

매개변수 없는 함수의 결과 값

데이터를 반환하고 강제 종료하는 return 문

함수에서 결괏값을 반환할 때 사용. return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료된다.

function 함수명(){

 자바스크립트 코드1;

 return 데이터(값);

 

 자바스크립트 코드2;  //출력 안됨

}

var 변수 = 함수명();

return문

재귀 함수 호출

함수 정의문 내에서 내가 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 한다.

function myFnc(){

 자바스크립트 코드;

 myFnc();

}

myFnc();

num이 10일때까지 반복 실행하는 재귀 함수

함수 스코프

변수 또는 함수의 유효 범위를 가리킨다.

지역변수 - 스코프 영역에서 선언한 변수를 가리킨다. 스코프 영역에서만 사용.

전역변수 - 자바스크립트 어디든 사용할수 있다.

var 변수명; //전역 변수

function 함수명(){

 var 변수명; //지역 변수

}

var score = 10;

function myFnc(){

 var score = 50;

 alert(score); //50출력

}

alert(score); //10출력

 

객체 생성자 함수

new 키워드를 사용해 객체를 생성하고 객체 생성자 함수에서 this 키워드를 사용해 생성한 객체에 속성과 함수를 등록한다.

function 함수명(매개변수1, 매개변수2, ...매개변수n){ //객체 생성자 함수

 this.속성명 = 새 값;

 this.함수명 = function(){

   자바스크립트 코드;

  }

}

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

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

객체 생성자 함수

호출 결과

프로토타입

객체 생성자 함수를 선언하여 객체를 생성하고 속성과 함수를 등록하면 객체를 생성한 만큼 함수가 등록된다.

함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 된다.

프로토타입을 사용하여 등록한 함수는 원형(객체 생성자 함수)에서 생성된 객체를 공유할 수 있다. 

즉, 여러 개의 함수를 등록할 필요가 없다.

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

  this.속성명 = 새 값;

}

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

  자바스크립트 코드;

}

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

prototype을 이용해서 코드 작성

document.write(react.getResult === vue.getResult); 는 true를 반환한다.

결과 적으로 두 객체는 같은 함수를 사용한다고 볼수 있다.

 

내장 함수

자바스크립트 엔진에 내장된 함수이며, 바로 호출하여 사용할 수 있다.

내장 함수의 종류

종류	설명	사용 예
encodeURI()	문자를 유니 코드값으로 인코딩한다. (영문, 숫자, 일부 기호( ; , / ? : @ & = + $ )는 제외	encodeURI("?query=값"); -> "?query=%EA%B0%91"
encodeURIComponent()	문자를 유니 코드값으로 인코딩한다(영문, 숫자 제외)	encodeURIComponent("?query=값") -> "%3Fquery%3D%EA%B0%91"
decodeURI()	유니 코드값을 디코딩해 다시 문자화	decodeURI("?query=%EA%B0%91") -> "?query=값"
decodeURIComponent()	유니 코드값을 디코딩해 다시 문자화	decodeURIComponent("%3Fquery%3D%EA%B0%91")  -> "?query=값"
parseInt()	문자열 데이터를 정수형 데이터로 변환	parseInt("5.12") -> 5 parseInt("15px") -> 15
parseFloat()	문자열 데이터를 실수형 데이터로 변환	parseFloat("5.12") -> 5.12 parseFloat("65.5%") -> 65.5
String()	문자형 데이터로 반환	String(5) -> "5"
Number()	숫자형 데이터로 반환	Number("5") -> 5
Boolean()	논리형 데이터로 반환	Boolean(5) -> true Boolean(null) -> false
isNaN()	is Not a Number의 약자이며 숫자가 아닌 문자가 포함되어 있으면 true를 반환	isNaN("5-3") -> true isNaN("53") -> false
eval()	문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리	eval("15 + 5") -> 20