분기문

<ul>
    <li>국어 <span id="kor">80</span>점</li>
    <li>영어 <span id="eng">85</span>점</li>
    <li>수학 <span id="math">95</span>점</li>
    <li>평균 <span id="ave"></span>점</li>
    <li>학점 <span id="grade"></span>점</li>
  </ul>

  <script>
  // 국어, 영어, 수학 점수 변수로 저장하기
  var kor = Number(document.getElementById('kor').textContent)
  var eng = Number(document.getElementById('eng').textContent)
  var math = Number(document.getElementById('math').textContent)

  // 평균 구하기
  var ave = (kor+eng+math)/3;

  // 학점 구하기
  var grade;
  if(ave>=90){
    grade='A';
  } else if(ave>=80){
    grade='B';
  } else if(ave>=70){
    grade='C';
  } else if(ave>=60){
    grade='D';
  } else {
    grade='F';
  }

  // 결과 표시하기
    document.getElementById('ave').textContent = ave;
    document.getElementById('grade').textContent = grade;


  </script>

---

반복문

  <div id="box3"></div>
  <script>
    var str = '<select name="month"><option value="">월 선택</option>';
    for(let m = 1; m <= 12; m++){
      str += '<option value="' + m + '">' + m + '월</option>';
    }
    str += '</select>';
    document.getElementById('box3').innerHTML = str;
  </script>

---

배열

1. 대괄호 []를 이용해서 각 배열 요소를 묶는다.
2. 서로 다른 타입(숫자, 문자열, 논리값 등)을 하나의 배열에 저장할 수 있다.
3. 인덱스는 0부터 시작한다.
4. 배열의 길이는 length 속성으로 확인할 수 있다.

배열 추가, 수정, 삭제

 <div id="box3"></div>
  <script>

    // box3 문서 객체
    var box3 = document.getElementById('box3');

    // 배열 선언(비어 있는 배열)
    var array = [];

    // 추가
    // 1. push(요소)    : 마지막 요소로 추가하기
    // 2. unshift(요소) : 첫번째 요소로 추가하기
    array.push('제육볶음');
    array.push('짬뽕');
    array.unshift('짜장');
    array.unshift('된장찌개');
    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

    // 삭제
    // 1. pop()   : 마지막 요소 삭제하기
    // 2. shift() : 첫번째 요소 삭제하기
    array.pop();
    array.shift();
    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

    // 수정
    // splice(수정을 시작할 인덱스, 삭제할 요소의 개수, [추가할 요소1, 추가할 요소2, ...])

    // 마지막 요소로 '계란찜' 추가
    array.splice(array.length, 0, '계란찜');

    // 두번째 요소를 '순대국' 수정
    array.splice(1, 1, '순대국');  // 인덱스 1부터 1개 요소를 지우고, '순대국' 넣기

    // 첫번째 요소를 삭제
    array.splice(0, 1);  // 인덱스 0부터 1개 요소 지우기

    for(let i = 0; i < array.length; i++){
      box3.innerHTML += array[i] + '<br>';
    }

  </script>

---

함수

선언 함수

1. 함수의 이름이 있다.
2. 함수 정의(함수를 만드는 것)와 함수 호출(함수를 사용하는 것)로 구분한다.
3. 함수 정의 형식

function 함수명([매개변수]){
	함수 본문
		return 반환값;
}

4. 함수 호출 형식
   함수명([인수]);

익명 함수

1. 함수의 이름이 없다.
2. 호이스팅 대상이 아니다. (함수 정의를 반드시 먼저 해야 한다.)
3. 함수 정의 형식
   1) 일반 익명 함수

function([매개변수]){
	함수 본문
		return 반환값
}

2) 화살표 익명 함수

([매개변수])=>{
	함수 본문
		return 반환값
}

4. 함수 호출 형식
   1) 함수를 변수에 저장하기
   (1) 일반 익명 함수

var 함수명 = function(){
	}
함수명();

(2) 화살표 익명 함수

var 함수명 = ()=>{
	}
함수명();

2) 자기 호출 (함수 정의와 함수 호출이 동시에 진행되는 방식)
(1) 일반 익명 함수

(function(){
	})();

(2) 화살표 익명 함수

(()=>{
	})();

3) 이벤트 리스너로 등록하기
(1) 일반 익명 함수

문서객체.addEventListener('이벤트', function(){
	});

(2) 화살표 익명 함수

문서객체.addEventListener('이벤트', ()=>{
	});

---

인수와 매개변수

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

    // 익명 함수 - 인수와 매개변수
    var myFunc4 = (b)=>{
      console.log(b);
    }
    myFunc4(100); //100 출력
    myFunc4('안녕하세요'); //안녕하세요 출력
    var b = false;
    myFunc4(b); //false 출력

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

---

    // 디폴트 매개변수(ES6)
    function myFunc6(a = 0){ // a로 전해지는 값이 없으면 a의 값은 0
      console.log(a);
    }
    myFunc6(10);
    myFunc6(); // 0 출력

---

    // arguments 객체
    function myFunc8(){
      for(let i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
      }
    }
    myFunc8(6, 7, 8, 9, 10); // 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. 반복 동작을 구현할 때 사용한다.

---

타이머 함수(내장 함수)

1. setTimeout
   1) 특정 시간 후에 한 번만 동작한다.
   2) 동작
   var timerId = setTimeout(함수, 시간(밀리초));
   3) 동작 취소
   clearTimeout(timerId);
   
2. setInterval
   1) 특정 시간 간격으로 반복해서 동작한다.
   2) 동작
   var timerId = setInterval(함수, 시간(밀리초));
   3) 동작 취소
   clearInterval(timerId);

// 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);