14 분 소요

이웅모 저자의 모던 javascript deep dive를 공부한 내용을 정리한 글입니다.

변수

1.1 변수란 무엇이고, 왜 필요한가?

  • 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
  • 만약 10 + 20 이라는 연산을 했을 때 컴퓨터는 어떻게 이해할까?
10 + 20

  • 위 이미지와 같이 메모리 공간 속에 10, 20 이라는 값을 저장해놓고, CPU 가 10+20 을 연산한 뒤
  • 30 이라는 결과를 새로운 공간에 저장한다.
  • 이때 해당 값이 저장되는 공간을 개발자가 접근하고, 사용해야 할 때가 있다.
  • 이때 사용되는 개념이 변수이다.

  • 변수의 정의 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

  • 변수의 기능은 값을 저장하고, 참조(호출)한다.
var result = 10 + 20;

1.2 식별자

  • 변수 이름을 식별자 라고도 한다.
  • 식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름
  • 위 예제에선 result 가 식별자가 된다.
  • 변수뿐만이 아니라 함수, 클래스 등의 이름 모두 식별자이다.
  • 식별자는 30을 기억하는 것이 아니라 30이 저장된 곳(메모리 주소) 즉, 0x00413F2를 기억하는 것이다.
  • 그도 그럴 것이 30과 0x00413F2 중 고유한 값은 후자이다.

1.3 변수 선언

  • 식별자를 사용하기 위해선 선언(declaration)을 해줘야 한다.
  • 선언의 의미는 메모리 공간을 확보하고, 확보된 공간과 개발자가 정해준 변수 이름을 연결해서 값을 저장할 수 있게 준비하는 것이다.
  • 또한 확보된 메모리 공간이 해제되기 전까지 다른 곳에서 사용할 수 없도록 안전하게 보호된다.

  • javacript에서 변수를 선언할 때 var, let, const 키워드를 사용한다.
var 키워드
var score;
  • 위와 같이 선언을 한다면 변수에 아직 값이 할당되지 않았다.
  • 초깃값을 할당하지 않은 공간은 암묵적으로 undefined로 할당
  • undefined로 할당되기 때문에 쓰레기 값이 나오는 것을 방지
console.log(score);

var score;

console.log(score);

  • 위 두 코드의 실행 결과가 차이를 보이는 이유는 javascript에선 컴파일 타임에 소스코드 평가 과정을 거침
  • 소스코드 평가 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행
  • 소스코드 평가 과정이 끝나면 비로소 모든 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행
  • 이러한 특징을 변수 호이스팅이라고 한다.

1.4 변수 할당

console.log(score);

var score;
score = 80;
// var score = 80; 과 동일한 결과를 나타낸다.

console.log(score);

  • 코드를 실행시키면 컴퓨터의 메모리는 위 이미지와 같이 할당된다
  • 그럼 저 회색 undefined 는 어떻게 될까?
  • 가비지 컬렉터라는 아이가 저 회색 공간을 쓸 수 있게 공간을 해제 해 준다.
변수 재할당
console.log(score);

var score = 80;
score = 90;

console.log(score);

1.5 식별자 작명 규칙

  • 식별자는 어떤 값을 구별하기 위한 고유한 이름
  • 다음과 같은 네이밍 규칙을 준수해야 함
    • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
    • 단, 숫자로 시작하는 것은 허용하지 않는다.
    • 예약어는 식별자로 사용할 수 없다.

[출처]https://www.w3bai.com/ko/js/js_reserved.html#gsc.tab=0

  • ES5 부터 유니코드 문자를 허용하긴 하지만 한글로 변수명 정하면 자로 손등 맞는다.
  • javascript 에서 주로 사용하는 네이밍 컨벤션은 카멜 케이스와 파스칼 케이스 이다.
// 클래스명은 파스칼 케이스
class Person {
  // 변수명과 함수명은 카멜 케이스
  var firstName;
  var secondeName;
  function walk(){
    console.log("뚜벅뚜벅");
  }
}

댓글남기기