자바스크립트?

절차형, 객체지향형, 함수형 언어가 가능합니다. 따라서, 한 언어로 여러가지 프로그래밍 기법을 배울 수 있습니다.

결과를 바로 인터넷 브라우저 화면으로 볼 수 있어 편리합니다.

변수(variable)

'변하는 수'들은 데이터가 변하는 것을 말합니다.

데이터를 처리하기 위해서는 데이터를 저장하는 '공간'이 있어야 합니다.

'공간'이요?
이러한 공간은 메모리에 저장됩니다. 이 공간을 '변수' 라고 합니다.

변수 선언 방식

variable을 따서 만든 'var'가 있습니다. 그밖에도 let, const가 있습니다.

var

변수 선언이 유연하다는 특징이 있습니다.

그래서, var로 변수를 선언하면 중복으로 선언할 수 있습니다.

• var로 선언하면 function에서 유효범위를 가지고 있습니다.
• 그러나, 전반적으로 코드가 어떻게 작동될지 예기 어려운 경우가 있습니다.

1. hoisting(호이스팅) 의 경우 문제가 생깁니다.

• hoisting(호이스팅)이요?
  자바스크립트의 경우 실행되기 전에, 함수안에 필요한 변수값들을 유효범위 최상단에 선언합니다.
  즉, 함수를 실행하기 전에 자바스크립트의 Paser가 함수를 한번 훑습니다.
  ⇒ 유효범위 : { }
  ⇒ 즉, function 입니다.
  그러나 실제로 아래에 있는 내용들 중 필요한 값들을 끌어올리는 것이지, 실제로 코드가 끌어올려지는 것은 아닙니다. 그렇기 때문에 실제 메모리에서는 변화가 없습니다.
• 호이스팅의 대상은 var변수 선언과 함수선언문에서 호이스팅이 일어납니다.
  (추후 설명할 let, const변수 선언과 함수표현식에서는 일어나지 않습니다.)
  ⇒ 함수 선언문

function hello() {
	console.log("hello");
}

⇒ 함수 표현식

var world = function() {
	console.log("world");
}

var number = 1
function hello() {
  var number = 3; 
//number변수를 3으로 다시 선언
  console.log(number)
  number = 2
  console.log(number)
}
hello()
==>
3
2

var number = 1
function hello() {
  var number; 
//number변수를 다시 선언하지만 값을 할당하지 않음
  console.log(number)
  number = 2
  console.log(number)
}
hello()
==>
undefined
2

⇒ 첫번째 console의 경우 호이스팅이 발생되어 number에 값이 할당되지 않았기 때문에 undefined가 출력됩니다.

2. for문에서 문제점

for문에서 선언한 변수가 for문이 끝난 후에도 유지 됩니다.

var로 선언된 변수는, function에서 유효범위를 갖기 때문에 for문을 나온 후에도 유지되는 것 입니다.

EX)

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

그래서 ES6문법에서 let과 const가 나오게 되었습니다.

let, const

let과 const는 var의 단점을 보완하기 위해 나왔습니다.

• 그렇기 때문에 가장 큰 특징은 변수를 재선언 하지 않는다는 것 입니다.

• var에서는 function에서 유효범위를 갖지만, let과 const 는 block에서 유효범위를 가지고 있습니다.

• var에서는 변수를 생성하면서 선언과 초기화가 동시에 일어났지만, let과 const에서는 변수를 생성하면서 선언과 초기화가 분리되어 진행됩니다. 따라서, 호이스팅이 불가합니다.

• let과 const의 차이는 무엇인가요?
  ⇒ immutable의 유무 차이 입니다.

let의 경우, 변수에 재할당이 가능합니다. 그렇기 때문에 메모리 주소 변경이 가능합니다.

반면, const의 경우, 변수 재할당이 불가능 합니다. 때문에, 메모리 주소를 변경할 수 없습니다.