41. JavaScript(3)

인수와 매개변수

      1. 매개변수를 선언할 때에는 선언키워드 (var, let, const)를 사용하지 않는다. (매개변수는 변수명만 작성한다.)
      2. 디폴트 매개변수 처리가 가능하다. 
        1) 변수를 선언하고 어떤 값을 저장하지 않으면 undefined 값을 가진다. 
        2) 매개변수로 인수를 전달하지 않으면 매개변수는 undefined 값을 가진다. 
        3) 매개변수의 undefined 여부에 따라 매개변수의 초기화 작업을 진행할 수 있다. 
        4) 매개변수의 디폴트 값을 직접 저장할 수 있다. 
      3. 전개 연산자(...)가 존재한다. 
        1) 인수의 개수가 정해지지 않는 경우에 사용한다. 
        2) 매개변수를 배열로 처리한다. 
      4. 인수를 저장하는 arguments 객체가 있다. 
        1) 매개변수를 선언하지 않아도 모든 인수는 argument 객체에 저장된다. 
        2) arguments 객체는 배열과 유사하게 동작한다.

선언 함수 - 인수와 매개변수

    function myFunc3(a){
      console.log(a);
    }
    myFunc3(10);
    myFunc3('Hello World');
    var a =true;
    myFunc3(a);

익명 함수 - 인수와 매개변수

	var myFunc4 = (b)=>{
      console.log(b);
    }

    myFunc4(100);
    myFunc4('안녕하세요');
    var b = false;
    myFunc4(b);

    ((c)=>{
      console.log(c);
    })(1000)

디폴트 매개변수

    function myFunc5(a){
      if(a === undefined){ //a로 전달된 인수가 없으면 a = 0이다. 
        a = 0;
      }
      console.log(a);
    }
    myFunc5(10);
    myFunc5();
    
    디폴트 매개변수 (ES6)
    function myFunc6(a = 0){
      console.log(a);
    }
    myFunc6(10);
    myFunc6();

전개연산자(...)

	function myFunc7(...a){
      for(let i = 0; i < a.length;i++){
        console.log(a[i]);
      }
    }
    myFunc7(1,2,3,4,5);

arguments 객체

 function myFunc8(){
      for(let i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
      }
    }
    myFunc8(6,7,8,9,10);

반환(return)

1. 반환타입의 작성하지 않는다. 
2. return 반환값;을 통해서 값을 반환 할 수 있다. 
3. return;을 통해서 함수를 종료할 수 있다. 

콜백함수

1. 함수에 함수를 전달 할 수 있는 개념이다. 
2. 인수(함수) -> 매개변수(함수를 저장한 변수) 흐름으로 동작한다. 
3. 함수를 전달 받은 함수는 매개변수를 함수 호출하듯이 처리하여 전달 받은 함수를 실행한다. 

	// 인수가 없는 콜백
    function myFunc9(a){
      a();
    }
    myFunc9(function(){
      console.log('함수 호출');
    });

    // 인수가 있는 콜백
    function myFunc10(a, b, callback){
      callback(a, b);
    }
    myFunc10('Hello', 'world', function(x,y){
      console.log(x, y);
    })

재귀호출

1. recursive call
2. 어떤 함수가 자신을 호출하는 것을 의미한다. 
3. 반복 동작을 구현할 때 사용한다. 

	//factorial 구하기 
      5! = 5*4! = 5*4*3*2*1
   
    function factorial(a){
      if(a === 1){
        return 1;
      } else {
        return a * factorial(a-1);
      }
    }

타이머 함수 (내장함수)

1. setTimeout
   1) 특정 시간 후에 한 번만 동작한다. 
   2) 동작
      var timerId = setTimeout(함수, 시간(밀리초));
   3) 동작 취소 
      clearTimeout(timeId);
2. setInterval
   1) 특정 시간 간격으로 반복해서 동작한다.
   2) 동작
      var timerId = setInterval(함수, 시간(밀리초));
   3) 동작취소       
      clearInterval(timeId);
      
    // setTimeout
    var timerId = setTimeout(function(){
      console.log('3초 지났다.');
    },3000);   //3000은 3초이다. 
    clearTimeout(timerId);
    
    //setInterval
    var n =1;
    var timerId = setInterval(function(){
      if(n > 10){
        clearInterval(timerId);
      } else {
        console.log(n++);
      }
    }, 1000); 

객체(Object)

1. 여러 데이터로 구성된 하나의 데이터를 의미한다.
2. 중괄호 {}를 이용해서 객체의 데이터를 묶는다. 
3. 객체 형식
   {
      속성: 값,
      '속성': 값
    }
4. 객체 속성
   1) 객체.속성
   2) 객체['속성']
5. JavaScript 객체 표기법을 이용한 데이터 교환 형식을 JSON 이라고 한다.   

	//객체 속성 동적 처리(추가, 삭제, 수정)

	// 빈 객체 생성
	var car = {};

	// 속성 추가 
	car.model = '모닝';
	car.maker = 'kia';
    
	// 속성 수정
	car.model = '레이';

	// 속성 삭제
    delete car.maker;

    console.log(car);

생성자 함수

1. 객체를 만드는 함수이다. 
2. new 키워드를 이용해서 객체를 만들 수 있다. 
3. 관례상 첫 글자를 대문자로 작성한다.
4. 생성자 함수 형식
   function 함수명(매개변수, 매개변수, ...){
     this 속성 = 매개변수;
     this 속성 = 매개변수;
       ...
    }
    
    // 객체는 for-in문으로 각 속성을 순회할 수 있다. 
    var book = {
      title: '어린왕자', 
      author: '생택쥐페리',
      price: 10000
    };

    //객체 속성 순회 
    for(let p in book){ // 객체 book의 속성(property)들이 변수 p로 하나씩 전달된다.
                        // 이 때 변수 p의 타입은 string이므로 , book.p는 동작하지 않고 book[p]만 동작한다. 
      console.log(book.p); //안됨
      console.log(book[p]);

Builtin Object

1. JavaScript 객체 -> 문자열 형식의 JSON 데이터
   var 문자열 = JSON.stringify(객체)

2. 문자열 형식의 JSON 데이터 -> JavaScript 객체
   var 객체 = JSON.parse(문자열)
   
   // 객체 생성
    var person = {
      name: '홍길동',
      age: 30
    };

    // 객체 -> 문자열
    var str = JSON.stringify(person);
    console.log(typeof str, str);

    // 문자열 -> 객체
    var person = JSON.parse(str);
    console.log(typeof person, person);

Date 내장 객체

1. 타임스탬프 기반으로 날짜와 시간을 나타낸다.
   (타임스탬프 : 1970년 1월 1일 자정 UTC 기준으로 증가하고 있는 밀리초)
2. 타임스탬프, 년, 월, 일, 시, 분, 초 등 원하는 값을 얻을 수 있다.

	// 타임스탬프
    var timestamp = Date.now();
    console.log(timestamp);

    // 문자열 형식의 현재 날짜와 시간
    var strNow = Date();  // new Data().toString()
    console.log(typeof strNow, strNow);

    // 객체 형식의 현재 날짜와 시간
    var now = new Date();
    console.log(typeof now, now);

    // 년,월,일,시,분,초,타임스탬프
    var year = now.getFullYear();
    var month = now.getMonth();  // 주의! 0 ~ 11
    var day = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var timestamp = now.getTime();
    console.log(year, month, day, hour, minute, second, timestamp);

    // 특정 날짜와 시간을 가진 객체 생성
    var someday = new Date(2023, 8, 30, 16, 30, 30);  // 2023-09-30 16:30:30 (8월이 아님 주의!)
    console.log(someday);

문제1. 시계만들기

<style>
    .warning {
      color: crimson;
    }
  </style>
  <div id="watch">
    <span id="year"></span>년
    <span id="month"></span>월
    <span id="day"></span>일
    <span id="hour"></span>시
    <span id="minute"></span>분
    <span id="second"></span>초
  </div>
  <script>
    setInterval(function(){
      // 화면 표시
      var now = new Date();
      document.getElementById('year').textContent = now.getFullYear();
      document.getElementById('month').textContent = String(now.getMonth() + 1).padStart(2, '0');
      document.getElementById('day').textContent = String(now.getDate()).padStart(2, '0');
      document.getElementById('hour').textContent = String(now.getHours()).padStart(2, '0');
      document.getElementById('minute').textContent = String(now.getMinutes()).padStart(2, '0');
      document.getElementById('second').textContent = String(now.getSeconds()).padStart(2, '0');
      // 50초 넘으면 class 속성 변경
      if(now.getSeconds() >= 50){
        document.getElementById('watch').setAttribute('class', 'warning');
      } else {
        document.getElementById('watch').removeAttribute('class');
      }
    }, 1000);
  </script>