[ 함수(Function) ]
-종류)
1. 선언적 함수 : 함수에 이름이 있는 함수로 호이스팅의 대상이 된다.(호이스팅은 별도로 정리)
function circle(radius){
~~
return something;
}
2. 익명 함수 : 함수에 이름이 없어 주로 변수에 대입해서 사용하는 함수(호이스팅의 대상이 되지 않음)
-> 따라서 순차적으로 수행되기 때문에 요즘은 익명함수로 선언하는 것이 추천됨.
var anonymousFunc = function(raidus){
~~
return something;
}
3. 람다 함수 : 일회성으로 사용하기 위한 목적으로 사용되는 함수
(function(radius){
~~
return something;
})(25)
- 매개변수가 정해지지 않은 함수 처리 방식)
-> 자바스크립트는 arguments 라는 배열을 제공함
-> arguments[0], arguments[1], ... 하면 각 순서대로 넘긴 매개변수 값을 가져올 수 있다.
-> arguments.length : 실재 넘긴 매개변수 개수
-> arguments.callee 는 함수 정의부를 의미한다.
-> 따라서, arguments.callee.length 하면 선언된 매개변수 개수
testFunc(10,20,30,40); // 선언적 함수는 호이스팅되기 때문에 수행 가능.
function testFunc(a, b){
if(arguments.callee.length != arguments.callee){
alert("선언된 함수의 매개변수 개수와 실재 호출시 넘긴 매개변수 개수가 다릅니다.");
alert("선언 매개변수 개수 : " + arguments.callee.length);
alert("실재 호출시 넘긴 매개변수 개수 : " + arguments.length);
// arguments[0] // 10
// arguments[1] // 20
// arguments[2] // 30
}
}
- 인코딩/디코딩 내장함수)
-> 한글 등을 넘길때 값에 문제가 생길 수 있어 인코딩에 사용되는 내장함수이다.
escape(str) <-> unescape(str)
encodeURIComponent(str) <-> decodeURIComponent(str)
- 숫자 판별 내장함수)
isNaN() : 숫자면 true 아니면 false를 return함.
- 정수 변환 내장함수)
parseInt()
- 실수 변환 내장함수)
parseFloat()
-------------------------------------------------------------------------------------------
[ 객체(Object) ]
객체 선언 방식 종류)
1. new Object()를 통한 방식 -> 거의 사용 안함...
2. 객체 리터럴 방식
var circle = {
변수 : "값",
메서드1 : function(){
~~
return something;
},
메서드2 : function(){}
...
}
-new 를 통해 객체를 여러개 생성할 수 없음으로 3번 생성자를 이용한 방식이 제일 자주 사용된다.
-객체 선언 이후에 객체에 메서드, 변수를 추가하는 방법)
circle.새변수명 = 값;
circle.새메서드명 = function(){
~~
}
->*** 이런 방식 말고도 변수나 문자열을 통해서도 동적으로 변수, 메서드를 추가할 수 있다.
circle["새변수명"] = 값;
circle["새메서드명"] = function(){};
var newFunction = "print";
circle[newFunction] = function(){} 처럼 동적으로 생성할 수 있다.
3. 생성자 함수를 이용한 방식
1) 선언적 함수를 이용하는 방식
function constructorObject(a, b){
this.변수명 = 값;
this.메서드명 = function(){}
...
}
2) 익명함수를 이용하는 방식
var constructorObject = function(a,b){
this.변수명 = 값;
this.메서드명 = function(){}
}
new constructorObject(10,20);
처럼 new 연산자를 통해 인스턴스를 생성해서 사용하며, 이때 this는 자기 자신의 객체를 의미하게 된다.
-> 자바스크립트에서 각 사용처 별로 this가 굉장히 다른데 추후에 정리...
-> 일단, 생성자 함수를 통해 생성된 객체에서의 this는 자기 자신의 객체를 의미
-> 함수 내에서 this는 window 객체를 의미
역시 익명함수에서도 new를 통해 생성한 객체에 추가로 변수, 메서드를 추가하고 싶은 경우
var newObject = new constructorObject(10,20);
newObject.newVal = "새로운 값 추가";
newObject["newMethod"] = function(){} 처럼 추가할 수 있다.
*** [ 객체에서의 prototype ]
-> prototype 사용 이유)
생성자 함수를 통해 선언된 것을 new 키워드를 통해 객체 생성시 모든 인스턴스들은
생성자 함수 내에 선언된 메서드 공간을 중복적으로 할당받게 된다.
하지만 이러한 중복된 메서드를 공간을 객체마다 각기 할당받는 것은 비효율 적임으로
공유될 수 있는 prototype을 통해 한군대에서만 정의될 수 있도록 해주는 방식을 사용한다.
클래스명.prototype.변수명 = "값"; // 이 값은 해당 클래스명으로 생성되는 모든 객체에서 공유된다.
클래스명.prototype.메서드명 = function(){}
// 한번에 여러개를 뭉뚱그려 정의하고 싶다면...
클래스명.prototype = {
// 해당 클래스의 prototype을 통째로 재정의할 수도 있다.
변수명 : "값",
메서드1 : function(){},
메서드2 : function(){},
...
}
- Date 내장 객체 자주사용되는 메서드)
var date = new Date();
date.getFullYear();
date.getMonth() + 1; // 시작값이 0부터여서 1을 더해야함
date.getDate(); // 일
date.getHours();
date.getMinutes();
date.getSeconds();
- 콜백(Callback) 함수란? )
: 별거없다... 함수 호출시 매개변수에 함수를 넘겨서 해당 함수 내에서 특정 시점에 넘긴 함수를 수행하기 위한 목적으로 사용된다.
-> ajax등에서 success시 로딩 이미지를 없앤다거나 success가 완료된 시점에 특정 작업 등을 하려할 때 많이 사용된다.
function print(sum){
document.write(sum);
}
function testMethod(callbackF, a, b){
var sum = 0;
sum = a + b;
callbackF(sum); // 전달받은 callbackF(print메서드)를 수행한다.
}
testMethod(print, 10, 20);
'스터디 > 자바스크립트중고급' 카테고리의 다른 글
| 1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등) (0) | 2018.09.30 |
|---|
