[자바스크립트 완벽 가이드🦏] 3장 : 타입, 값, 변수

⭕ 가변	❌ 불변
숫자 문자 불 심벌 null 혹은 undefined	객체

 

📍 숫자

• Number (정수, 실수)
• BigInt

 

📍 문자

• 문자열 안의 이스케이프 시퀀스
• RegExp

🔅 역슬래시를 통해 여러 줄로 코드 작성은 가능하지만 출력 시에 개행은 안됨

 

📍 불

 

 

📍 심벌

• 객체의 프로퍼티 키로 사용

 

📍 null 혹은 undefined

• 메소드를 호출할 수 없음

 

📍 나머지 (객체)

• 함수, 배열, 클래스, set 객체(값의 집합), map 객체(키와 값의 연결) 등

 

🔅 정규 표현식

• 형식

  /패턴/플래그

• 매칭 패턴

  a-zA-Z	영어 알파벳
  ㄱ-ㅎ가-힣	한글 문자
  .	모든 문자열
  \d	숫자
  \D	숫자가 아닌 것
  \w	영어 알파벳, 숫자, 언더바( _ )
  \W	\w이 아닌 것
  \s	space 공백
  \S	\s이 아닌 것
  \특수기호	특수기호

• 검색 패턴

  |	OR
  [ ]	괄호 안의 문자 중 하나
  [^문자]	특정 문자 제외한 것
  ^문자열	특정 문자열로 시작
  문자열$	특정 문자열로 끝남
  ( )	그룹 검색 및 분류
  \b	단어의 처음/끝
  \B	단어의 처음/끝이 아닌 것

• 개수 패턴

  ?	최대 하나
  *	없거나 있음
  +	최소 하나
  {n}	n개
  {Min, }	최소 Min개
  {Min, Max}	Min개 이상 Max개 이하

• 플래그

  g	모든 문자 검색
  i	대소문자 구분 안함
  m	여러 행의 문자열 검색

 

📍 타입 변환

• toString() : 객체의 문자열 표현을 반환

[1,2,3].toString()                     // => "1,2,3"
(function(x) { f(x); }).toString()     // => "function(x) { f(x); }
/\d+/g.toString()                      // => "/\\d+/g"
let d = new Date(2020,0,1);
d.toString()               // => "Wed Jan 01 2020 00:00:00 GMT+0900 (GMT+09:00)"

• valueOf() : 객체를 표현하는 기본 값이 존재한다면 그 값으로 객체를 변환

let d = new Date(2010,0,1);       // 2010년 1월 1일
d.valueOf();                      // => 1262271600000

 

📍 변수 선언과 할당

• “변수에 값을 할당한다” : 값에 이름을 부여하면 프로그램에서 그 값을 참조하고 사용할 수 있음
• ES6 이전 : var 키워드를 통한 변수의 선언
• ES6 이후 : const와 let 키워드를 통한 변수의 선언

 

• let 키워드
  • let문에서 변수에 초기값을 할당하지 않으면, 할당할 때까지 undefined로 남음
  • 루프를 반복할 때마다 새 값을 할당받는 루프 변수는 보통 let을 통해 선언

let i;
let sum;
let i, sum;   // let문 하나에 변수 여럿도 선언 가능

for(let i=0, len=data.length; i<len; i++) console.log(data[i]);

 

• const 키워드
  • 상수 선언 시 사용
  • 선언할 때 반드시 값을 할당해 초기화해야 함
  • 상수의 값을 바꿀 수 없음 (바꾸려하면 TypeError 발생)
  • 상수 선언 시에는 전부 대문자를 써서 변수와 구별하는 관습 (필수는 아님)
  • 아래와 같이 루프의 반복 주기 안에서 값이 바뀌지 않는다면 루프 변수도 const 선언 가능

for(const datum of data) console.log(datum);

 

• var 키워드  
  • 문법 자체는 var와 let 키워드가 같음

  var x;
  var data = [], count = data.length;
  for(var i=0; i<count; i++) console.log(data[i]);
  
  // 전역 변수로 선언되었을 때, 위와 아래는 같은 의미
  var x = 2;
  glabalThis.x = 2;

🔅 let 키워드 vs var 키워드

let 키워드	var 키워드
블록 스코프	함수 스코프 (함수 바디를 스코프로 가짐)
const와 let으로 선언된 전역 변수/상수는 전역 객체의 프로퍼티가 아님	var로 선언된 전역 변수는 전역 객체의 프로퍼티로 존재 (전역 객체는 globalThis로 참조 가능)
	함수 스코프를 가지므로 몇 번이고 다시 선언 가능
초기화 전에 변수의 값이 undefined이고, 초기화 전에 사용하면 에러가 발생	호이스팅 특징으로 인해, var로 변수를 선언하면 이 선언문은 함수의 맨위로 끌어올려짐. 따라서 초기화 전에는 변수의 undefined일 수는 있어도 초기화 전에 사용한다고 해서 에러가 발생하진 않음

 

• 변수와 상수의 스코프
  • 블록 스코프
    • : let이나 const 문이 존재하는 블록 안에서만 해당 변수와 상수가 유효하다
    • let, const로 선언한 변수/상수
    • 자바스크립트의 클래스, 함수 정의, if/else문, while루프, for루프 등의 바디
  • 전역 스코프
    • 선언이 어떤 코드 블록에도 속하지 않고 최상위 레벨에 있을 경우
    • 전통적인 클라이언트 사이드 자바스크립트에서 전역 변수의 스코프는 그 변수가 정의된 HTML 문서

 

• 분해 할당 (destructuring assignment)
  • ES6에서 도입된 선언과 할당을 합친 일종의 복합 문법
  • 할당 연산자의 오른쪽 : 배열이나 객체 같은 구조적인 값
  • 할당 연산자의 왼쪽 : 하나 이상의 변수 이름, 배열이나 객체 리터럴 문법 사용
  • 분해 할당이 일어나면 오른쪽 값에서 하나 이상의 값을 분해(추출)해서 왼쪽 변수에 할당
  • 변수 초기화 시 외에도 함수의 매개 변수 정의 시에도 사용 가능

  let [x,y] = [1,2];
  [x,y] = [x+1,y+1];
  
  // 배열 반환 함수를 쉽게 작성 가능
  function toPolar(x,y) {
  	return [Math.sqrt(x*x+y*y), Math.atan2(y,x)];
  }
  
  let [r,theta] = toPolar(1.0, 1.0);
  
  // for 루프에서 이름-값 쌍을 순회할 때 사용 가능
  let o = { x: 1, y: 2 };
  for(const [name, value] of Object.entries(o)) {
  	console.log(name, value);   // => "x 1", "y 2"
  }
  
  // 중첩된 배열에도 사용 가능
  let [a,[b, c]] = [1, [2, 2.5], 3];    // a == 1; b == 2; c == 2.5
  
  // 오른쪽에 이터러블 객체면 무엇이든 사용 가능
  let [first, ...rest] = "Hello";       // first == "H"; rest == ["e","l","l","o"]
  
  // 객체도 분해 할당 가능 (왼쪽은 객체 리터럴처럼 중괄호 안에 변수 이름을 콤마로 구분한 형태여야 함)
  let transparent = { r: 0.0, g: 0.0, b: 0.0, a: 1.0 };
  let {r, g, b} = transparent;          // r == 0.0; g == 0.0 b == 0.0
  
  // Math 객체의 함수를 변수에 복사
  // const sin = Math.sin, cos = Math.cos, tan = Math.tan과 같음
  const {sin, cos, tan} = Math
  
  // 객체 분해 할당의 왼쪽에 있는 각 식별자에는 콜론(:)으로 구분한 식별자 쌍 사용 가능
  // 식별자 쌍의 왼쪽은 분해하는 객체의 프로퍼티 이름, 오른쪽은 값을 할당받을 변수 이름
  // const cosine = Math.cos, tangent = Math.tan과 같음
  const { cos: cosine, tan: tangent } = Math;
  

  • 분해 할당 시 왼쪽의 변수 개수와 오른쪽의 값 개수가 일치할 필요는 없음
  • 마지막 변수 이름 앞에 점 세개 (…)를 사용해서 배열을 분해하고 남은 값을 변수 하나에 모을 수 있음

// 왼쪽의 변수 개수와 오른쪽의 값 개수 불일치
let [x, y] = [1];        // x == 1; y == undefined
[x, y] = [1,2,3];        // x == 1; y == 2
[,x,,y] = [1,2,3,4];     // x == 2; y == 4

// 변수 이름 앞에 점 세개(...) 사용해서 남은 값을 변수 하나에 모음
let [x, ...y] = [1,2,3,4];   // x == 1; y == [2,3,4]