함수
함수란 ?
변수처럼 자바스크립트의 메모리에 저장했다가 필요할 때마다 호출하여 사용
변수와 함수의 차이점
변수
1개의 데이터만 저장
var라는 키워드를 이용하여 선언
문자형, 숫자형, 논리형 데이터를 보관
객체를 참조
함수
자바스크립트 코드를 저장
function이라는 키워드를 이용하여 선언
출력문, 제어문 등의 코드를 저장, 데이터를 반환
함수 선언
기본형
function 함수명 (매개변수) { 실행할 코드; }
익명 함수
var 참조 변수 = function (매개변수) { 실행할 코드; }
화살표를 이용한 함수 선언
var 참조 변수 = (매개변수) => { 실행할 코드; }
매개변수로 데이터 가져오기
매개변수가 있는 함수
function 함수명 (매개변수1, 매개변수2, ...) { 실행할 코드; } 함수명(데이터1, 데이터2, ...);
매개변수가 없는 함수
function 함수명() { arguments; // 함수가 호출될 때 전달되는 데이터들을 arguments에 배열로 저장 실행할 코드; } 함수명(데이터1, 데이터2, ...);
return문의 역할
return문이란?함수에서 결과값을 반환할 때 사용
break문과 비슷하게 코드가 강제로 종료
return 문
기본형
function 함수명() { 자바스크립트 코드1; return 값; 자바스크립트 코드2; } var 변수 = 함수명(); // 변수에는 자바스크립트 코드1에서 나온 결과값이 들어간다.
재귀 함수
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라 하고 반복문과 비슷
기본형
function 함수명() { 자바스크립트 코드; 함수명(); } 함수명();
함수 스코프
스코프란?
자바스크립트에서의 스코프는 변수 또는 함수의 유효 범위를 나타냄
전역변수와 지역변수
전역변수
자바스크립트 어디에서든 사용할 수 있는 변수
지역변수
함수 스코프에서만 사용할 수 있는 변수
기본형
var 변수명; // 전역 변수 function 함수명(){ var 변수명; // 지역 변수 }
전역함수와 지역함수
전역함수
자바스크립트 어디에서든 사용할 수 있는 함수
지역함수
함수 스코프에서만 사용할 수 있는 함수, 함수 스코프 밖에서 호출 시 전역 함수가 실행되며 경고창이 나타남
기본형
function 함수명1() { // 전역함수 자바스크립트 코드; } function 함수명2() { // 전역함수 function 함수명3() { // 지역함수 자바스크립트 코드; } }
전역과 지역으로 나누는 이유
큐모가 큰 프로그램을 개발할 때 여러 개발자들이 협업을 하여 개발하게 되는데 같은 이름의 전역 변수를 사용하면 충돌이 발생한다. 그래서 충돌을 피하기 위해 전역과 지역으로 나누어 사용한다.
즉시실행 함수
같은 이름으로 선언된 함수의 충돌을 피하기 위해 즉시 실행 함수를 사용
이것을 사용하면 함수를 선언하는 동시에 함수를 호출
기본형
(function() { 자바스크립트 코드 })()
객체 생성자 함수
객체 생성자 함수란?
객체를 생성할 때 사용하는 함수
객체 생성자 함수
기본형
function 함수명(매개변수1, 매개변수2, ...) { // 객체 생성자 함수 this.속성명 = 데이터; this.함수명 = function() { 자바스크립트 코드; } } var 참조변수(인스턴트 네임) = new 함수명(); // 객체 생성 var 참조변수 = { 속성명 : 데이터, 함수명 : function() {...} }
프로토타입 (Prototype)
프로토타입의 등장 배경
같은 객체를 여러개 생성하면 객체를 생성한 만큼 함수가 등록된다.
이는 객체에 들어있는 프로퍼티와 함수를 객체 수만큼 등록하게 되어 메모리의 낭비를 초래할 수 있다.
그래서 메모리의 낭비를 해결하기 위해 나온 것이 프로토타입(Prototype)이다.프로토타입이란?
생성자 함수로 생성된 객체들이 프로퍼티와 함수를 공유하기 위해 사용되는 객체이고 함수만 갖고 있는 프로퍼티이다.
프로토타입의 기본형
function 함수명1(매개변수1, 매개변수2, ...) {
this.속성명 = 데이터;
}
함수명1.prototype.함수명2 = function() {
자바스크립트 코드;
}
var 참조 변수(인스턴스 네임) = new 함수명();자바스크립트 내장 함수
| 종류 | 설명 |
|---|---|
| encodeURI() | 문자를 유니 코드값으로 인코딩(영문, 숫자, 일부기호( ; , / ? : @ & = + $)제외) |
| encodeURIComponent() | 문자를 유니 코드값으로 인코딩(영문, 숫자 제외) |
| decodeURI() | 유니 코드값을 디코딩해 다시 문자화 |
| decodeURIComponent() | 유니 코드값을 디코딩해 다시 문자화 |
| parseInt() | 문자열 데이터를 정수형 데이터로 반환 |
| parseFloat() | 문자형 데이터를 실수형 데이터로 반환 |
| String() | 문자형 데이터로 반환 |
| Number() | 숫자형 데이터로 반환 |
| Boolean() | 논리형 데이터로 반환 |
| isNaN() | is Not a Number의 약자, 숫자가 아닌 문자가 포함되어 있으면 true 반환 |
| eval() | 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리 |
