js 실행환경, 변수

자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

• 브라우저와 Node.js는 용도가 다름에 유의
  • 브라우저 : HTML, CSS, js를 실행해 웹페이지를 브라우저 화면에 렌더링 하는 것이 주 목적
  • Node.js : 브라우저 외부에서 js 실행 환경을 제공하는 것이 주 목적
• Node.js에서는 Web API를 지원하지 않음
• 브라우저에서는 파일 시스템을 지원하지 않음(Web API인 FileReader객체를 통해 사용자가 지정한 파일을 읽는 것은 가능)
  • 브라우저를 통해 실행되는 js로 사용자의 로컬 파일을 건드릴 수 있다면 보안문제가 있기 때문에 지원하지 않음

변수

변수란 무엇인가? 왜 필요한가?

• 애플리케이션의 본질은 데이터를 입력받아 처리하고 결과를 출력하는 것
• js는 치명적 오류를 방지하기 위해 개발자의 직접적인 메모리 제어를 허용하지 않음
• 기억하고 싶은 값을 저장하고 다시 불러오기 위해 변수가 필요함
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
• 변수는 컴파일러(혹은 인터프리터)에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨
• 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름 -> 식별자
• 선언에 의해 식별자의 존재를 알림

변수 선언

• 선언 : 메모리 공간 확보(allocate), 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것
• var : 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원함
• 선언에 의해 확보된 메모리 공간은 비어있지 않고 js 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화됨
• js 엔진의 변수 선언 수행 2단계
  • 선언 단계 : 이름을 등록해 js엔진에 변수의 존재를 알림
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보, 암묵적으로 undefined를 할당해 초기화→ 이전에 사용하던 값을 초기화하지 않아서 생기는 오류를 방지해줌
• 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록 됨

변수 호이스팅

• 변수 선언은 런타임보다 이전 단계(평가 과정)에서 먼저 실행됨
• 평가 과정 : 소스코드 실행의 준비 단계, 변수 선언을 포함한 모든 선언문(함수 선언문 등)을 찾아내 먼저 실행함 → 변수 호이스팅
• var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 됨

값의 할당

• 선언과 할당을 한 줄로 표현해도 둘은 각각 평가과정과 런타임으로 따로 실행됨
• js에서 변수는 선언될 때 undefined로 초기화되기 때문에 모든 할당은 재할당임
• 재할당 될 때 기존에 있던 값을 지우고 새로운 값을 넣는 것이 아닌 새로운 빈 메모리를 참조하여 그곳에 새로운 값을 넣음
• 기존에 있던 쓰이지 않는 값들은 가비지 컬렉터를 통해 메모리에서 해제함
  • unmanaged language VS managed language : 메모리 제어를 개발자가 할 수 있느냐 없느냐 차이. js는 managed language로 메모리 제어를 개발자가 직접 할 수 없음. 성능 면에서 어느정도 손실이 있을 수 있음.

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있음
• 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야함(숫자로 시작 안 됨)
• 예약어는 식별자로 사용할 수 없음
• 한 줄에 콤마로 여러 식별자를 선언할 수 있지만 가독성 문제로 지양 권함
• 의미를 명확하게 표현하는 것을 지향
• 네이밍 컨벤션 지키기
  • js에서 일반적으로 따르는 네이밍 컨벤션 :
  • 변수, 함수 : 카멜 케이스 (myVariable, myFunction)
  • 생성자 함수, 클래스 : 파스칼 케이스 (MyConstructor, MyClass)
  • 프로젝트마다 다를 수 있음