🔥 [UIUX] 0120 JAVASCRIPT Coding, 코딩 초급 11

✏️ 2025. 1월 20일 / javascript 초급 11

👻 함수(function)
데이터를 저장할 때에는 '변수'를 사용한다. 변수에는 데이터를 저장만 할 수 있고 코드는 저장할 수 없습니다.
하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때 마다 호출하여 사용할 수 있습니다.
즉, 코드를 저장하고 재사용할 수 있습니다.
함수는 프로그래밍 코드를 저장하는 공간이라고 할 수 있습니다.
자바스크립트 해석기가 함수를 만나면 해당 함수를 메모리 공간에 '기억'을 합니다.
즉, 함수를 만나는 순간 실행하지 않고 기억만 해두다가, 함수를 호출하게 되면 그 시점에 해당 함수를 실행합니다.

   [기본형]
   1. 일반 함수 정의문 <- 문장
  --------------------
   function 함수명(){실행시킬 자바스크립트 코드;}
   함수명(); -> 일반함수를 호출하는 호출문. 해당 줄에서 함수를 실행합니다.
   2. 함수 표현식(익명 함수) <- 연산식
  --------------------
   var 참조변수 = function(){실행시킬 자바스크립트 코드;}
   변수명(); -> 익명함수를 호출하는 호출문. 해당 줄에서 함수를 실행합니다.

👀 함수와 변수의 차이점

   변수
   - 1개의 데이터만 저장 가능합니다.
   - var 또는 let, const와 같은 키워드를 사용합니다.
   - 문자형, 숫자형, 논리형과 같은 데이터를 저장할 수 있습니다.
   - 객체를 참조할 수 있습니다.

   함수
   - 자바스크립트 코드를 저장한다.
   - function이라는 키워드를 사용하여 선언한다.
   - 출력문, 제어문 등의 코드를 저장할 수 있고, 코드가 실행된 결괏값을 반환합니다.

👀 함수의 호이스팅
호이스팅의 사전적인 의미로 '끌어올리다'라는 뜻이 있습니다.
일반 함수 정의문의 경우 함수 호출 시 호이스팅(hoisting)기술을 지원합니다.
호이스팅이란 해당 함수를 자바스크립트의 최상단위치로 끌어올려서 기억하는 것을 말합니다.
호이스팅을 적용하면 함수정의문보다 호출문이 먼저나와도 함수정의문을 끌어올려 함수를 호출합니다.
하지만 익명함수는 호이스팅기술을 지원하지않습니다.
따라서 반드시 함수가 먼저 등장한 이후에 호출할 수 있습니다.

👀 지금까지의 내용을 실제로 작성해봅시다!

      //함수 호출 <- 호이스팅 o (일반함수라서 함수부터 불러도 함수정의문을 먼저 인식(호이스팅)하고 출력)
      myFnc();
      //일반함수 (함수명에 이름을 부여했으니깐) - 함수호출문보다 아래에 있어도 정상작동한다.
      function myFnc() {
        count++;
        document.write("hello" + count, "<br/>");
      }
      //함수 호출
      myFnc();
      document.write("--------------구분선--------------", "<br/>");
      // theFnc(); <- 호이스팅 x (함수정의를 먼저해야함_여기부터 오류발생해서 아래 theFnc 전부 실행x)
      //익명함수 (function 뒤에 이름이 있냐/없냐) - 익명함수는 함수가 선언된 이후에만 호출할 수 있다.
      var theFnc = function () {
        count++;
        document.write("bye" + count, "<br/>");
      };
      //함수 호출
      theFnc();
      //함수가 없을 경우 두 수를 더하는 식 만들기
      var num1 = 10;
      var num2 = 3;
      var result = num1 + num2;
      document.write(result, "<br/>");
      //위 식을 함수로 저장하여 호출하기
      function addNum() {
        var num1 = 10;
        var num2 = 3;
        var result = num1 + num2;
        document.write(result, "<br/>");
      }
      //함수호출문을 이용하여 원하는 횟수만큼 함수 실행하기
      addNum();
      addNum();
      addNum();
      addNum();

🌼 var를 이용한 변수의 특징
자바스크립트 ES6버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼습니다.
var와 let, const는 호이스팅기술과 스코프에 큰 차이가 있습니다.
🌷 변수의 적용범위 '스코프' 알아보기
자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 유효범위를 '스코프(scope)'라고 합니다.
즉, 변수가 어디까지 유효한 지 가리키는 범위를 말합니다.
자바스크립트 함수에서 변수를 사용할 때 에는 이 영역에 주의해야 합니다.
한 함수안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있는가하면,
어느 함수에서나 다 사용할 수 있는 변수가 있습니다.
한 함수안에서만 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수'라고 부르고,
어느 함수에서나 다 사용할 수 있는 변수를 '전역변수' 또는 '글로벌변수'라고 부릅니다.
지역변수는 {}안에서만 유효합니다. 이런 스코프(유효범위)를 '블록레벨'의 스코프라고하고,
전역변수는 '함수레벨의 스코프'를 가진다라고 표현합니다.
🌷 함수 안에서만 쓸 수 있는 지역변수
지역변수는 함수 안에서 선언하고, 함수 안에서만 사용합니다.
지역변수를 선언하려면 예약어 var와 함께 변수 이름을 지정합니다.
지역변수는 해당 함수의 바깥으로는 나올 수 없습니다.
아래 예제처럼 함수 안에서 선언된 변수를 함수 밖에서 출력하려고하면 유효범위를 벗어나서 오류가 발생합니다.
🌷 스크립트에서 자유롭게 쓸 수 있는 전역변수
전역변수는 적용 범위를 제한하지않고 쓸 수 있습니다.
즉, 전역변수는 지역변수와 달리 스크립트 소스 전체에서 사용할 수 있습니다.
전역변수로 사용하려면 함수 밖에서 선언하거나, 함수안에서 var라는 키워드 없이 선언해야합니다.
함수안에서 선언하더라도 var라는 예약어가 없으면 전역변수로 사용됩니다.
전역변수는 함수 안팎으로 사용할 수 있음 + 그 변수명을 나 말고 다른 개발자가 쓸 수도 있습니다.

🌻 지금까지의 내용을 실제로 작성해봅시다!

      var num1 = 30; // 전역변수(함수 바깥에 있으므로)
      function addNum() {
        var sum = 10 + 20; //지역변수. 변수 sum의 적용범위는 addNum이다.
        //함수 안에서 sum의 값을 콘솔창에 출력하라고했으므로, 유효범위 안에 있어 정상적으로 30이라는 값을 보여준다.
        console.log("함수안에있는 지역변수 sum : " + sum); //30
        //전역변수(함수 안에있지만, var가 없으므로)
        result = 100 + 200;
        result2 = sum + num1;
      }
      addNum();
      //모두 전역변수이므로 정상실행
      console.log("전역변수 result : " + result); //300 / result는 function addNum()안에서 정의한건데, var 없다고 밖에서 출력해도 출력됨.
      console.log("전역변수 result2 : " + result2);
      // "Uncaught ReferenceError: sum is not defined" -> 변수 sum은 정의된적이 없다는 오류
      //console.log(sum); //지역변수 var sum이 유효범위를 벗어났기 때문에 콘솔창에 오류가 발생한다.

🌈 var의 호이스팅
자바스크립트에서 변수를 사용할 때 조심해야 할 개념이 있습니다.
바로 호이스팅(hoisting)입니다.
호이스팅이랑 '끌어올린다'라는 뜻으로 상황에 따라 변수의 선언(var 변수명)과 할당(변수에 값을 넣는 것)을 분리하여,
선언 부분을 스코프에 가장 윗쪽으로 끌어올리는 것을 말합니다.
끌어올린다고해서 실제 소스코드를 끌어올리는 것은 아니고,
소스를 그런 방식으로 해석한다는 의미입니다.
🌂 변수의 재선언과 재할당
var를 이용한 변수는 호이스팅 이외에도 '재선언'과 '재할당'을 할 수 있습니다.
재선언이란 var 키워드를 앞에 붙여서 여러 번 동일한 이름을 쓰는 것을 재선언이라고 합니다.
즉 var i = 0; 이후에 var i; 이런식으로 동일한 이름을 var를 붙여 여러 번 선언하는 것을 말합니다.
재선언을하면 이전에 만들었던 변수는 사라집니다.
재할당이란 변수에 값을 다시 새로 넣는 것을 말합니다.
즉, var i = 0; 이후에 i = 10;처럼 값을 새로 할당하는 것을 말합니다.
재할당을 하면 이전에 있던 값은 사라집니다.

      /* 호이스팅 */
      var x = 10; //전역변수(함수 바깥)
      // function displayNumber() 안에있는 var y = 20; 은 콘솔y보다 윗쪽에 var y; 랑 같음 (그래서 출력했을 때 undefined나옴)
      function displayNumber() {
        //var y; 호이스팅에 의해 y가 선언된 것으로 취급함.
        console.log("x는 : " + x); //10
        console.log("y는 : " + y); //y선언한적없다고 오류나야하지만, 호이스팅때문에 위로 올라가서 y값 있다고 생각 △아직 값 정한적없어서 undefined
        //y의 호이스팅이 일어남. 값이 나중에 할당된 것으로 취급함.
        var y = 20; //var 대신 let으로 바꾸면 오류 - let은 호이스팅x
      }
      displayNumber(); //함수호출
      /* 재선언과 재할당 */
      function addNum(num1, num2) {
        //매개변수 num1,2
        return num1 + num2;
      }
      var sum = addNum(10, 20);
      console.log(sum); //30
      sum = 50;
      console.log(sum); //50 <- 바로 윗줄에서 sum=50이라고 값을 '재할당'함
      var sum = 100; //변수를 다시 선언함(재선언)
      console.log(sum);

✨ let과 const
var예약어를 사용하는 변수는 함수영역의 스코프(전역)을 가지고, 재할당과 재선언을 할 수 있습니다.
그래서 var예약어를 잘못 사용하면 예상하지 못한 프로그래밍 오류가 발생할 수 있습니다.
그래서 ES6버전부터는 var를 보완한 let과 const를 사용합니다.
🎈 let을 이용한 변수의 특징
ES6 이전의 자바스크립트 프로그램에서는 var예약어로만 변수를 선언했습니다.
var예약어를 빠뜨리면 의도하지 않게 전역변수가 되기도 하고,
프로그램 길이가 길어지다보면 실수로 사용하는 변수를 재선언하거나, 값을 재할당 해버리는 경우가 생기기도 합니다.
그래서 ES6버전부터는 let과 const가 추가되었고, 되도록이면 var예약어는 사용하지않는것을 권장합니다.
var와 let,const의 가장 큰 차이는 스코프 범위입니다.
var는 함수영역(레벨)의 스코프를 가지지만 let과 const는 블록영역의 스코프를 가집니다.
🎈 블록안에서만 사용할 수 있는 변수
let예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 유효하고,
블록을 벗어나면 사용할 수 없습니다.함수밖에서 선언하면 전역함수로 사용가능)
let예약어를 사용한 변수는 '재할당은 가능하지만, 재선언은 불가합니다.'
var예약어를 사용한 변수는 선언하기 이전에 실행하더라도 호이스팅때문에,
아직 할당되지 않았음을 의미하는 'undefined'값을 가질 수 있습니다.
하지만 let예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류를 발생시킵니다.
ReferenceError에서 Cannot access 'y' before initialization at displayNumber 오류는
displayNumber라는 함수에서 변수 y가 선언되지않았고, 초기화되지 않아 사용할 수 없음을 알려줍니다.

   [에러종류] -콘솔창에서 확인가능
   - ReferenceError : 존재하지 않는 변수를 참조할 때 발생하는 에러
   - SyntaxError : 문자열에 따옴표나 기호가 잘못됐을 때 발생하는 에러. 문법 에러
   - TypeError : 자바스크립트 엔진이 스코프검색은 성공했지만, 
     해당 대상이나 결괏값에 적합하지 않거나 불가능한 시도를 할 경우 발생하는 에러 (ex. true + 10 을 실행해라 / 호출 잘못했을 때)

      //calcNum();
      function calcNum() {
        let sum = 0; // let sum의 유효범위 -> function calcNum() 함수 전체
        // function calcNum안에 for문이 있어서 let sum은 for문 안에서도 유효함
        // let i의 유효범위 -> for문
        for (let i = 1; i <= 10; i++) {
          // sum의 유효범위는 함수전체이므로 for문안으로 들어올 수 있음.
          sum += i; // sum = sum + i
        }
        console.log("sum은 : " + sum);
        //console.log("i는 : " + i); <- let i는 for문에서만 유효함 / 'Uncaught Reference Error: i is not defined'
        sum = 100; //재할당
        console.log("재할당 : " + sum);
        /* Uncaught SyntaxError: Identifier 'sum' has already been declared (at var_let_const03.html:54:13)
        -> sum이라는 변수는 이전에 선언되었기 때문에 재선언될 수 없다. */
        //let sum = 100; //재선언X
      }
      //호이스팅
      var x = 10;
      function displayNumber() {
        console.log("x는 : " + x);
        // Uncaught ReferenceError: Cannot access 'y' before initialization at displayNumber ~. (y선언된적없음) <- 콘솔창 눌러보면 어디서오류났는지 알려줌
        //y를 먼저 선언하고 초기화하기 전에는 해당 변수를 사용할 수 없다.
        console.log("y는 : " + y); // 아래가 var였으면 'undefined'인데, let이라 아예 오류남 (호이스팅x)
        let y = 20;
      }
      displayNumber();