프론트엔드의 기본인 자바스크립트를 엘리의 Javascript 마스터리 코스를 수강하며 공부중이다. 기초적인 부분부터 차근차근 쌓으며 velog에 정리해 나갈 예정이다.

Memory

메모리는 메모리 셀이라고 부르는 각각의 저장장치들의 연속으로 이루어져 있다. 각각의 메모리 셀은 1byte가 할당되어 있고, 어플리케이션을 구동하게 되면 어플리케이션마다 필요한 양의 메모리가 할당되어진다.

어플리케이션이 메모리에 올라왔을때 메모리는 Code, Data, Stack, Heap으로 구성되어진다.

• Code - 어플리케이션을 구동하는데 필요한 코드가 들어있는 메모리
• Data - 어플리케이션의 변수 데이터들을 저장하는 메모리
• Stack - 어플리케이션을 실행하는 함수를 호출하는 실행순서를 보관
• Heap - 어플리케이션의 객체들을 할당

변수(Variables)

• 값을 저장하는 공간
• 자료를 저장할 수 있는 이름이 주어진 기억장소

let a = 0;
// 변수 선언과 값의 할당
a = 1;
// 값의 재할당

변수를 선언하고 값을 할당하면 메모리에 저장되는데 메모리에는 각각의 셀에 해당하는 주소가 있어서 이때 선언된 변수이름은 메모리 주소를 가르킨다.

Naming Variables

저장된 값을 보기쉽게 나타낼 수 있는 의미 있는 이름

변수 규칙

• 라틴문자(0-9, a-z, A-Z), _
• 대소문자를 구분한다
• camelCase 사용 추천 (likeThis) ✅
• 한국어 ❌
• 예약어 ❌ (if, for,..)
• 숫자로 시작 ❌
• 특수문자 ❌ ( _ , $ 두가지는 예외)
• 이모티콘 ❌
• 여러 개의 변수를 1,2,3..숫자로 구분 ❌ -> 최대한 의미있고 구체적인 이름으로 작성

// 나쁜 예제
let a = 20;
// 좋은 예제
let myAge = 20;

// 나쁜 예제
let audio1;
let audio2;
// 좋은 예제
let audioBackground;
let audioWind;

데이터 타입(Data Type)

Number

let integer = 123; // 정수
let negative = -123; // 음수
let double = 1.23; // 실수
let binary = 0b1111011; // 2진수
let octal = 0o173; // 8진수
let hex = 0x7b; // 16진수
let bigInt = 1237129387598123791238711237n; // 매우 큰 정수

console.log(0 / 123); // 0
console.log(123 / 0); // infinity
console.log(123 / -0); // -infinity
console.log(123 / 'text'); // NaN (Not a Number)

String

// 문자열타입
let string = '안녕하세요';
string = `안녕`;

// 특수문자 출력하는 방법
string = "'안녕!'"; // 따옴표 출력하고 싶을 시 외부와 내부 반대 따옴표 사용

string = '안녕!\n친구야\t\t\\\u'; // \n - 줄바꿈, \t - tab, \\ - \, \u - 유니코드

템플릿 리터럴 (Template Literal)

let id = '지노';
let greetings = "'안녕!, " + id + "\n즐거운 하루 보내요'";

greetings = `'안녕, ${id}
즐거운 하루 보내요'`;
// 특수문자를 사용하지 않고도 간단하게 꺽쇠 기호를 이용해서 변수나 계산등 자유 자재로 코드 작성 가능

Boolean

let 참 = true;
let 거짓 = false;

// 활용예
let isFree = true;
let isActivated = false;
let isEntrolled = true;

// Falshy 거짓인 값
console.log(!!0); // !!은 특정한 값을 boolean으로 변환해준다
console.log(!!-0);
console.log(!!'');
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);

// Truthy 참인 값
console.log(!!1);
console.log(!!-1);
console.log(!!'text');
console.log(!!{});
console.log(!!Infinity);

Object

복합적인 데이터 '객체'. 여러가지 데이터를 포함한 상태 또는 연관된 행동을 묶어놓은 데이터.

코드 표현

let apple {
 	name: '사과',
  	color: 'red',
    display: '🍎',
};
// 출력하는 방법
console.log(apple);
console.log(apple.name);
console.log(apple.color);
console.log(apple.display);

값과 참조의 차이

원시타입은 값 자체가 메모리 셀에 들어있는 반면, 객체는 참조값 즉 메모리 주소가 들어있다.

원시타입의 경우 a 변수에 1을 할당하고 b 변수에 a를 할당할 시 a가 가르키고 있는 메모리 값이 b에도 할당되는데 이것을 copy by value라고 한다. 원시타입은 값 자체가 복사되어서 할당되어진다.

여기서 b에 2를 재할당 했을 때 b의 값은 2가되고 a의 값은 그대로 1이 된다.

반면 객체타입에서는 orange 변수에 apple 변수를 할당했을 시 메모리 주소값이 복사되어 할당되어진다. 이것을 copy by reference라고 한다.

apple 변수 객체에 있는 name을 orange로 변경했을 시 orange 변수는 값이 아닌 주소값을 참조하기 때문에 name이 orange로 변경된다.

정리

// 원시타입은 값이 복사되어 전달
let a = 1;
let b = a; // 1
b = 2;
console.log(a); // 1
console.log(b); // 2

// 객체타입은 참조값(메모리 주소, 레퍼런스)가 복사되어 전달
let apple = { // ex 메모리주소가 0x1234 일 때
 name: '사과', 
};
let orange = apple; // 동일한 ox1234 주소값이 전달됨
orange.name = '오렌지';
console.log(apple); // { name: '오렌지' }
console.log(orange);// { name: '오렌지' }

Const

let은 재할당이 가능하지만 const는 재할당이 불가능하다.

const text = 'hello';
text = 'hi'; // 불가능 ❌

• 1. 상수

const MAX_FRUITS = 5;

• 2. 재할당 불가능한 상수변수 또는 변수

const apple {
	name: 'apple',
    color: 'red',
    display: '🍎',
};
apple = {}; // 재할당 불가능 ❌
apple.name = 'orange';
apple.display = '🍏';
console.log(apple);
// { name: 'orange', color: 'red', display: '🍏' }
// -> 메모리 셀의 값을 변경하는 것이 아니라 heap내에 있는 오브젝트의 내부를 수정하는 것이기 때문에 오브젝트의 수정은 가능하다.