js 3일차 - 객체정리

###########################################################################
###########################################################################
6장. 객체 (object) - **********************
###########################################################################

1. 종류 3가지
  ==> 자바처럼 상속과 비슷한 개념(프로토타입(prototype) 관계)으로 계층구조화 되어 있음.
      최상위 객체는 Object 이다.
  ==> 객체의 구성요소는 변수,메서드(정적메서드, 인스턴스 메서드),생성자를 가짐.
  1) 데이터(기본+참조) 관련 객체
      -문자관련 ==> String 객체가 관리
      -수치    ==> Number 객체가 관리
      -날짜    ==> Date 객체가 관리
      -배열    ==> Array 객체가 관리 (자바의 List 역할, ***************)
                  Set/Map 같은 컬렉션 제공됨(ES6)
      -JSON   ==> object 객체가 관리
  2) BOM ( Browser Object Model)
    - 웹 브라우저 관련 객체 
    - 종류
      Window 객체 ( window 변수로 참조 )
      Screen 객체 ( screen 변수로 참조 )
      Histroy 객체 ( histroy 변수로 참조 )
      Location 객체 ( location 변수로 참조 )
      Navigator 객체 ( navigator 변수로 참조 )
    - 웹브라우저를 open하면 자동으로 생성됨.


  3) DOM ( Document Object Model )
   - html 문서 관련 객체
   - Document 객체 ( 자동으로 생성됨. document 변수로 참조 )


2. 데이터 관련 객체

 1) 문자데이터 관련 객체

   - String 객체 관리
   - 생성방법 3가지

     가. 리터럴값만 이용 (권장)
        let s = "hello";

     나. new 생성자 이용       
        let s2 = new String("hello");

     다.  생성자 이용    
       let s3 = String("hello");
     
    - 문자열 표현방법 3가지
      가. 'hello' 이용
      나. "hello" 이용
      다. `hello` 이용( 백틱, template literal ) (*****************************)

        * 백틱장점 2가지
1) 변수삽입 가능: ${변수}이용
2) 들여쓰기, 엔터 같은 동작이 그대로 적용되어 출력포맷의 가독성이 높아진다.


    - 메서드 조회
     http://developer.mozilla.com


2) 수치 데이터 관련 객체

   - 정수와 실수를 모두 관리한다.
   - Number 객체가 관리한다.

    - 생성방법 3가지

    가. 리터럴값만 이용 (권장)
        let n = 100;

     나. new 생성자 이용       
        let n2 = new Number(100);

     다.  생성자 이용    
       let n3 = Number(100);

    
    - Number객체 메서드 정리


3) 날짜 데이터 관련 객체

   - Date 객체가 관리.
   - 생성방법 2가지

      let d = new Date();

      let d2 = Date();


4) 배열 데이터 관련 객체

  - Array 객체가 관리
  - 특징: 자바의 List 처럼 동작됨.

  - 생성방법 
     
    var n = [10,20,30];
    var n = [];

    var n = new Array();
    var n = new Array(10,20,30);

    var n = Array();
    var n = Array(10,20,30);


3. spread 연산자 ( 전개구문 )(************************)

   기능: 배열|JSON 요소를 펼치는 기능으로서
        기존 배열을 펼쳐서 새로운 배열을 만들 때 사용함.

   문법: [...배열]

   예>

    // spread 연산자 (전개 구문)
    
     var n = [10,20,30];
     var x = n;  // 얕은 복사(주소값  복사, x 변경하면 n도 영향 받음)

     //1. 배열 복사 
     var n2 = [...n];   // 깊은 복사 ( 실제값 복사, n2 변경해도 n은 영향 없음 )
     console.log(n2);
    

     //2. 기존 배열에 새로운 값을 추가
     var n = [10,20,30];
     var n2 = [...n, 40, 50]
     var n2 = [40, 50, ...n]
     console.log(n2);
    
     //3. 배열 연결
     var n = [10,20,30];
     var n2 = [100,200,300];
    
     var n3 = [...n, ...n2];
     console.log(n3);
    

     // 4. 문자열 전개
     var x = [...'hello'];
     console.log(x);  // ['h', 'e', 'l', 'l', 'o']


4. BOM ( Browser Object Model)
    - 웹 브라우저 관련 객체 
    - 종류
      Window 객체 : 전역객체( window 변수를 생략하고 사용이 가능하다.(***) )
                   웹브라우저 창 자체를 의미.
      Screen 객체 : 창의 크기 정보 ( width/height )
      History 객체 : 웹 페이지의 뒤로/앞으로 기능
      Location 객체 : 웹 브라우저의 URL 정보
      Navigator 객체 : 웹 브라우저 자체 정보
    
    - 특징: 웹 브라우저를 open하면 자동으로 객체생성이 된다.
           개발자는 명시적 생성없이 참조해서 사용할 수 있음.
   어떤 변수명으로 되어 있을까?

    Window 객체 참조:  window 변수를 사용한다.
    Screen 객체 참조:  screen 변수를 사용한다.
    History 객체 참조:  history 변수를 사용한다.
    Location 객체 참조:  location 변수를 사용한다.
    Navigator 객체 참조:  navigator 변수를 사용한다.



5. Window 객체

  - 전역객체
  - window 변수로 참조 가능.
    하지만 일반적으로 생략해서 사용.
  
  - screen, location, history. navigator, document 은
    Window 객체의 속성이다.
    원래는 window.screen
         window.location
 window.history
 window.navigator
 window.document  사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다.

  1) 새로운 창 열고 닫기
  - window.opener : 자식창에서 부모창 참조할 때 사용.
  - 부모에서 새로운 창(자식창)을 만드는 방법

     var childWin = open("child.html");  // window.open("child.html", 옵션); 동일
 
    현재 창 닫기
      window.close();

    부모창 닫기
      opener.close();

    자식창 닫기
      childWin.close();
  
  2) setTimeout(function(){}, 1/1000);
    - 한번 만 실행됨.

  3) setInterval(function(){}, 1/1000);
    - 매번 실행
    - 해제방법: clearInterval(fun);

  
   4) alert("경고창")
      confirm("진짜 삭제할거임?")
      propmt("이름을 입력하세요");


5. JSON 객체 (*******************)

  1)문법
    {"key":value, key1:value1,...}

  2) 특징
    - value는 함수도 가능하다.
      만약 함수인 경우에 일반 key 접근시 this 사용해야 된다.
    - 속성 접근은 .(dot) 이용하거나 ["key값"] 형식의 연관배열 사용 가능 (************)
      연관배열의 특징은 "key값" 을 변수로 사용할 수 있다. (*****)

    - value값은 변수로 사용가능.
     만약 key와 value가 동일하면 key만 지정가능.
      예> { username:username } ==> {username}

    - value가 함수인 경우에는 :function 생략가능해서 자바의 메서드처럼 사용가능.
      예> 
         setUsername:function(n){this.username=n}
 ==> setUsername(n){this.username=n}

    - 메서드 정의 앞에 set / get 키워드 지정 가능.
      기존 메서드처럼 사용하면 안되고(  person.setUsername("이순신"), person.getUsername() )
      속성처럼 사용해야 된다. ( person.setUsername="이순신", person.getUsername )
      
       예>  
           set setUsername(n){this.username=n}
           get getUsername(){return this.username;}


    - key값도 변수로 사용가능. [변수명]
      
       예> var xxx = "username";

          {[xxx]:"홍길동" };  ==> {"username":"홍길동"}

      + 이용해서 연결해서 사용가능
         {[xxx+"01"]:"홍길동" }; ==> {"username01":"홍길동"}
       
    - 중첩가능
      
    - "{key:value}" --------> {key:value}
      "[10,20]"  --------> [10,20]
       JSON.parse("{key:value}");
       
       {key:value} ----> "{key:value}"
       [10,20] ----> "[10,20]"
       JSON.stringify({key:value})

       "10" --------> 10
        Number.parseInt("10");

10 ----------->"10"
String(10)

##################################
6. 함수 ( function *************************** X 200)

 1) 개요
  - 용도: 기능처리 담당 ( 자바의 메서드 역할 )

 2) 종류1
  
   - 일반함수: 일반적으로 사용되는 함수 의미.
            
   - generator 함수 : Generator 객체를 반환하는 함수.
   - 비동기 함수:      Promise를 객체를 반환하는 함수


 3) 함수 작성 방법 2가지

    가. 함수 선언식 ( 이름있는 함수 )
function 함수명([파라미터,..]){
   문장;
           [return 값;]
}

    나. 함수 표현식 ( 이름없는 함수, 익명함수 )
       var 변수 =  function ([파라미터,..]){
   문장;
   [return 값;]
};
        변수가 함수명으로 사용됨.

 4) 함수특징
   - 반드시 호출해야 된다. 
     (함수명을 이용)
   - 호출후 반드시 호출한 곳으로 돌아온다.
   - 호출할 때 인자값을 설정할 수 있고 
     돌아올때 리턴값이 존재할 수 있다.
   
   - JS 함수는 함수호출시 인자값의 갯수가 달라도 된다. (******)

   - 파라미터 갯수 > 인자값 갯수 경우에  인자값이 저장되고 남은 
     파라미터에는 undefined가 저장되는데 undefined 대신에 임의의 초기값을 설정할 수 있다.
     ==> 함수의 default 파라미터라고 부른다.
     ==> function fun(n=초기값,n2=초기값){}


  - 파라미터 갯수 < 인자값 갯수 경우에 파라미터에 저장되고 남은 
    인자값은 소실된다. 이 경우에 소실되는 인자값을 배열로 가져올 수 있다.
    ==> 함수의 rest 파라미터라고 부른다. 
        주의할 점은 파라미터 가장 마지막에만 사용된다.

    ==> function fun(n,...n2){}
        function fun(n,n2,...n3){} 
        fun(10,20,30);

  - 함수호출시 spread 연산자 이용한 방식으로 인자값을 전달 할 수 있다.
   
    예>
        function fun(n,n2){}


        var x = [10,20];
fun(x[0],x[1]); //기본
fun(...x);      //spread

  - 기본형 데이터와 참조형 데이터 인자값 사용

  - 기능에 따라 4가지 형태

    가. 파라미터없고 리턴값없는 형태
    나. 파라미터있고 리턴값없는 형태
    다. 파라미터없고 리턴값있는 형태
    라. 파라미터있고 리턴값있는 형태

  - JS함수는 일급객체(first-class) 이다.
    일급객체의 핵심개념은 함수를 데이터로 처리하는 것이다.
    함수이용해서 할수 있는 작업은 다음과 같다.
    가. 함수를 변수에 저장할 수 있다.
    나. 함수호출시 인자값으로 함수를 사용할 수 있다.
     예> arr.forEach(인자값);
         personList.forEach(function(data,idx){});
 
    다. 함수호출후 리턴값으로 함수를 사용할 수 있다.

     예>
         var x = function(){};
      
         function fun(){

   // return 값;
   return x;
 }


  - 콜백함수(callback)
   => 개념: 사용자가 명시적으로 호출하지 않고
          시스템이 특정상황에 호출하는 함수를 의미한다.
   => 주로 이벤트 처리시 사용된다.

    자바의 swing 이벤트

     Button btnOk= new Button("OK");

      // 사용자호출;addActionListener()
         시스템호출:actionPerformed()
     btnOk.addActionListener(new ActionListener(){
   public void actionPerformed(ActionEvent e){

   }
     });