전역변수와 var/let/const 그리고 스코프란?

ouneno·2023년 8월 2일
0

Etc

목록 보기
6/20

전역변수에 대해 제대로 알지 못했던게 사단이 났다.
(뭐 사단이라고 말해봤자 큰 일은 아니고..🥲)


전역변수를 별도로 지정하지 않고
이런식으로 function 내에 다른 function을 두었더니
전역변수 : undefined 가 확인되었다.😧

💡 기록 이전

HTML

<% for (var i=0; i < data.length; i++) { %>
  <li id="testId" data-id="<%= data[i].id %>">
    <h6><%= data[i].address %></h6> 
    <h6><%= data[i].name[0] %></h6>
  </li>
<% } %>
  ...
<div>
  <input id="sendMessage">
  <button id="send">전송</button>
</div>

JavaScript

$('#testId').click(function(){
  var 전역변수 = $('#id').attr('data-id');
  $('#send').click(function() {
    console.log('전역변수 : '+전역변수)
  });
});

💡 기록 이후

HTML

<% for (var i=0; i < data.length; i++) { %>
  <li id="testId" data-id="<%= data[i].id %>">
    <h6><%= data[i].address %></h6> 
    <h6><%= data[i].name[0] %></h6>
  </li>
<% } %>
  ...
<div>
  <input id="sendMessage">
  <button id="send">전송</button>
</div>

JavaScript

var 전역변수;
$('#testId').click(function(){
  	전역변수 = $('#id').attr('data-id');
});
$('#send').click(function() {
var 보낼메세지 = $('#sendMessage').val();
var 보낼거 = {
  A : 어쩌구 ,
  B : 저쩌구
});

(전역변수라는 개념을 생각치 않고🤧)
왜 함수가 실행되기 전 지정되었던 변수인데 나중 function에서 값을 불러올 수 있었던건가? 싶어서 chatGPT에 물어봤다.

💡 결과

chatGPT 의 해답

var 전역변수는 함수 내부의 로컬 변수가 아닌 전역 변수로 선언되었습니다. 그래서 이 변수는 해당 스크립트 내에서 어디서든 접근할 수 있습니다.

그렇다. 전역변수로 지정한 변수는 스크립트 내 어디든 접근이 가능하다는 것이다...^^


scope(스코프)와 var/let/const 선언

📖 스코프(Scope)

변수가 어느 범위까지 유효한지?


❓var와 let의 차이점

var의 Scope

  • 함수스코프를 갖는다.
    => 함수스코프 : 선언된 함수 내에서만 유효, 외부 함수 접근 불가.
  • 블록스코프안에서 var로 선언했을 경우 블록스코프안에서만 유효
    => 블록스코프 : if문, for문, 중괄호{}로 둘러싸인 부분

let의 Scope

  • 블록스코프를 가지며, 블록 외부에서 접근 불가

❓var, let, const

Click! 이전에 ES6문법과 관련 var,let,const 차이점을 기록해 둔게 있다.

const와 let의 공통점

  • 블록스코프를 가짐. 변수의 범위를 명확히 제어가능

const와 let의 차이점

  • 변수의 재할당
    - const : 상수 선언
    => 상수 : 한번 할당 후 재할당 불가. 값 불변. 변하지 않는 값에 사용
    - let : 변수 선언
    => 변수 : 재할당 가능. 값 가변. 필요에 따라 바뀔 값에 사용

❓var 사용을 추천하지 않는 이유

  • 함수스코프를 갖기 때문
    => 함수스코프 : 선언된 함수 내에서만 유효, 외부 함수 접근 불가.
  • 변수선언이 ⭐️호이스팅⭐️ 된다.
    => 변수 선언 전 변수를 사용해도 에러가 발생되지 않음. 버그를 발생시키기 쉽다.

JavaScript 예시

console.log(호이스팅) // 변수 선언 전에 콘솔에 찍어봄
var 호이스팅 = '호잇';
console.log(호이스팅) // 변수 선언 후 콘솔 찍음

결과
undefined
호잇

profile
지속적인 성장을 추구하는 새싹 개발자입니다🌱

0개의 댓글