20211001
콜백함수 :
- 이벤트 발동될 때 실행된다.
- 비동기 방식으로 진행된다.
(전체 코드를 읽은 다음 -> 내부의 특정코드 실행)
- 함수를 인수로 삽입하여 그 함수를 저장했다가 이벤트 발동시 저장한함수를 실행한다.
- 실행시 저장된 함수에 전달한 데이터를 인수에 삽입한다.
<script type="text/javascript">
var myFn1 = function(fn){
if(typeof fn == 'function'){
setTimeout(function(){
fn('홍길동');
}, 5000);
}
}
myFn1(function(myName){
console.log('함수실행', myName);
});
console.log('비동기화 방식 테스트1');
</script>
클로저
- 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여
자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수
(출처 : https://poiemaweb.com/js-closure)
-즉, 함수는 주위의 환경을 기억하고 있다.
<script type="text/javascript">
function myFn(n1, n2){
//지역변수는 외부에서 호출 할 수 없다.
var n = n1 + n2;
//함수를 리턴한다.
//이 함수는 n값을 접근 할 수 있다.
return function(){
return n;
};
}
//리턴의 함수가 되엇으므로 result는 함수이다.
var result = myFn(10,10);
console.log(result);
//함수이므로 실행할 수 있다.
//해당 함수가 실행되면서 주위의 값들을 기억하고 있다.
console.log(result());
</script>지역변수 n 이 리턴되서 넘어올 때 선언되었을 떄 범위의 환경( var n = n1 + n2 ) 을 기억하여
밖에서 호출되어도 그 환경에 접근할 수 있다.
setInterval(함수, 시간)
2째 인수에 들어갈 숫자를 시간계산하여
1번째 인수에 들어간 함수를 그 시간간격으로 게속 실행 시켜준다.
var cnt = 0;
setInterval(function(){
cnt++
console.log(cnt);
}, 1000);1 2 3 4 ... 가 1초(= 1000 ms) 마다 실행한다.
for 문 밖에서 i 값 확인
for(var i=0; i<10;i++){
console.log('for문안의 i값 확인', i);
//9까지 실행되고 10에서 for문을 빠져나옴.
}
console.log('for문안의 i값 확인', i)
for문 밖에서 i 가 10인 것을 확인할 수 있다.
setTimeout(함수, 시간) - 일정 시간 후 함수를 실행
var myTimeout = function(n){
setTimeout(function(){
console.log(n);
}, 1000);
}
for(var i=0; i< 10; i++){
myTimeout(i);
}
console.log(i);console.log(n)을 1초 후에 출력하는 함수를 myTimeout에 담는다
시간을 .0으로 해도 즉시 실행되는 것은 아니다.
이미 선언된 함수를 우선처리한다.
결과 : for문 밖의 10 실행
1초 후 0 1 2 3 4 5 6 7 8 9 까지 실행
객체
- 메모리에 등록된 데이타(함수, 메서드, 자료 구조)
- 객체는 속성과 기능을 가지고 있다.
- 객체를 대입한 변수는 메모리에 올라간 객체의 주소를 참조 하고 있다.
- 객체를 대입한 변수는 참조 변수라고 한다.
기본자료형 :
var n1 = 100;
var n2 = n1;
console.log(n1, n2);
n2 = 200;
console.log(n1, n2);
객체참조 :
var arr1 = ['홍길동'];
var arr2 = arr1;
console.log(arr1, arr2);
arr2[0] = '이순신';
console.log(arr1, arr2);
객체 선언 :
{}의 기호로 객체를 선언 할 수 있다.
- 객체는 키와 값으로 이루어져 있다.
- 값에는 모든 데이타형(객체, 함수 포함)을 담을 수 있다.
- 키는 객체에 담긴값의 주소이다. 또한 개발자가 직접 정의 할 수 있다.
- 키는 주로 문자열로 지정을 한다.(숫자도 담을 수 있음)
- 값에 지정된 함수는 메서드라고 한다.
- 구문
var 변수명 = {
'키' : 값,
'키2' : 값,
'키3' : 값
}
1)
var obj = {};
var obj2 = new Object();
console.log(obj);
console.log(obj2);
2)
var obj3 = {
myName : '홍길동',
getmyName : function(){
console.log('메서드호출');
}
}
console.log(obj3);
3) 객체가 미리 선언이 되어 있어야 한다.
var obj4 = {};
//아래의 방법으로 객체.속성 혹은 객체.메서드 접근 할 경우에는
//객체가 미리 선언이 되어 있어야 한다.
obj4.name = '홍길동'; //속성
obj4.getName = function(){ //메서드
4) 속성명 호은 메서드명으로 객체 데이터 삽입하기.
obj3.myAge = 20;
obj3.myName = '이순신';
console.log(obj3);
//멤버에 접근하기
//멤버가 함수일 경우에는 메서드이다.
//멤서드는 함수이므로 실행을 하기위해서는 (); 해야한다.
console.log(obj3.myAge, obj3.myName, obj3.getmyName);
obj3.getmyName();
객체 내의 this 키워드
-객체의 메서드 내부에서 나 자신의 객체를 가르킨다.
<script type="text/javascript">
var obj4 = {
memberName : '홍길동',
getmemberName : function(){
return this.memberName;
}
}
console.log(obj4.getmemberName());
</script>결과 : 홍길동
체이닝기법 :
- 멤버호출 연산자를 활용하여 멤버를 호출하는 방식.
<script type="text/javascript">
var ojb5 = {
my : {
arr : []
}
}
console.log(ojb5.my.arr);
ojb5.my.arr.push('홍길동');
ojb5.my.arr.push('고길동');
console.log(ojb5);
</script>
var s = {
getUser : function(){
return {
print : function (){
console.log('pirnt');
}
}
}
}
s.getUser().print();결과 : print
<h1>객체 실습</h1>
실습. 아래 객체의change 메서드를 실행하였더니
객체의 arr 속성값이 [1,3,5]로 변환되었다.
chage메서드의 내부 코드를 작성하여 위의 결과값이 나오도록 하여라.
<script type="text/javascript">
var obj = {
arr : [1,2,3,4,5,6],
change : function(){
this.arr = [1,3,5];
}
}
obj.change(); // 메서드 실행
console.log(obj.arr); //[1,3,5]
</script> <script type="text/javascript">
var obj = {
arr : [1,2,3,4,5,6],
change : function(){
var nArray = [];
for(var i=0; i<this.arr.length; i++){
if(this.arr[i] %2 == 1){
nArray.push(this.arr[i]);
}
}
this.arr = nArray;
}
}
obj.change(); // 메서드 실행
console.log(obj.arr); //[1,3,5]