CH5- sec3. 동작을 처리하는 자바스크립트와 제이쿼리 라이브러리

< section 3 : 함수와 객체>

  ▶ 함수?  특정로직처리에 사용하며 재사용을 목적으로 만들어짐

시스템이 제공하는 내장함수와 사용자가 만드는 사용자 정의 함수가 있음

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

 

▶내장함수 : 시스템이 제공

예) 메시지 상자 호출

 alert(메시지내용);

 

▶사용자 정의 함수

var 함수명= function(){} 와 같은 형태 작성한 함수를 사용할 때는 함수명()과 같이 함수를 호출한다

-일반함수

1. 함수 선언문으로 정의하는 방식

2. 함수 표현식으로 정의하는 방식 ---권장

 

-익명함수 : 이름없는 함수

이름이 없다는 것은 특정 경우에만 사용하고 사용 후 자동으로 제거되기 때문에 메모리 관리에도 좋다

주로 이벤트처리(콜백함수), 즉시실행 함수, 클로저, 함수 표현식에 사용된다

예) var v1=function(){};

 

-콜백함수

: 이벤트에 반응하는 함수로 이벤트가 발생하면 자동으로 실행됨

 

-즉시 실행함수

: 함수정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행

함수 선언부와 바디를 ()로 싸서 선언한다

예) (function(){var x="hello"})();

함수가 선언되자마자 실행되는 즉시 실행함수는 같은 함수를 다시 실행할 수 없으며, 최초에 1번만 실행해야 하는 초기화 등에 사용된다

 

▶클로저 

: 즉시실행 내부함수로 함수의 캡슐화, 런타임 실행 시 인자 값을 넘겨서 자동 동작되는 작업에 사용함

함수 안에 리턴값으로 정의되는 익명함수로 카운터 딜레마에 사용됨

예)  var func1=function(){

            return function() {

                return 1;}

          ;}();

 

-카운팅 딜레마

:전역변수와 지역변수 스코프 문제로 전연변수는 웹 페이지 내에서 긴 스코프를 가져서 해당 페이지가 서비스되는동안 사용 가능한 반면, 접근이 쉬워서 보안상 취약하다는 문제점을 갖음

반면 지역변수는 함수내의 스코프만 갖기 때문에 다른 함수에서 접근할 수 없어서 보안상 더 좋다

또한 지역변수는 해당 함수의 사용이 끝나면 사라져서 메모리관리도 좋다

 카운터 딜레마는 특정 함수가 실행될 때마다 1씩 누적되는 변수를 전역변수 또는 지역변수로 지정했을때의 단점 때문에 발생한다

카운터 변수가 전역변수이면 변수 값이 1씩 증가하는 카운팅은 발생하나 보안상 취약하다는 문제점이 발생하고 지역변수로 지정하면 보안상 좋으나 카운팅이 되지 않는 문제점이 발생한다

====>>> 해결할 때 클로저를 사용함!!

 

- 카운터변수를 전역변수로 선언

: 카운트변수 처리가 쉬우나 누구나 전역변수에 접근 가능해서 보안문제가 발생함

그래서 카운터 변수를 지역변수로 작성해야 한다

 

-카운터변수를 지역변수로 선언

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

함수를 호출할 때마다 카운터가 0으로 초기화되어 카운팅이 안된다

이 문제를 해결하려면 즉시실행함수와 내부함수를 결합한 클로저를 사용해야 한다

 

-클로저를 사용한 카운팅 딜레마 처리

즉시실행함수와 내부함수를 결합한 클로저를 사용해서 변수의 보안기능과 누적기능을 모두 충족시킬수 있음

클로저의 원리는딱 한번만 실행되는 즉시실행함수를 사용해서 자식인 익명 내부함수가 부모함수의 스코프에 접근하다

 

▶객체 

-자바스크립트에서

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

객체의 프로퍼티 값에는 배열, 함수도 올수 있으며 객체 안에 기술된 함수는 객체종속으로 메소드라 부른다

 

- 객체 사용(접근) : 프로퍼티나 메소드를 사용해서 접근

프로퍼티 값 세팅 : 객체명. 프로퍼티명 = 새값;

프로퍼티 값 겟팅 : 객체명. 프로퍼티명

새 프로퍼티 생성 : 객체명. 새프로퍼티명= 값;

 

-객체의 프로퍼티 반복 : for in

객체에서 속성 1개를 뽑아서 속성저장변수에 넣어서 속성의 개수만큼 반복처리함

속성저장변수를 선언하면 변수의 영역을 좁게 줘서 다 쓴 후에 메모리 해제가 빨리된다

 

-객체 프로퍼티 삭제 : delete 연산자

delete 객체.프로퍼티명

 

-객체비교

두 객체는 객체를 가리키는 레퍼런스 변수가 같으면 같은 객체

예) var obj1={name:"홍길동"};

      var obj3=obj1;

if(obj1==obj3)

   document.write("같은 객체"); //두객체는 같기 때문에 이 문장이 실행

else

  document.write("다른 객체");

 

객체가 가진 값이 같더라도 객체를 각각 생성한 경우 두 객체는 서로 다른 객체이다

 

만약, 비교하려는 객체가 문자열 타입일 때는 ===연산자를 사용해서 비교한다

문자열이 아닌 객체의 내용을 비교할 때는 JSON.stringify(객체) 메소드를 사용한다

 

-생성자 함수

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

생성자 함수명은 클래스명을 작성하는 규칙과 같이 첫글자를 대문자로 시작하고  단어가 바뀔 경우 다음 단어의 첫글자를 대문자로 쓴다

생성자는 주로 프로퍼티값 셋팅/겟팅에 사용된다

 

-내장객체 

자바스크립트는 숫자, 문자열, 배열, 날짜 객체를 제공한다

예) Window, Document, Screen, History, Location, Navigator  등등