01. 변수와 상수

변수

변수(variable)는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소 이다. JavaScript에선 let또는 var 키워드를 사용하여 변수를 생성한다. let과 var는 변수를 선언하는 키워드 라는 점에서 같지만 var는 초기 JavaScript의 구현 방식때문에 let과 다른 방식으로 동작한다. var는 오래된 스크립트에서 볼 수 있으며 근래엔 쓰지 않는다.

대표적으로 let은 블록 레벨 스코프를 지원하며 var는 함수 레벨 스코프를 지원한다. 이로 인해 의도치 않은 부작용이 발생하기도 한다.

아래 문(statement)은 'message'라는 이름을 가진 변수를 생성(선언)한다.

let message;

이제 할당연산자 (=)을 이용해 변수 안에 데이터를 저장한다.

message = 'Hello';

상수

변화하지 않는 변수를 선언할 땐, const를 사용한다.

const createdAt = '2023.06.21'

const로 선언한 변수를 상수라고 부른다. 상수는 재할당할 수 없어 상수를 변경하려고 하면 에러가 발생한다.

식별자

변수 이름을 식별자라고 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 다음과 같은 네이밍 규칙을 준수해야 한다.

• 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
• 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야 한다. (숫자로 시작하는 것은 허용하지 않는다.)
• 예약어는 식별자로 사용할 수 없다.

자료형

변수에 저장할 수 있는 몇가지 유형의 자료형이 있다. 변수의 자료형은 typeof()를 사용하면 확인할 수 있다.

number

30과 같은 정수 나 2.345(부동 소수점 숫자)같은 실수를 변수에 저장할 수 있다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않다.

let month = 12;

string

문자열은 작은 따옴표(')나 큰 따옴표(")로 묶은 문자의 집합을 말한다.

let sayHello = "Hello";
let sayGoodbye = 'Goodbye';

Booleans

불리언은 true나 false라는 값으로 참/거짓을 표현하는 자료형이다.

let isAlive = true;

array

배열은 대괄호로 묶이고 쉼표로 구분한 여러 값을 포함하는 단일 객체이다.

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

배열의 값에 접근하기 위해여 다음과 같은 구문을 사용한다.

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

대괄호에는 반환할 값의 위치를 지정하는 인덱스 값이 들어있다. 인덱스의 시작은 0이다.

object

프로그래밍에서 객체(Object)는 실제 사물을 모델링 하는 자료구조이다.

let human = { name : '철수', height : 180, weight : 75, language : ["korean", "english"] };

예시로 위 코드와 같이 사람 객체로 이름, 키, 몸무게, 사용하는 언어등의 정보를 가지고 객체로 표현하여 사용할 수 있다.

객체에 저장된 정보를 사용하기 위해 아래 구문을 사용한다.

human.name

var 사용시 발생하는 문제

var n = 1;
function test() {
  console.log(n);
  var n = 2;
  console.log(n);
}
test();

해당 코드에서 첫번째 console.log(n)에서 오류가 발생할 것 같기도 하고 1과 2가 출력 될것 같기도 하다. 하지만 정답은 아래와 같다.

undefined
2

이러한 결과가 얻어지는 이유는 Hoisting현상이 발생하기 때문이다. Hoisting이란 var 키워드를 사용하여 변수를 선언할때 해당 변수가 속한 범위 최상단으로 선언을 올려버리는 것을 말한다.

그리고 또 var 키워드에서 주목할 점은 스코프가 block 레벨이 아니라 function 레벨이라는 점이다. function 레벨로 Hoisting 현상이 발생하면 코드는 아래와 같이 해석 된다.

var n = 1;
function test() {
  var n; // hosting
  console.log(n);
  n = 2;
  console.log(n);
}
test();

따라서 첫번째 console.log(n)이 실행될 시점에 n은 선언만 되었을뿐 어떤 값도 할당되지 않아 오류가 나지 않고 undefined가 출력되게 된다.

이러한 식으로 var는 코드가 어떻게 작동될지 직관적으로 예측하기 어려운 경우가 자주 발생하게 된다.

for문에서 var 사용시 발생되는 문제

var sum = 0;
for (var i = 0; i < 10; i++) {
  sum += i;
}
console.log("sum:", sum);
console.log("i:", i);

위 코드에서 for문이 끝났더라도 i값이 유지되는 것을 볼 수 있다. 왜냐하면 위에서 말했듯이 var의 스코프는 block이 아닌 function 레벨이기 때문에 for문에서 선언된 변수가 block을 벗어나도 유효하게 된다.

function findUser(id, cb) {
  setTimeout(function () {
    var fakeUser = {
      id: id,
      name: "Joe#" + id,
      email: id + "@test.com",
    };
    cb(fakeUser);
  }, 1000);
}

function findUsers(userIds) {
  for (var i in userIds) {
    findUser(userIds[i], function (user) {
      console.log("Found for id,", userIds[i]);
      console.log("=> A user founded:", user);
    });
  }
}

findUsers([3, 7, 29, 105]);

findUser는 사용자 아이디를 받아 가짜 사용자를 콜백 함수로 넘기는 비동기 함수이다. 그리고 findUsers는 사용자 아이디의 배열을 받아 여러 사용자의 정보를 출력해 주는 함수이다. 여기서 findUsers를 사용해보면 이상한 출력 결과를 받을 수 있다.

Found for id, 105
=> A user founded: { id: 3, name: 'Joe#3', email: '3@test.com' }
Found for id, 105
=> A user founded: { id: 7, name: 'Joe#7', email: '7@test.com' }
Found for id, 105
=> A user founded: { id: 29, name: 'Joe#29', email: '29@test.com' }
Found for id, 105
=> A user founded: { id: 105, name: 'Joe#105', email: '105@test.com' }

사용자 id가 105로 고정되어 버린것을 볼 수 있다. var로 선언된 변수가 function scope를 가진다는 점과 비동기 함수의 non blocking 성질을 고려하면 이해할 수 있다. for문에서 각 콜백 함수를 넘길 시점에는 i값이 달랐겠지만, 각 콜백 함수가 실행될 시점에는 for루프가 끝나서 i가 배열의 마지막 원소의 인덱스로 변경된 이후이다.

이러한 이유로 인해 var를 사용하면 Hoisting과 함수 스코프를 고려하면서 코딩을 해야한다. 이러한 문제는 ES6부터 let과 const의 사용으로 문제를 해결하게 되었다.

 

---

변수와 상수

 

필요한 정보를 저장하기-변수 - Web 개발 학습하기 | MDN