변수에 대한 모든것
💡컴퓨터의 구성요소 큰 틀 3가지
- 하드디스크 : 파일이나 어플리케이션을 저장
- 연산(CPU) : 저장 장치에서 데이터를 읽어와서 계산 및 처리
- 메모리 : 데이터를 빠르게 임시적으로 읽고 쓰기 위한 곳
자바스크립트 변수 메모리 할당의 자세한 내용은 여기
💡변수란(Variables) ?
- 값을 저장하는 공간, 자료를 저장할 수 있는 이름이 주어진 기억장소
- 변수를 선언하고 값을 할당하게되면 메모리 어딘가에 값이 할당된다.
- 값이 할당된 메모리셀은 메모리 주소가 있어서 선언된 변수의 이름은 곧 값이 할당된 메모리 주소를 가르킨다.
- 변수는 메모리 주소를 가르킨다해서 식별자라고도 한다.
💡변수의 선언과 할당
let a = 0 ;
let: 변수 선언 키워드 /a: 변수이름 /0: 값 할당 /;: 구문 끝a = 1;: 값의 재할당
💡변수 이름 좋은 예, 나쁜 예💩
변수이름 규칙
- 라틴문자(0-9, a-z, A-Z,), _
- 대소문자를 구분함
- 한국어, 예약어, 이모지 ❌
- 숫자로 시작 ❌
- 특수문자 ❌ (_, $ 두가지는 예외)
- 여러개의 변수를 1, 2, 3 숫자로 구분 ❌
-> 최대한 의미있게, 구체적인 이름으로 작성!✨
// 나쁜예제 💩
let number = 20;
// 좋은예제 ✨
let myAge = 20;
// 나쁜예제 💩
let audio1;
let audio2;
// 좋은예제 ✨
let backgroundAudio;
let windAudio;
// 꿀팁! 🍯 (공통 카테고리 단어를 앞에 붙이면 찾기 쉬움)
let audioBackground;
let audioWind;변수의 데이터 타입 종류
단일 데이터 (= 원시)
💡숫자 ( number)
- 아래 예도 숫자(number) 타입
- 0 :
console.log(0 / 123); - Infinity (최대 숫자를 벗어나는 숫자) :
console.log(123 / 0); - -Infinity (최솟값을 벗어나는 숫자) :
console.log(123 / -0); - NaN (Not a Number) :
console.log(123 / 'text');
💡문자열 ( string )
- 홑따옴표, 쌍따옴표 사용
- 템플릿 리터럴 (Template Literal) : 백틱 사용 ``
백틱으로 감싸면 줄바꿈은 enter로 가능,
${ } 사이에 변수나 연산 등을 삽입 가능 ( 표현식 삽입 가능 )
let id = '엘리';
let greetings = "'안녕!, " + id + "✋\n즐거운 하루 보내요!'";
console.log(greetings);
//템플릿 리터럴 (Template Literal)
greetings = `'안녕, ${id}✋
즐거운 하루 보내요!'`;
console.log(greetings);💡불리언 ( boolean )
// 불리언 타입
let 참 = true;
let 거짓 = false;
//활용 예
let isFree = true;
let isActivated = false;
let isEntrolled = true;- Falshy 거짓인 값‼️❎ Truthy 참인 값‼️✅
‼️❎
console.log(!!0);
console.log(!!-0);
console.log(!!'');
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);
‼️✅
console.log(!!1);
console.log(!!-1);
console.log(!!'text');
console.log(!!{});
console.log(!!Infinity);💡null 과 undefined 의 차이점 ✨
- null
: 의도적으로 변수에 값이 없다는 것을 명시한 상태 - undefined
: 아무 값도 할당받지 않은 상태
var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.
복합 데이터 (= 객체)
💡객체 타입
- 단일데이터의 상태와 상태의 연관된 행동(함수)를
함께 묶어놓은 데이터 - 변수 이름에는 객체가 들어있는 메모리 주소값이 들어있음
{ key : value(원시데이터,복합데이터) }
//원시데이터
let name = 'apple';
let color = 'red';
let display = '🍎';
let orangeName = 'orange';
//복합데이터(=객체)
let apple = {
name: 'apple',
color: 'red',
display: '🍎',
};
let orange = {
name: '오렌지',
color: 'orange',
display: '🍊',
};💡값과 참조의 차이✨
- 원시데이터 = Copy by Value
- 복합데이터 = Copy by Reference
객체가 할당된 변수는 메모리 셀 안에 객체가 있는 메모리주소, 즉 레퍼런스가 참조되어있음
// 원시타입은 값이 복사되어 전달됨
let a = 1;
let b = a; //1
b = 2; //2
// 객체타입은 참조값(메모리주소, 레퍼런스)가 복사되어 전달됨
let apple = {
// 0x1234
name: '사과',
};
let orange = apple; // 0x1234
orange.name = '오렌지';
console.log(apple); // { name: '오렌지' }
console.log(orange); // { name: '오렌지' }💡상수 변수 const
- 재할당이 불가능하다.
// let 재할당이 가능
let a = 1;
a = 2;
// const 재할당이 불가능
// 1. 상수
// 2. 상수변수 또는 변수
const text = 'hello';
// text = 'hi'; 이렇게 하면 안됨!
// 1. 상수
const MAX_FRUITS = 5;- 객체가 담긴 변수의 경우
변수가 가르키는 메모리셀안의 메모리 주소값을 재할당할 수 없음 - 단 메모리주소안의 값들은 변경가능 ✨✨✨
// 2. 재할당 불가능한 상수변수 또는 변수
const apple = {
name: 'apple',
color: 'red',
display: '🍎',
};
// apple = {};
//단 메모리주소안의 값들은 변경가능 ✨
apple.name = 'orange';
apple.color = 'green'
apple.display = '🍏';
console.log(apple);
/*{
name: 'orange',
color: 'green',
display: '🍏',
};*/💡타입 확인하기 : type of
variable = 123; // ⬅ 할당된 값에 따라 타입이 결정됨!
console.log(typeof variable) // number;
💡변수의 정말 중요한 포인트
- 의미있는 변수명 짓기
- 단일데이터(원시) : number,string,boolean,null,undefined,symbol
- 복합데이터(객체) : object
냠소현 개발일지