얄팍한 코딩사전 - 제대로 파는 자바스크립트

 

• 얄팍한 코딩사전 - 제대로 파는 자바스크립트

---

Review

 

 

 코딩 스터디에서 유튜버 얄팍한 코딩사전님의 강의를 추천해주셔서 오늘부터 듣기 시작했다.

시청자가 편하게 들을 수 있도록 정말 오랫동안 준비하신 것이 느껴졌다.

그런데 진행속도가 다소 빠른 감이 없지 않아서 입문용으로는 어렵게 느껴질 수도 있을 것 같다.

제로초님은 수학의 정석처럼 올인원 강의 같은 느낌이고, 얄코님은 요약 강의 같은 느낌이다.

얄코님의 강의도 정말 깔끔하게 잘 설명해주시고 꿀팁을 많이 주셔서 너무 좋은 것 같다. 

무료 강의는 7시간짜리 강의라 이틀 만에 완강하는 것이 목표다 - !

 

파이팅 !

 

 

 

 

---

 

• 얄팍한 코딩사전 - 제대로 파는 자바스크립트

 

 

 

<변수와 상수란? >

 

- 데이터를 담는 곳, 즉 주머니 같은 역할은 한다.

- 값의 의미 나타낸다.

- 값의 재활용이 가능하다.

- 변경되는 상태를 가리키는 식별자이다.

 

 

 

<변수(variable)란?>

 

: let을 주로 사용하며, 담긴 값이 바뀔 수 있는 주머니를 나타낸다.

 

let x;
// x라는 변수 주머니를 만듦

x = 1;
// x 안에 1이라는 값을 넣음

 

 

 

 

 

💡 undefined: '아직 값이 정해지지 않았다' 라는 값

 

 

 

 

<변수의 특징>

 

 

1. 변수 선언과 값 넣기를 동시에 할 수 있다. (초기화 - 일반적인 사용법)

 

let x = 1;
console.log(x);

 

메모리상으로는 선언과 초기화를 따로 하는 것과 동일하다.

 

 

2. 차지하는 자리가 다른 크기의(자료형이 다른) 데이터가 재할당될 수 있으므로 기존 위치에 새 값을

넣는 것이 아니다.

 

let x = 1;
let y = x;
console.log('변경 전', x, y);

x = 'Hello!';
console.log('변경 후', x, y);

 

x에 1을 넣은 뒤 값을 'Hello!'로 변경해보았다.

 

 

⭐️ C 등의 언어와 달리, 메모리상 가리키는 위치가 변경된다.

 

차지하는 자리가 다른 크기의(자료형이 다른) 데이터가 재할당될 수 있으므로 기존 위치에 새 값을

넣는 것이 아니다.

 

 

3. 이미 만들어진 주머니를 다시 만들(재선언) 수 없다.

 

let x = 1;
console.log('첫 선언', x);

let x = 2;
console.log('다시 선언', x);

 

var는 이것이 가능했었지만, let은 불가능하다. 브라우저의 콘솔에서는 독립적으로 실행하면

가능하지만 이것 또한 특수케이스이다.

 

 

4. 선언하기 전의 코드를 사용할 수 없다.

 

console.log(xyz);
let xyz = 1;

 

 

 

<상수(constant)란?>

 

- 담긴 값이 바뀔 수 없는 주머니이다.

- const를 사용한다.

- 흔히 대문자로 명명한다. (여러 곳에서 사용될 공통 값인 경우)

 

 

 

<상수의 특징>

 

 

1. 상수를 선언과 동시에 초기화한다.

 

const PI = 3.14;
console.log('원주율:', PI);

 

 

2. 선언하기만 하는 것은 불가능하다.

 

const PI;
PI = 3.14;

 

상수는 항상 주머니를 만듦과 동시에 데이터를 넣어줘야 한다.

 

 

 

3. 상수는 값의 변경이 불가하다.

 

const PI = 3.14;
PI = 3.14159

 

다른 값으로 변경하려고 하면 오류가 발생한다.

 

⭐ 값이 바뀔 일이 없는 데이터는 상수로 선언하는 습관을 들이는 것 중요하다.

어떤 값이 바뀜으로써 일어날 수 있는 위험을 상수로 선언함으로써 방지할 수 있다.

 

 

---

 

 

💡 여러 변수와 상수를 동시에 선언할 수 있다.

 

// let a = 1;
// let b = 2;
// ...

let a = 1, b = 2, c = 3;
const X = 4, Y = 5, Z = 6;

console.log(a, b, c);
console.log(X, Y, Z);

 

 

😅 브라우저 콘솔로 실습시 특이사항

 

 

 

- 독립된 시행시 같은 이름의 변수나 상수를 재선언하는 것이 가능하다.

- 단 변수를 상수로, 상수를 변수로 재선언하면 오류가 발생한다. (새로고침 필요)

 

 

---

 

 

<식별자 (상수와 변수 등의 이름)>

 

 

1. 식별자 (indentifier) 명명 규칙

 

- 영문, 한글 및 유니코드(대부분의 문자 표현) 글자, 숫자 사용이 가능하다.

- 특수문자는 $ 또는 _ 도 사용할 수 있다.

- 숫자로 시작할 수는 없다.

- 공백(스페이스) 사용은 불가하다.

- 식별자 규칙 MDN 문서

:  https://developer.mozilla.org/ko/docs/Glossary/Identifier

식별자 | MDN

 

 

 

2. 예약어 (reserved words)

 

: 예약어란 변수명이나 상수명으로 쓸 수 없는 것들을 뜻한다.

 

 

let이나 typeof 같은 것들은 변수명이나 상수명으로 사용할 수 없다.

 

- 예약어 MDN 문서

: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords

Lexical grammar - JavaScript | MDN

 

 

 

3. 한글 변수 / 상수명

 

const 이름 = '홍길동';
let 나이 = 20;

console.log(이름, 나이);

 

예전에는 한글 변수명, 한글 상수명 사용하는 것을 금기시했는데, 오늘날에는 종종 회사에서

사용하고 있다고 한다. 그러나 아직 널리 쓰이는 방식은 아니다.

 

 

 

---

 

 

<컴퓨터가 일하는 방식>

 

 

 

- CPU: 일하는 사람

• 컴퓨터의 뇌 - 작업을 진행하는 주체이다.

 

- 보조기억장치 (SSD, HDD): 서랍

• 상대적으로 저장공간은 넓고 접근속도는 느리다.
• 소프트웨어(코드)가 저장되는 곳이다.

 

- 메모리 (RAM): 책상 위 공간

• 상대적으로 저장공간은 좁고 접근 속도는 빠르다.
• 사람(CPU)이 서랍(보조기억장치)에 든 데이터를 꺼내 올려두고 작업을 하는 공간이다.
• 변수와 상수를 비롯한 데이터들이 이곳에 만들어지고 사용된다.
• 컴퓨터가 꺼지면 데이터가 사라진다.
• CPU가 아무리 빨라도 RAM의 공간이 작다면 SSD에서 이것저것 꺼내고 집어 넣고 또 다른 것을
  꺼내 작업하는 등 번거로운 일이 발생하고 작업 속도가 느려지기 때문에 많은 일을 순조롭게 할
  수가 없다.
  반대로 RAM의 공간이 크다면 SSD에서 마음껏 데이터를 끌어다놓고 작업할 수가 있으니 작업
  속도가 빨라지게 된다. 이러 이유로 RAM 용량이 큰 것을 선호한다.
• ⭐메모리를 효율적으로 사용하기 위한 지식과 노력이 필요하다.

 

 

---

 

 

 

<자바스크립트의 원시 자료형 (primitive data types)>

 

 

: 원시 자료형이란 담백하게 값 하나만 담는 단순 자료형이다.

 

- typeof 연산자: 뒤에 오는 값의 자료형을 반환, 즉 return한다.

* 반환한다는 것은 해당 코드 부분을 반환값으로 바꿔 쓸 수 있다는 것으로 이해하자.

 

 

a 라는 상수를 true로 선언하고 a의 자료형이 뭐냐고 하니 boolean 이라고 반환한다.

 

console.log(1 + 2);
// 3을 반환함
// 때문에 3으로 바꿔 넣을 수 있음
console.log(3);

 

 

 

 

 

d의 값을 넣지 않고 자료형이 뭐냐 물으니 'undefined' 라고 반환한다.

d의 값을 null이라 하고 자료형이 뭐냐 물으니 'object' 라고 반환하는데, 이것은 애초에 잘못 설계된 

것이다. 제로초님의 강의에서도 들은 것이다.

symbol은 강의 후반부에서 배우는 것이라 일단 pass하겠다.

 

 

 

1. 불리언 (boolean)

 

- "기다" / "아니다"

- 참 또는 거짓 (true or false) - 상반된 둘 중 하나의 값을 담을 수 있다.

- 직접 할당되기보다는 반환값으로 프로그램 곳곳에서 활용된다.

 

 

 

 

 

2. 숫자 (number)

 

- 자바스크립트에는 정수와 실수의 구분이 없다. 정수도 실수로 처리한다.

- 정수는 2^53 - 1까지 안정적으로 표현이 가능하다. 더 큰 정수는 이후 배울 BigInt 이라는

자료형으로 다룰 수 있다.

 

 

 

 

3. 문자열 (string)

 

- "글자들"

- 큰 따옴표("), 작은 따옴표('), 백틱(`)으로 둘러싸인 텍스트 데이터

- 전 세계의 모든 문자를 표현할 수 있는, 즉 유니코드에 포함되는 모든 문자를 표현할 수 있다.

* 모든 문자를 유니코드라는 하나의 문자열 셋으로 통일을 했기 때문에 어떠한 언어나 이모티콘까지 나타낼 수 있다.

이걸 UTF-8 등으로 인코딩을 해서 사용하는 것이다.

* 문자 인코딩 : 사람의 문자를 컴퓨터가 알아볼 수 있도록 바이너리 신호로 바꿔주는 것이다.

* UTF-8 : 인코딩하는 방식. 문자마다 적절한 바이트 수를 차지하도록 해서 다른 방식들보다 일반적으로 적은 용량만

쓰면서도 호환 문제도 가장 덜 발생하므로 전세계적으로 가장 널리 쓰인다.

 

 

그런데 typeof의 반환값은 뭘까?

 

 

바로 문자열이다. 

 

 

 

왜냐하면 이것들은 결국 'boolean', 'number', 'string'이라는 문자열로 반환하기 때문이다.

즉, typeof의 반환값은 문자열이다.

 

 

 

 

4. undefined

 

: 어떤 변수에 값이 부여되지 않은 상태일 때 undefined를 반환하게 된다.

또는 아무것도 반환하지 않는 구문에서 undefined를 반환한다.

 

어떤 변수에 값이 부여되지 않은 상태일 때

 

아무것도 반환하지 않는 구문

 

 

- undefined MDN 문서

: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined

undefined - JavaScript | MDN

 

 

 

 

5. null

 

- 의도적인 빈 값을 의미한다.

⭐️ 그러나 null 역시 값이다.  "비어있다"란 의미의 값

- object(객체) 등이 들어있거나 반환되어야 하지만 없을 때 주로 사용한다.

• "있어봐, 뭐 들어올 자리야" / "뭘 줘야 되는 거 아는데 줄 게 없어"
• 객체 생성이 실패한 경우 등에 대신 반환

⚠️ 주의! typeof가 object를 반환하는 것은 초기 오류이다. 객체는 원시 타입이 아니다.

 

 

 

 

 

- null MDN 문서

: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null

null - JavaScript | MDN

 

 

 

---

 

 

 

자바스크립트는 동적 타입을 가진 언어이기 때문에, 특정 값이 할당된 변수에 그와 다른 자료형의

값을 넣는 것이 가능하다.

자유롭지만 그만큼 자료형 관련 오류들에 취약하다.

 

 

⚠️ 자료형의 다름으로 일어날 수 있는 오류

 

1. 특정 자료형에 대해서만 사용될 수 있는 기능 (런타임 오류)

 

 

문자열 전용 함수에다가 숫자를 넣어버리면 오류가 발생하는 것을 볼 수 있다.

컴파일 언어에서는 애초에 이렇게 작성할 수가 없다.

 

컴파일 언어의 특징은 포장(컴파일)을 하면서 자료형 오류도 검수해낸다는 것이고,

인터프리터 언어의 특징은 포장(컴파일) 같은 것을 하지 않고 사용자에게 바로 가져다준다는 것이다.

 

자바스크립트는 컴파일을 하지 않고 이 코드가 바로 사용자에게 전달 돼서 실행된다.

즉, 개발자가 작성한 코드가 특정 가공 과정을 거치지 않고 바로 사용자에게 전달되기 때문에 이런

오류들을 잡아낼 수가 없다.

 

 

2. 의도와 다른 연산 논리 오류

 

 

의도적이지 않은 연산 논리 오류가 발생하면 컴퓨터는 이것이 잘못되었다는 것을 인지하지 못한다.

 

명시적으로 오류가 발생하는 것은 차라리 안전하지만 컴퓨터가 인지하지 못하면 이후에 골치 아픈

일이 발생할 수가 있다.

 

 

 

---

 

 

<문자열(string) - 텍스트 데이터>

 

- 문자열 안에 따옴표를 사용하는 방식

 

 

작은 따옴표 안에 큰 따옴표를 사용하고, 큰 따옴표 안에 작은 따옴표를 사용하면 오류가 발생하지

않는다. 그러나 동일한 따옴표끼리 사용하게 되면 문법적인 오류인 SyntaxError가 발생하게 된다.

 

 

 

그런데 이스케이프로 표현하면 오류가 발생하지 않는다.

 

 

📌 자주 사용되는 이스케이프 표현

이스케이프 표현	대체
\'	작은따옴표
\"	큰따옴표
\n	줄바꿈
\t	탭
\\	백슬래시

 

 

 

 

이스케이프 표현은 이런 식으로 나타낼 수 있다.

 

👉 이스케이프 표현 MDN 문서 보기

String - JavaScript | MDN

 

 

- 템플릿 리터럴

 

👉 MDN 문서 보기

Template literals - JavaScript | MDN

 

 

백틱을 이용하면 ${} 안에 상수나 변수, 표현식 등을 삽입할 수 있고, 다른 자료형도 사용할 수 있다.

 

 

이런 식으로 사용할 수 있다. 예전의 방식보다 백틱의 등장으로 훨씬 편리해졌다.

 

 

 

 

 

 

 

 

 

 

 

 

* 내용 출처

: 얄팍한 코딩사전 - 제대로 파는 자바스크립트