Javascript : 함수 (function), 변수(var, let, const)

🍵 함수 (function)

데이터를 저장할 때 변수를 사용했으나 변수에는 데이터를 저장만 할 수 있고 코드는 저장할 수 없다. 하지만 함수는 코드를 메모리에 저장하고 필요할 때마다 호출해 사용할 수 있다. 즉 코드를 저장하고 재사용이 가능함. 함수는 프로그래밍 코드를 저장하는 공간이다. 자바스크립트 해석기가 함수를 만나면 해당 함수를 메모리 공간에 기억만 한다. 즉 함수를 만나 바로 실행하지 않고 기억만 해둔다. 이후 함수를 호출하면 해당 함수를 실행.

[기본형]

• 일반 함수 정의문
  function 함수명(){실행시킬 자바스크립트 코드;}
  함수명(); -> 일반 함수 호출문. 함수 실행.
• 함수 표현식 (익명 함수)
  let 변수 = function(){실행시킬 자바스크립트 코드;}
  변수명(); -> 익명 함수 호출문.

☕ 함수와 변수의 차이

변수

• 1개의 데이터 저장
• var 또는 let, const 같은 키워드 사용해 선언
• 문자형, 숫자형, 논리형과 같은 데이터 저장
• 객체 참조 가능

함수

• 자바스크립트 코드를 저장
• function 키워드 사용해 선언
• 출력문, 제어문 등의 코드 저장하고 실행 결과값 반환

☕ 함수의 호이스팅

해당 함수를 자바스크립트 최상단으로 끌어올려 기억하는 것을 말함. 일반 함수 정의문은 호이스팅이 가능하나 익명 함수는 지원하지 않는다. 일반 함수에 호이스팅을 적용하면 정의문보다 먼저 함수명이 호출되어도 정상 실행한다.

	 <script>
  var count = 0;

  myFnc(); // hello1 반환
  
  // 일반 함수
  function myFnc() {
    count++;
    document.write("hello" + count, "<br/>");
  }

  myFnc(); // hello2 반환

  // theFnc(); 익명함수는 호이스팅 기능이 없어 함수 선언 이전에 호출하면 오류가 난다.
  
  // 익명 함수
  var theFnc = function () {
    count++;
    document.write("bye" + count, "<br/>");
  };

  theFnc(); // bye1 반환
</script>

🍵 var let const

var 대신 let과 const 사용
변경될 값은 let, 변경되지 않는 값은 const 사용

함수 안에서만 쓰는 지역변수

지역변수를 선언하려면 예약어 var와 함께 변수 이름을 지정한다. 지역변수는 해당 함수 바깥으로 나올 수 없다.

자유롭게 쓰는 전역변수

전역변수는 스크립트 내에서 적용 범위를 제한하지 않고 쓸 수 있다. 전역변수로 사용하려면 함수 밖에서 선언하거나 함수 안에 var키워드 없이 선언해야 한다. 함수 안에 선언해도 var 예약어가 없으면 전역변수로 사용된다.

<script>
  // 호이스팅
  var x = 10;

  function displayNumber() {
    console.log("x는 : " + x); //10
    console.log("y는 : " + y);
    // Uncaught ReferenceError: Cannot access 'y' before initialization
    // y를 먼저 선언하고 초기화 하기 이전에는 해당 변수 사용 불가 오류.

    let y = 20; // let대신 var를 넣으면 오류를 발생하지 않는다.
    // 따라서 위험성이 높아 var 사용을 지양함.
  }
  displayNumber();
</script>

☕ 매개변수가 있는 함수

함수를 호출할 때마다 결과를 다르게 하고 싶다면 매개변수를 이용한다. 매개변수는 파라미터라고도 부르고 함수를 호출할 때 인자값(인수)을 넘겨받아 함수 안에서 활용할 수 있는 특별한 변수이다. 함수에 전달된 인자값은 매개변수에 순차적으로 대입된다.

[기본형]
function 함수명(매개변수1, 매개변수2..){
자바스크립트 코드
}

<script>
  //스테틱한 함수. 10과 10만 더할 수 있다.
  function addNumber1() {
    let num1 = 10;
    let num2 = 10;
    return num1 + num2; // 함수 실행 결과 반환
  }

  let result = addNumber1();
  console.log(result);

  // 매개변수가 있는 함수. 함수 호출할 때마다 다른 수를 더해서 다른 값을 반환.
  function addNumber2(num1, num2) {
    return num1 + num2;
  }

  let result2 = addNumber2(20, 30);
  console.log(result2);
  result2 = addNumber2(157, 489);
  console.log(result2);
</script>

🍙 클릭할 때마다 박스 색 랜덤 변경

🍙 간단한 로그인 알고리즘

	<script>
  const userId = "ezen1004";
  let userPw = "1234";

  // 사용자가 입력한 아이디와 비번
  let input_id = prompt("아이디를 입력하세요.");
  let input_pw = prompt("비밀번호를 입력하세요.");

  function login(id, pw) {
    // 아이디 일치 확인
    if (id == userId) {
      // 아이디 일치하면 비번 확인
      if (pw == userPw) {
        document.write(`${id}님 방문을 환영합니다.`);
      } else {
        // 비밀번호 일치하지 않을 때
        alert("잘못된 비밀번호입니다.");
      }
    } else {
      // 아이디 일치하지 않을 때
      alert("존재하지 않는 아이디입니다.");
    }
  }

  login(input_id, input_pw);
</script>

☕ 함수에서 return문의 역할

결과값 반환. 반복문의 break문과 비슷하게 코드가 강제 종료된다.
return; 만 쓰면 값 반환하지 않고 종료만 한다.

[기본형]

• 일반함수 정의문
  function 함수명(){
  자바스크립트 코드1;
  return 데이터(값); -> 데이터 값 반환하고 종료
  자바스크립트 코드2; -> 실행하지 않고 무시됨
  }
• 익명함수(함수표현식)
  let 변수 = function(){
  자바스크립트 코드1;
  return 데이터(값); -> 데이터 값 반환하고 종료
  자바스크립트 코드2; -> 실행하지 않고 무시됨
  }

☕ 화살표 함수

ES6 버전부터는 익명함수를 표기할 때 직관적으로 만들 수 있는 화살표 함수가 생겼다.

[기본형]
let 변수 = (매개변수) => {코드};

☕ 매개변수에 기본값 지정하기

	<script>
  function multiple(a, b = 5, c = 10) {
    // 매개변수의 숫자로 연산
    return a * b + c;
  }

  let result = multiple(5, 10, 20); // a=5 b=10 c=20
  console.log(result);

  result = multiple(10, 20); // a=10 b=20 c=10(기본값)
  console.log(result);

  result = multiple(30); // a=30 b=5(기본값) c=10(기본값)
  console.log(result);
</script>

☕ 객체 행성자 함수 (Objexct Constructor Function)

내장객체를 생성할 때는 자바스크립트 엔진에 내장되어있는 객체 생성자 함수를 사용해 생성한다. 객체 생성자 함수는 객체 생성한 후에 객체를 반환한다. 일종의 빵틀과 비슷한 역할이다. 객체 틀을 하나 만들어 두고 동일한 형식의 객체를 여러개 찍어내고 싶을 때 사용한다.

[기본형]
function 함수명(매개변수1, 매개변수2..){
this.속성명 = 값;
this.함수명 = function(){코드;}
}
let 참조변수(인스턴스네임) = new 함수명();
let 참조변수 = {속성 : 새 값, 함수명 : function(){메서드 내용}}

<script>
  // 객체 생성자 함수
  function CheckWeight(name, height, weight) {
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight;
    this.minWeight;
    this.maxWeight;
    // 사용자 이름 키 몸무게 나타내는 메서드
    this.getInfo = function () {
      let str = "";
      str += "이름 :" + this.userName + ", ";
      str += "키 :" + this.userHeight + ", ";
      str += "몸무게 :" + this.userWeight + "<br/>";
      return str;
    };
    // 정상 몸무게, 표준 오차 몸무게 구해 평균체중인지 아닌지 출력
    this.getResult = function () {
      // 정상 체중의 최저 몸무게
      this.minWeight = (this.userHeight - 100) * 0.9 - 5;
      // 정상 체중의 최고 몸무게
      this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

      if (
        this.userWeight >= this.minWeight &&
        this.userWeight <= this.maxWeight
      ) {
        return "정상 체중입니다.";
      } else if (this.userWeight < this.minWeight) {
        return "저체중입니다.";
      } else {
        return "과체중입니다.";
      }
    };
  }

  let dotKim = new CheckWeight("김ㅇㅇ", 168, 67);
  let dotLee = new CheckWeight("이ㅇㅇ", 172, 64);

  console.log(dotKim);
  console.log(dotLee);

  document.write(dotKim.getInfo(), "<br/>");
  document.write(dotKim.getResult(), "<br/>");

  document.write(dotLee.getInfo(), "<br/>");
  document.write(dotLee.getResult(), "<br/>");

  document.write(dotKim.getResult === dotLee.getResult);
</script>