JavaScript - intro, 변수

JavaScript 기초

 

<들어가기 전>

a=b —> b를 a에 “할당”한다

할당 : “최초”에 무언가를 a에 넣는 행위

재할당 : “같은공간(메모리→변수a)”에 무언가를 넣는 행위

데이터 타입 : 원시값,객체값

🤍Intro

|브라우저 (browser === browse;검색하다+er;~하는 것)

• URL로 웹(WWW)을 탐색하며 서버와 통신하고, HTML 문서나 파일을 출력하는 GUI 기반의 소프트웨어
• 인터넷의 컨텐츠를 검색 및 열람하도록 함
• “웹 브라우저”라고도 함
• 주요 브라우저
  • Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, Safari

|JavaScript의 필요성

• 브라우저 화면을 ‘동적’으로 만들기 위함
• 브라우저를 조작할 수 있는 유일한 언어

🤍Browser

|Browser에서 할 수 있는 일

• DOM(Document Object Model) 조작 • 문서(HTML) 조작
• BOM(Browser Object Model) 조작 • navigator, screen, location, frames, history, XHR
• JavaScript Core (ECMAScript) • Data Structure(Object, Array), Conditional Expression, Iteration

🤍Semicolon

• 자바스크립트는 세미콜론 선택적으로 사용 가능
• 세미콜론이 없으면 ASI에 의해 자동적으로 세미콜론 삽입

🤍변수와 식별자

|식별자 정의와 특징

• 변수(variables) 
  • 값을 저장하는 공간!
  • 자료를 저장할 수 있는 이름이 주어진 기억장소
  • 어떠한 한 가지 값을 가지고 있는 메모리 공간에 붙인 이름
  • 어떠한 상자(메모리)에 값을 넣는 것 → 그 상자에 이름을 붙인 것!
• 식별자(identifier)
  • 변수를 반드시 문자, 달러($),밑줄(_)로 시작
  • 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
  • 예약어 사용 불가능 (예약어 : for, if, function등)

|변수 선언 키워드(let,const)

• let
  • 재할당 할 예정인 변수 선언 시 사용
  • 변수 재선언 불가능
  • 블록스코프
  • 재할당 가능!
• const
  • 재할당 할 예정이 없는 변수 선언 시 사용
  • 변수 재선언 불가능
  • 블록스코프
  • default를 const로 하고 재할당 시 let으로 고치는 것을 추천.
  • 재할당 불가능!
    • (값이 바뀌는 것은 가능 (배열에 push,pop이용해 변경되는 것), but “=”기호를 사용한 재할당이 불가)

*블록스코프(block scope)

• if,for,함수 등의 중괄호 내부를 가리킴
• 블록스코프를 가지는 변수는 블록 바깥에서 접근 불가능!

|선언, 할당, 초기화

let foo //선언
console.log(foo) //undefined

foo = 11 //할당
console.log(foo) // 11

let bar = 0 //선언+할당
console.log(bar) //0

• 선언(Declaration)
  • 변수를 생성하는 행위 또는 시점
• 할당(Assignment)
  • 선언된 변수에 값을 저장하는 행위 또는 시점
• 초기화(Initialization)
  • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

|변수 선언 키워드(var)

var

• var로 선언한 변수는 재선언 및 재할당 모두 가능
• ES6 이전에 변수를 선언할 때 사용되던 키워드
• 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능
• 따라서 ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장
• 함수 스코프(function scope) •함수의 중괄호 내부를 가리킴 • 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능
• 호이스팅(hoisting) • 변수를 선언 이전에 참조할 수 있는 현상 • 변수 선언 이전의 위치에서 접근 시 undefined를 반환

 

키워드	재선언	재할당	스코프	비고
let	x	o	block scope	ES6부터 도입
const	x	x	block scope	ES6부터 도입
var	o	o	function scope	사용 X

|let &const와 var의 차이점

1. let & const는 블럭단위 스코프의 변수를 생성하는 반면 var는 global scope 변수를 생성한다.
2. var는 변수의 재선언을 허용한다.
   - let은 재할당만 가능하다.
   - const은 재선언/재할당 모두 불가능하다.
3. hoisting
   - var로 선언한 변수는 hoisting 될 때 선언 & 초기화(undefined)가 동시에 이루어진다.
   - const / let은 초기화 이전에 접근하게 되어 ReferenceError가 발생한다.

|var의 단점 — var는 더이상 사용하지 않음. 자바스크립트를 이해하면 자연스러운 이야기이므로 외우지 말자!

• 함수 레벨 스코프
• var 키워드 생략 허용
• 변수 중복 선언 허용
• 변수 호이스팅
• 긴 생명 주기
• 암묵적 결합
• 스코프 체인 상 종점에 위치
• 네임스페이스 오염