Day10

함수(function)
-여러 명령문을 그룹(코드블록 {}) 으로 묶어 새로운 명령(어)처럼 사용한다.
-함수를 사용(실행)하려면 먼저 method가 정의 되어야 한다.
function num(num1,num2){return num1 + num2}
const num = (num1, num2) => return num1 + num2
-함수가 실행 후 return을 하면 실행 결과를 다른 변수에 저장 할 수 있다
const result = num(300,400);

• 기본형변수(primitive type varriable)
  숫자형, 문자열형 등등 값을 직접 저장하는 변수

• 매개변수,argument(아규먼트)
  numAdd(num1, num2) 코드에서 num1 과 num2 변수를 말한다. 데이터의 전달을 매개한다.

Math.random()

Math 라는 클래스(패키지, 묶음)에 들어있는 random() 함수를 호출하여 그 함수가 return 하는 값을 rndNum 변수에 받겠다(저장해 놓겠다)

document.writeln(intRndNum);

document 객체(browser 화면)에 준비되어있는 ( 들어있는 ) writeln() 함수에게 intRndNum 변수에 저장된 값을 전달하고 처리를 해죠 라고 요청을 한다
요청을 하고 처리된 결과는 "나는 관심 없어~"

function numAdd(num1, num2) {
      return num1 + num2;
    }
    let result = numAdd();
    document.writeln(result);

numAdd() 함수를 호출하면서 아무런 값도 전달하지 않기
numAdd(num1 = undefined, num2 = undefined) 처럼 코드가 실행된다.
결국 return undefined + undefined 가 실행되고
return undefined 가 실행될때 return NaN 로 변환되어 실행된다.
그결과를 저장한 result 의 값이 NaN이 된다.

• JS 호이스팅 :
  function 키워드로 선언된 함수는 코드가 실행되기 전에 코드를 재배열하여 함수를 script 상단으로 끌어 올리기를 한다.
  코드가 전체적으로 재배열이 이루어지기 때문에 처음 실행할때 다소 비효율적인 부분이 작동된다
  function은 위치 상관없이 사용할 수 있다

• 함수 = () => { } : 화살표 함수, ES5이상에서 사용
  이 함수 선언문은 호이스팅이 일어나지 않는다
  권장 : 함수는 사용하기(호출하기) 전에 반드시 먼저 선언하자

• lambda 코드
  const fun3 = (num1, num2) => num1 + num2;
  함수의 몸체 코드블럭에 단 한라인의 코드만 있고 그 코드가 return 명령일때
  { } 과 return 키워드를 생략할수 있다.
  
  

• 참조형(Reference 형) 변수
  참조형 변수는 원본의 내용이 복사되는 것이 아니고 원본이 저장된 기억장소의 주조만 변수에 저장된다. 복사된 변수의 요소(속성)을 변경하면 원본의 내용이 변경된다
  한편으로는 많이 편리한 기능이지만 잘못 다루면 원본 데이터를 손상시킬수 있다
  배열도 참조형 변수다, 객체도 참조형 변수다
  ex)
  const h1 = document.querySelector("h1.h1");
  
  화면에 있는 h1 tag 정보를 h1 변수에 보관하기
  이 코드는 화면의 h1 tag 정보를 h1 변수에 복사하는 것이 아니라 어딘가에 저장된 h1 tag 정보가 저장된 기억장소의 주소만 h1 에 보관된다.
  h1.textContent = "우리나라" 라는 코드가 실행되면 어딘가에 저장된 h1 tag 정보의 textContext 가 변경된다.

• 즉시 실행 함수 IIFE(Immediately Invoked Function Expression)

(() => {
      let num1 = 22;
      let num2 = 33;
      document.writeln(num1 + num2);
    })(); 

스크립트가 시작될때 최초에 단 한번만 실행하고 더이상 실행할 이유가 없는 함수
선언하고 "즉시 실행(함수의 즉시 실행)"
이 함수는 이름이 없는 무명함수이며 한번만 실행되고 소멸된다.
메모리 leak (누수) 방지 = 사용하지 않는 메모리 공간 낭비를 방지
메모리를 많이쓰면 브라우저가 무거워져서 화면이 늦게뜨는 현상이 발생할 수 있다.
js에만 있는 문법이다.

• 객체의 분해(distructure)
  

const 성춘향 = {
      이름: "성춘향",
      나이: 16,
      주소: "남원시",
    };
const { 이름, 나이, 주소 } = 성춘향;

ES5 이상에서만 사용가능한 코드
이름, 나이, 주소 변수를 선언하고
이름 = 성춘향.이름, 주소 = 성춘향.주소, 나이 = 성춘향.나이
코드를 실행하여 각 속성을 변수에 저장하는 것과 같다.

const score = [90, 80, 77, 60, 100, 90, 95];
const subScore = score.slice(0, 3);

원본인 score 배열의 0 index 값부터 3 index 값까지 잘라서 subScore에 저장하라

• forEach의 num 와 index 매개변수

nums.forEach((num, index) => {
    divs[index].textContent = num;
  });

num 매개변수 : nums 배열의 각 위치별 요소 값을 담고 있는 변수
index 매개변수 : forEach() 가 반복되는 동안 0~ 배열개수 -1 숫자를 자동으로 count하여 {} 내부에서 사용할수 있도록 만들어진 변수

• document.location.reload();

키보드에서 F5 키를 누른 것처럼 정말로 화면을 새로 고침하라

---

• 그외

객체나 함수가 없을 때 콘솔에 ReferenceError 가 나온다