var_let_const

var를 이용한 변수의 특징 

자바스크립트 ES6버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생겼다.

var대신 let과 const라는 변수가 생긴 이유를 알려면 '변수의 스코프'라는 것을 이해해야한다.

변수 또는 함수의 유효범위를 뜻하는 'scope'

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 '스코프(scope)'라고 한다.

변수가 어디까지 유효한지 범위를 가리키는 영역이 필요하다는 의미이다. 

자바스크립트 함수에서 변수를 사용할 때에는 이 영역에 주의해야한다.

 

한 함수 안에서만 사용하고 다른 함수에서는 사용할 수 없는 변수가 있는가하면 

어느 함수에서나 다 사용할 수 있는 변수가 있다. 

한 함수에서만 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수local variable'이라고 하고 

어느 함수에서나 쓸 수 있는 변수를 '전역변수' 또는 '글로벌 변수global variable'이라고 한다.

함수 안에서만 쓸 수 있는 지역변수 (=블록레벨 스코프)

지역 변수는 항상 함수 안에서 선언하고 함수 안에서만 사용한다.

지역 변수를 사용하려면 예약어 var와 함께 변수 이름을 지정해야한다.

 

[기본형]

function 함수명(){

   var 변수명 = 값;    ←지역변수

}

스크립트 안에서 자유롭게 쓸 수 있는 전역변수 (=함수레벨 스코프)

전역 변수는 적용범위를 제한하지 않고 쓸 수 있다. 즉, 전역변수는 지역변수와 달리 스크립트 소스 전체에서 사용할 수 있다. 전역변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var를 빼고 이름을 지으면 전역변수가 된다. 

<script>

      var multi = 10 * 20; //전역변수. 유효범위는 스크립트 소스 전체

      function addNumber() {

        var sum = 10 + 20; // 지역 변수. 유효범위는 addNumber()안이라서 밖에서 사용 불가

        console.log('multi', multi); //multi는 전역변수라 addNumber()안에서 사용 가능

        console.log('addNumber sum', sum);

      }

      function subNumer() {

        var sum = 50 + 50; //지역 변수. 유효범위는 subNumer()안이라서 밖에서 사용 불가

        multi2 = 20 * 20; //함수안에서 var 키워드 없이 선언되었으므로 전역변수.

        console.log(sum);

      }

      addNumber(); //함수 호출

      subNumer(); //함수 호출

      console.log('multi2', multi2); //multi2는 전역변수라 함수 바깥에서 값을 확인하는것도 가능.

    </script>

var의 호이스팅 ★

자바스크립트에서 변수를 사용할 때 조심해야하는 개념이 '변수의 호이스팅'

호이스팅이랑 최상단 영역으로 변수를 끌어올려 해석하는 것을 뜻하는데 경우에 따라서 변수의 선언부분과 할당을 분리해 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것을 말한다. 끌어올린다고 해서 정말로 소스코드를 끌어올리는 것은 아니고 자바스크립트 해석기가 해석을 할 때 그런 식으로 해석한다는 뜻이다.

 

아래 예제에서 x(전역변수)의 값은 10이지만 y의 변수값은 아직 할당되지 않았다는 뜻의 undefined가 할당되어 있는 것을 알 수 있다.  y의 값이 undefined가 나오는 이유는 바로 호이스팅 때문이다.

자바스크립트 해석기(인터프리터)는 함수 소스를 훑어보면서 var를 사용한 변수는 미리 기억을 해둔다. 

즉, 변수를 실행하기 전에 미리 '이런 변수가 있구나'하고 기억하기 때문에 

마치 미리 선언을 한 것과 같은 효과를 가진다. 

그래서 변수 y는 showNum의 최상단으로 선언부분이 분리되어 호이스팅되고, 최상단에서는 아직 값이 할당되지 않았다고 처리하여 console.log("y는 : ",y에서 undefined라는 값이 나오게 되는 것이다.

 

<script>

      var x = 10;

      function showNum() {

        //var y; =>호스팅에 의해 변수의 선언 부분이 최상단으로 끌어올려짐.

        console.log("x는 : ", x);

        console.log("y는 : ", y);

        //y=20; => 이 부분에서 값이 할당되었다고 해석한다.

        var y = 20;

      }

      showNum();

 

변수의 재선언과 재할당

var를 사용한 변수는 호이스팅 외에도 '재선언'과 '재할당'이 가능하다.

재선언이란 이전에 지어놨던 변수의 이름을 다시 한번 예약어를 사용하여 또 선언하는 것을 말한다.

재할당이란 기존에 있던 값을 다시 새로운 값으로 할당하는 것을 말한다. 

변수가 재선언이 되고 재할당이 가능하다는 것은 코드가 굉장히 유연하다는 뜻이고 

이런 유연한 코드는 예상치 못한 곳에서 오류를 발생시킬 가능성이 크다는 뜻이다.

그러므로 var키워드를 사용한 변수를 사용할 때에는 "유효범위", "호이스팅", "재선언"과 "재할당"을 잘 고려하여 사용해야 한다.

<script>

      var x = 10;

      function showNum() {

        //var y;   => 호이스팅에 의해 변수의 선언부분이 최상단으로 끌어올려짐

        console.log('x 는 : ', x);

        console.log('y 는 : ', y); //undefined

        //y = 20;  => 이 부분에서 값이 할당 되었다고 해석한다.

        var y = 20;

      }

      showNum();

      function addNumber(num1, num2) {

        return num1 + num2;

      }

      var sum = addNumber(10, 20); //30

      console.log('sum은 : ', sum);

      sum = 50; //sum의 값을 재할당

      console.log('sum은 : ', sum);

      var sum = 100; //재선언과 초기화

      console.log('sum은 : ', sum); //100

    </script>

---

let과 const

var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언을 할 수 있다.

그래서 var 예약어를 잘못 사용하면 예상치 못한 프로그램 오류를 발생시킬 수 있다.

이를 보완하기 위해 만들어진 예약어가 바로 let과 const이다.

let을 이용한 변수의 특징 

let으로 선언한 변수는 블록({}로 묶은 부분)에서만 유효하고 블록을 벗어나면 쓸 수 없다.

 

calcSum()함수에서 변수 sum은 let예약어로 선언했다.

즉, sum은 calcSum()함수 안에서만 유효하고 그 안에서만 사용할 수 있다.

또한 for문의 키우너 변수 i도 let 예약어를 사용했다.

그렇다면 변수 i는 for문에서만 사용할 수 있고 for문 밖을 벗어나면 사용할 수 없다.

이렇게 let은 기본적으로 블록레벨의 스코프를 가진다.

 

let 예약어를 사용하여 선언한 변수는 값을 재할당할 순 있지만, 재 선언을 할 수 없다. 그러므로 var예약어처럼 실수로 같은 이름의 변수를 사용할 걱정이 없다. 만약 동일한 이름으로 let예약어를 이용하여 변수를 두 개 이상 선언하면 이름 부분에 빨간 밑줄로 오류를 표시해준다. 또한 콘솔창에서도 Uncaught SyntaxEroor :  Identifier 'sum' has already been declared이러한 문구로 오류를 표시해주며 문법오류 : 이미 sum이라는 변수명은 사용된 적이 있다고 알려준다. 

 

let키워드는 호이스팅을 지원하지 않는다. 즉, 반드시 변수가 먼저 선언되어 있어야지만 변수를 쓸 수 있다는 뜻이다.아래 showNum()함수에서 콘솔창으로 y의 값을 먼저 출력해보라고 했는데 var 키워드를 썼을 때에는 호이스팅에 의해 변수의 선언부분이 스코프 가장 위로 끌어올려져 콘솔창에 undefined가 출력되었지만 let은 호이스팅 기능이 없기 때문에 변수 y를 먼저 선언하기 전에는 쓸 수 없다는 오류가 발생한다. 

 

이를 통해 예기치 못한 오류를 줄일 수 있다.  

 

<script>

      function calcSum() {

        let sum = 0; //sum의 유효범위는 calcSum()함수 전체

        //i의 유효범위 : for문

        for (let i = 0; i < 10; i++) {

          sum += i; // sum은 for문 안에서도 사용 가능

        }

        sum = 10;

        console.log(sum);

      }

      calcSum();

      /* 호이스팅 */

      var x = 10;

      function showNum() {

        console.log('x는? ', x);

        console.log('y는? ', y); //ReferenceError. 변수 y는 선언되기 이전에는 쓸 수 없다는 오류발생

        let y = 20;

      }

      showNum();

      //const

      const nowYear; // 이름만 선언 불가

      const current = 2024;

      current = 2025; //콘솔창에 오류발생. 값을 재할당할 수 없음.

      const current; //재선언 불가

    </script>

이걸 let y = 20; 위에 쓰게 되면 오류가 발생한다. ReferenceError

---

const를 이용한 변수의 특징 

const를 이용한 변수는 let과 마찬가지로 블록영역의 스코프(유효범위, 어디서 선언이 되었는가?를 뜻함)를 가지며, 호이스팅이 불가능하다. 

그렇다면 let과 다른 점은 const의 경우 재선언도 불가능하고, 재할당도 불가능하다는 특징이 있다.

 

즉, 선언과 동시에 반드시 초기값이 할당되어야 하며 한 번 할당된 값은 다른 값으로 재할당(변경)할 수 없다. 

그래서 const를 "상수변수 constant variable"이라고 하며 상수는 프로그램 안에서 변하지 않는 값을 의미한다.

보통 태그를 불러와서 넣어둘 때 많이 사용한다. 

 

//const

      const nowYear; //<-이름만 선언 불가 !

      const current = 2024;

      current = 2025; // <-콘솔창에 오류발생. 값을 재할당할 수 없다.

      const current; //<-재선언 불가능하다.

 

배열, 객체가 들어왔을 때 갯수가 몇 개인지 신경 안 쓰고,배열안을 가공가능.

 

/* 모바일 ~ 큰 모바일 */

320px~768px~1440px~1600px

 

---

web12

const변수와 배열 & 객체

const는 상수변수로 재선언과 재할당이 불가능한 변수라고 했다.

하지만, const변수 안에 배열과 객체가 들어간다면 이를 편집하는 건 가능하다.

예를 들어, 상수변수 안에 있던 배열을 문자열로 바꾼다거나 숫자로 바꾸는 등 '배열' 자체를 변경하는 것은 불가능하지만 배열 안을 편집하는 것은 가능하다. 

 

자바스크립트에서 변수를 사용하는 규칙(=스타일가이드)

1. 전역변수는 최소한으로 사용한다.

: 전역변수는 프로그램 어디든 접근할 수 있기 때문에 편리하게 사용할 수 있다.

하지만 예상하지 못한 곳에서 값이 달라질 수 있다.

그만큼 오류가 발생할 확률이 높아지므로 전역변수는 되도록이면 적게 사용하는 것이 좋다. 

2. var변수는 함수의 시작부분에서 선언한다. 

: var를 이용한 변수는 어디에서 선언하든 상관 없지만 내부에서 호이스팅이 생기므로 오류가 발생할 수 있다. 

그래서 var변수는 함수 시작부분에서 선언하는 것이 변수를 확인하기도 쉽고 오류를 줄일 수 있다. 

3. for문에서 카운터 변수를 사용할 때에는 var예약어를 사용하지 않는다.

: for문 안에만 사용할 카운터 변수는 그 블록 안에서만 사용할 것이므로 가끔 var를 사용하여 선언하기도 한다. 하지만 이렇게 선언한다고 해서 블록 변수가 되는 것은 아니다. 왜냐면 var는 함수레벨의 스코프를 가지기 때문이다. 따라서 for문의 카운터변수를 사용할 때에는 var 대신 let을 사용하는 것이 좋다.

4. ES6버전을 사용한다면 var보다는 let, const를 사용하는 것이 좋다.

: var 변수는 재선언이 가능하며 실수로 같은 변수명을 사용하여 재선언을 해도 오류가 발생하지 않는다.

여러 명이 함께 협업하여 프로그램을 만드는 경우 재선언 때문에 오류가 발생할 수 있다. 이럴 때에는 변수명을 재선언할 수 없는 let을 사용하는 것이 좋다. 

<script>

      //배열안을 변경하기

      const arr1 = ['하이', '헬로', '자바스크립트', 50, true];

      arr1[1] = '안녕'; //인덱스1번의 값을 '안녕'으로 변경

      console.log(arr1); //(5) ['하이', '안녕', '자바스크립트', 50, true]

      //arr1배열의 첫 번째 인덱스에 100을 추가

      arr1.unshift(100);

      console.log(arr1); //(6) [100, '하이', '안녕', '자바스크립트', 50, true]

      //객체 안을 편집하기

      const obj = {

        name: '김땡땡',

        age: 30,

        gender: 'female',

        arr: [20, 30, 40, 50],

      };

      obj.age = 25;

      //obj의 arr프로퍼티의 배열의 첫번째 인덱스에 10추가

      obj.arr.unshift(10);

      console.log(obj);

    </script>

 

---

매개변수가 있는 함수

 

함수의 parameter = 매개변수

매개변수란 함수가 호출될 때 전달된 값을 받아오는 변수를 말한다.

함수를 호출할 때 값을 전달하려면 함수의 호출문의 () 안에다 ,(콤마)를 이용하여 나열하면 된다. 

 

함수 호출문 안에 있는 값을 "인수"라고 부르며, 이 값을 받아오는 변수를 "매개변수"라고 한다.

매개변수는 함수의 function키워드 옆에 있는 ()자리가 매개변수의 자리이다.

 

함수를 호출할 때 인수를 넣어 전달하면 매개변수에는 인수값이 매개변수에 순차적으로 대입된다.

 

[기본형]

1. 일반함수

 

function 함수명(매개변수1, 매개변수2...){

   자바스크립트코드;

}

 

함수명(인수1, 인수2...)

인수1은 매개변수1에 , 인수 2는 매개변수2에 대입된다.

 

2. 익명함수

let 변수명 = function(매개변수1, 매개변수2...){자바스크립트 코드; }

 

변수명(인수1, 인수2...)

 

 <script>

      //두 수를 더하는 매개변수가 있는 함수

      function addNumber(num1, num2) {

        console.log(num1 + num2);

      }

      addNumber(20, 50);

      addNumber(60, 70);

      //자기소개를 하는 함수

      function myFnc(name, area) {

        document.write('안녕하세요. 제 이름은 ' + name + '이고,', '<br/>');

        document.write('사는 곳은 ' + area + '입니다.', '<br/>');

      }

      myFnc('김땡땡', '서울');

      myFnc('이땡땡', '부산');

💡예제💡

/*

        질의 응답창으로 방문자의 아이디와 비밀번호를 입력받아

        만약 잘못된 아이디가 입력되었다면 "존재하지 않는 아이디입니다."를,

        잘못된 비밀번호가 입력되었다면 "잘못된 비밀번호 입니다."를,

        아이디와 비밀번호가 일치하면  "아이디님 환영합니다."라는

        환영 문구를 출력해주세요.

      */

      //서버공간에 저장된 아이디 & 비번

      let user_id = 'javascript01';

      let user_pw = '1234';

      function login(id, pw) {

        if (user_id == id) {

          if (user_pw == pw) {

            document.write(id + '님 환영합니다');

          } else {

            alert('잘못된 비밀번호입니다.');

            location.reload();

          }

        } else {

          alert('존재하지 않는 아이디입니다.');

          location.reload();

        }

      }

      //사용자가 입력한 아이디&비밀번호

      let askId = prompt('아이디 입력');

      let askpw = prompt('비밀번호 입력');

      //함수호출 - 사용자가 입력한 아이디와 패스워드를 인수로 넘김

      login(askId, askpw);

---

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

ES6버전부터는 매개변수에 기본값을 지정하는 기능이 추가되었다.

 

[기본형]

function 함수명(매개변수1=값2, 매개변수2=값2...){

   자바스크립트 코드;

}

함수명(인수1, 인수2...)

 

    <script>

      function multiple(a, b = 5, c = 10) {

        //매개변수 b,c에 각각 5, 10으로 기본값넣기

        return a * b + c;

      }

      let result1 = multiple(5, 10, 20); //a = 5, b = 10, c = 20

      console.log(result1);

      let result2 = multiple(10, 20); //a = 10, b = 20, c = 10

      console.log(result2);

      let result3 = multiple(30); //a = 30, b = 5, c = 10

      console.log(result3);

      //사용자한테 얼마까지 더할지 묻고 1부터 사용자가 입력한 숫자까지

      // 더하는 함수를 만들기

      function reduceNum(n) {

        let sum = 0;

       

      }

*기본값 지정 시 뒤에서부터 지정해줘야한다.

return문

함수를 실행한 이후의 결과값을 반환받고 싶을 때 사용하는 문장이다. 

return문은 함수 안에서만 사용가능하며 return뜻 그대로 반환한다는 의미이다.

반환된 값은 함수의 호출문 자리로 반환되고 함수는 return문을 만나면 바로 강제종료된다.

 

반환된 결과를 다른 곳에서도 사용하고 싶다면 함수 호출문을 변수에 담아두어야한다.

 

[기본형]

function 함수명(){

   자바스크립트 코드;

   return 코드;       → 코드를 반환하고 함수를 종료한다. return은 출수구. 받아줄 그릇이 변수.

}

 

let 변수 = 함수명()      → return된 코드는 함수명 자리로 반환된다. 변수가 나온 쥬스를 담는 '그릇'역할을 해준다.

 

 

💡예제-누산기 만들기💡

//사용자한테 얼마까지 더할지 묻고 1부터 사용자가 입력한 숫자까지 더하는 함수 만들기

      var Num = prompt("얼마까지 더-할까요?");

      function reduceNum(n) {

        let sum = 0;

        for (let i = 1; i <= n; i++) {

          sum += i; //sum = sum + i;

        }

        document.write(sum);

      }

      let num = prompt("얼마를 더할까요?");

      let number = Number(num);

      reduceNum(number);

 

선생님 프리뷰 ↓

 //사용자한테 얼마까지 더할지 묻고 1부터 사용자가 입력한 숫자까지 더하는 함수 만들기

      function reduceNum(n) {

        let sum = 0;

        for (let i = 1; i < n + 1; i++) {

          //실무에서는 <=~와 같다를 잘 안 쓴다.

          sum += i; //sum = sum + i;

        }

        document.write("1부터" + n + "까지 더하면" + sum);

      }

      let askNum = prompt("얼마를 더할까요?");

      if (askNum !== null) {

        reduceNum(parseInt(askNum));

      }

    </script>

*parseInt() : 문자형 숫자를 정수로 바꿔주는 메서드.

*parseFloat() : 문자형 숫자를 실수로 바꿔주는 메서드.

 

누산기에서 제일 처음 등장해야하는 결과값은 1. 0+1을 더하면 1이 나온다. 0은 sum이 갖고 있고, 1은 i가 갖고 있다.

 

1 부터 사용자가 입력한 숫자가 10이면 두 수를 더해서 1이 나와야한다. 

제일 처음 등장해야하는 결과값은 1이다.