🍌 JavaScript

---

Introduction to JavaScript

• Unicode : 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준
• 대/소문자 구분
• Token : 프로그램을 구성하는 최소 단위
• Whitespace(공백) : 토큰과 토큰 사이를 구분하는 문자, 공백 문자는 여러 개를 입력해도 하나만 입력한 것으로 간주
• Statement(명령문) : 특별한 경우를 제외하고는 문장 끝에 세미콜론(;)을 붙임
• Block : 한 쌍의 중괄호({...})로 묶인 0개의 하나 이상의 명령문 그룹, 세미콜론(;)을 붙이지 않음
• Comment : 코드가 수행하는 작업에 대한 설명 작성하거나 comment out(코드의 일부분을 일시적으로 실행하지 않는 방법)를 사용
  • // 한 줄
  • /* 여러 줄 */
• Property(속성) : 키와 값을 연결하는 객체의 구성원임
  • "key(키)" : "value(값)"의 형식
  • 쉽게 말해, 어떠한 값을 나타내는데 이 값이 다른 값과 연관되어 있을 때 property라고 부름
• Object(객체) : 프로퍼티로 구성되며, 프로퍼티는 객체 안의 쉼표(,)로 구분되어 할당됨
• Scope(스코프) : 접근할 수 있는 유효 범위

Types and variables

Variables(변수)는 문자열, 숫자 등의 값을 담기 위해 이름을 붙인 상자이며 컴퓨터의 메모리에 일정한 크키의 영역으로 생성된다.

선언 및 초기화

모든 변수에는 다른 변수와 구별하기 위한 이름(식별자)이 있다.

declarators variableName = initialization;

• declarators : var, let, const
• variableName : 변수의 이름
• = : 대입, 단일 값이나 표현식의 결과를 변수에 할당
• initialization : 초기값, 변수에 할당된 값 또는 결과

변수를 선언하기만 초기화 하지 않았을 경우 정의되지 않았음을 뜻하는 undefined 값이 들어간다.

대체 선언 형식

• 여러 변수를 단일 명령문으로 선언:

let one=1, two=2, three=3;

• 선언과 초기화 분리:

let age; // declaration(선언)
age = 23; // initialization(초기화)

Hoisting(변수 선언의 끌어올림)

Hoisting은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어 올려진 것 같은 현상을 말한다.

console.log(x); // undefined
var x = 5;
console.log(x); //5

*var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않음

자세한 설명은 다음 링크 참고: https://developer.mozilla.org/ko/docs/Glossary/Hoisting

declarators

Global scope / Local scope(Function-level scope)

• Global scope(전역 스코프) : 코드 어디에서든지 참조할 수 있음
  • Global variable(전역 변수) : 전역에서 선언된 변수이며 어디에든 참조할 수 있으므로 유효 범위가 프로그램 전체임
• Local scope(지역 스코프) : 함수 자신과 하위 함수에서만 참조할 수 있음
  • Local variable(지역 변수) : 함수 내에서 선언된 변수와 함수 인자로 변수가 선언된 함수 내부와 하위 함수에서 참조할 수 있음

function-level scope(함수 레벨 스코프) : var

function-level scope란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다).

let global = "global";

function f() {
  let local = "local";
  console.log(global); //  global
  return local;
}
f();
console.log(local); // ReferenceError: local is not defined

block-level scope(블럭 레벨 스코프) : let, const

block-level scope란 코드 블록({…})내에서 유효한 스코프를 의미하며, 여기서 “유효하다”는 “참조(접근)할 수 있다”라는 뜻이다.

• let : 지역변수를 선언하며 var와 유사함
  • 같은 블록 내에서 똑같은 이름을 가진 변수를 선언하면 Uncaught SyntaxError가 발생

let x = "outer x";
{
  let x = "inner x";
  let y = "inner y";
  console.log(x); // inner x
  console.log(y); // inner y
}
console.log(x); // outer x
console.log(y); // ReferenceError: y is not defined

• const : 변화지 않는 변수를 의미하며 상수라고 함
  • 재할당할 수 없음
  • 반드시 초기화해야 함
  • 대문자로 표현함(예: const MAX_SIZE = 5)
  • 상수 값이 객체이거나 배열일 경우, property 또는 property 값을 수정할 수 있음

const origin = { x: 1, y: 2 };
origin.x = 3;
console.log(origin); // {x: 3, y: 2}

Variables

Rules for naming variables

• 유니코드 문자, 숫자 그리고 특수 문자 달러 기호($), 밑줄(_)
• 식별자는 첫 글자로 숫자를 사용할 수 없음
• 하이픈(-)을 사용할 수 없음
• 예악어가 아니어야 함(new, class, default등은 잘못된 이름)
• Camel Case를 주로 사용함 (예: firstName)
• 논리값을 표현하는 변수명 앞에 is를 붙임 (예: let isMouseDown = true;)

---

참고문헌,
이소 히로시, 『모던 자바스크립트 입문』, 서재원 역, 길벗, 2019,
https://developer.mozilla.org/ko/docs/Glossary/Property/JavaScript,
https://ko.javascript.info/variables#ref-27,
https://poiemaweb.com/js-scope#3-function-level-scope