JavaScript_함수

① 함수란 ?

• 자바스크립트 코드를 저장한다.
• function이라는 키워드를 이용하여 선언한다.
• 출력문, 제어문 등의 코드를 저장하고 데이터를 반환한다.

 

- 기본 함수 정의문

function myFnc(){
    document.write("hello");
    ...
}

myFnc(); //함수 호출 한 번
myFnc(); //함수 호출 두 번

결과
hellohello

 

 

- 일반 함수 정의 vs 익명 함수 선언 참조

<일반 함수>

testFnc();

//§ 호이스팅

function testFnc() {
    자바스크립트 코드;
}

→ 일반 함수는 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출할 수 있다.

 

<익명 함수>

testFnc();

// 호이스팅X

var testFnc=function() {
    자바스크립트 코드;
}

→ 익명 함수는 함수 정의문보다 호출문이 먼저 나오면 호출할 수 없다.

 

 

- 매개변수가 있는 함수 정의문

function 함수명{(매개변수1, 매개변수2, ...매개변수n)
    자바스크립트 코드;
}
함수명(데이터1, 데이터2, ...데이터n);

 

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

function sum(){
    var sum=arguments[0]+arguments[1]+arguments[2];
    
    document.write(sum);
}

sum(10, 20, 30);

결과 
60

 

 

② 함수에서 return문의 역할

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

function 함수명() {
    자바스크립트 코드1;
    return 데이터(값);
-------------------------------------------
    자바스크립트 코드2;
}

var 변수=함수명();

→ 함수 호출문 => 함수 코드 실행 => 자바스크립트 코드2를 무시하고 데이터 반환

 

 

③ 함수 스코프 

- 함수 스코프란?

- 전역 변수와 지역 변수의 개념과 차이

var 변수명;	//전역 변수

function 함수명() {
    var 변수명;	//지역 변수
}

function 함수명1(){
    자바스크립트 코드;	//전역 함수
}

function 함수명2(){
    function 함수명3(){
        자바스크립트 코드;	//지역 함수
    }
}

 

 

 

④ 객체 생성자 함수의 활용

- 객체 생성자 함수

function 함수명(매개변수1, 매개변수2, ...매개변수n) {	//객체 생성자 함수
    this.속성명=새 값;
    this.함수명=function(){
        자바스크립트 코드;
    }
}

var 참조 변수(인스턴스 네임)=new 함수명();	//객체 생성

 

 

- 메모리 절약을 위한 프로토타입 사용하기

: 프로토타입을 이용하여 공통된 메서드를 프로토 타입에 정의해 필요한 객체를 가져다 써 메모리를 절약할 수 있다.

function 함수명(매개변수1, 매개변수2, ...매개변수n){
    this.속성명=새 값;
}

함수명.prototype.함수명=function(){
    자바스크립트 코드;
}

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

 

 

 

⑤ 자바스크립트 내장 함수

종류	설명
encodeURI()	문자를 유니 코드값으로 인코딩한다.
encodeURIComponent()	문자를 유니 코드값으로 인코딩한다.
decodeURI()	유니 코드값을 디코딩해 다시 문자화한다.
decodeURIComponent()	유니 코드값을 디코딩해 다시 문자화한다.
parseInt()	문자열 데이터를 정수형 데이터로 반환한다.
parseFloat()	문자열 데이터를 실수형 데이터로 반환한다.
String()	문자형 데이터로 반환한다.
Number()	숫자형 데이터로 반환한다.
Boolean()	논리형 데이터로 반환한다.
isNaN()	is Not a Number의 약자이며 숫자가 아닌 문자가 포함되어 있으면 true를 반환한다.
eval()	문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리한다.