[HTML 요약정리] 05-3. 함수와 객체

 

1. 함수개요와 내장함수

 

• 함수개요
  함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트) { }로 구성되며 실행결과는 return문을 사용해서 리턴한다
  
  <함수 사용시 알아야 할 3가지>

1. 함수가 하는 일 : 함수명 2. 함수 인수의 개수와 타입 : 인수리스트 3. 함수의 실행결과 타입(리턴 타입) : return문

 

 

 

• 내장함수
  시스템이 제공하는 함수로 메시지 상자를 호출하거나 화면에 출력하는 등등의 작업을 제공한다

alert(메시지내용);

 

 

2. 사용자 정의함수

 

• 일반함수
  기본적인 형태의 사용자 정의함수로 function문을 사용해서 함수를 정의한다

function add(x,y) {return x+y;}

 

• 익명함수 : 이름없는 함수
  익명함수는 이름이 없는 함수로 필요한 곳에서 이름을 정의하거나 이름을 굳이 줄 필요가 없는 경우에 사용된다

function(){ }
// 이름이 없기 때문에 변수에 넣어서 사용하거나 함수의 인수로 사용

 

• 콜백함수
  이벤트에 반응하는 함수로 이벤트가 발생하면 자동으로 실행된다

image.onload = function() {
ctx. drawImage(image, 0 , 0); // 캔버스의 (0,0)좌표에 이미지를 그린다
}

 

• 즉시 실행함수(Self-Invoking Functions)
  함수 정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행된다

(function () {var x = "Hello!!";})()

 

3. 클로저

 

• 카운팅 딜레마
  카운터 딜레마는 특정 함수가 실행될 때마다 1씩 누적되는 변수를
  전역변수 또는 지역변수로 지정했을 때의 단점 때문에 발생한다
  전역변수이면 변수 값이 1씩 증가하는 카운팅은 발생하나 보안상 취약하고
  지역변수이면 보안상 좋으나 카운팅이 되지 않는 문제점이 발생한다

 

• 카운터변수를 전역변수로 선언
  카운트 변수 처리가 쉬우나 누구나 전역변수에 접근 가능해서 보안문제가 발생한다

var counter = 0; // 카운터변수 : 전역변수
function add1() {return counter+=1;}
add1(); // counter=1
add1(); // counter=2
document.write(counter); // counter=2

 

• 카운터변수를 지역변수로 선언
  함수 밖에서 카운터변수의 접근을 막아서 보안상 좋아지나 카운터가 동작되지 않는다

function add1() {
var counter=0; // 카운터변수 : 지역변수
return counter+=1;
}
add1(); // counter=1
add1(); // counter=1

 

• 클로저를 사용한 카운팅 딜레마 처리
  즉시실행함수와 내부함수를 결합한 클로저를 사용해서 변수의 보안기능과 누적 기능을 모두 충족시킬 수 있다

var add1=(function() { // 부모함수
var counter=0;
return function () {counter+=1; return counter} // 익명 내부함수
}) ();
add1(); // counter=1
add1(); // counter=2
document.write(counter); // counter 변수 접근 안 됨

 

4. 객체

 

• 자바스크립트에서 . 방법
  비즈니스로직(실무처리) 웹 프로그래밍에서 객체는 데이터 1건을 표현하며
  객체가 가진 값은 프로퍼티(속성, 멤버필드), 객체가 하는 일은 메소드(동작)로 기술한다

var 객체변수명={프로퍼티 : 값, 프로퍼티 : 값, ...}

 

• 객체 사용(접근) : 프로퍼티나 메소드를 사용해서 접근
  프로퍼티를 사용한 객체 값에 접근할 때는 객체명.프로퍼티명 또는 객체명["프로퍼티명"]과 같이 사용한다

var object1={
	number1:1230, // 프로퍼티(속성)
    string1:"yeontan", // 프로퍼티
    boolean1:true, // 프로퍼티
    array1:[52,273,103,32], // 프로퍼티, 값이 배열
    method1:function(){} // 프로퍼티, 값이 함수. 메소드라 부름
};

 

• 객체의 프로퍼티 반복 : for in
  객체의 프로퍼티 반복해서 접근하려면 for-in 문을 사용한다

for (var v1 in objStudent) {
	document.write(v1, ":", objStudent[v1]);
	document.write("<br>");
}

 

• 객체 프로퍼티 삭제 : delete 연산자
  객체 프로퍼티 삭제할 때는 [delete 객체.프로퍼티명]과 같이 delete 연산자를 사용한다

var objName = {name : "김왕쌍", subName : "kingdora"};
delete objName.subName; // objName 객체의 subName 프로퍼티 삭제

 

• 객체 비교
  두 객체는 객체를 가리키는 레퍼런스 (객체주소를 저장)변수가 같으면 같은 객체이다

var obj1 = {name:"yeontan"};
var obj3 = obj1;
if(obj1==obj3)
	document.write("같은 객체"); // 두 객체는 같기 때문에 이문장이 실행됨
else
	document.write("다른 객체");

 

• 생성자 함수
  생성자 함수는 객체를 생성할 때 사용하는 틀로 해당 객체의 형태를 결정한다

var PlayerCharacter = function(){};

 

 

2024.09.02