JS 변수(1)

📌 변수

변수란? 변할 수 있는 정보를 의미, 변수를 선언하고 할당한다고 말할 수 있다. 그리고 지정된 값을 계속 변경할 수 있다.

ex) var 태희 = 26;

📌 변수명 정하기

• 공백, 특수문자, 구두점(. , ? 등등) 사용 불가능
• $, _ 는 상황에 맞게 사용 가능
• 예약어 금지 - 이미 js에서 쓰고 있는 단어들 ex) console
• 대소문자 구분
• 유니코드 문자와 이모지(일부) 모두 사용가능하나 사용하지 않는 것을 지향

✔ var를 사용해야 하나?

• scope(범위)를 배우기 전에 연습하는 동안 var를 좀 쓰다가 나중에는 절대 쓰지 않기!
• scope에는 전역과 지역이 있다.
  1) 전역: 어떤 곳에서도 열려 있는 공간, 접근 가능! 하지만 협업에 불편하고 오해가 생기기 쉽기 때문에 특수한 경우만 씀
  2) 지역: 범위가 한정되어 변수가 생존
• var 는 생략 가능하지만 전역이 되기 떄문에 꼭 붙여쓰자!

✔ 변수 선언

var a;
var my_name;

✔ 변수 할당

=은 같다가 아닌 할당 연산자(반환한다)

a = 1;
my_name ="Taehee";

✔ 주소창에 about:blank --> 깨끗한 빈 화면으로 콘솔창 열고 연습할 수 있다.

✔ console.log();

저장소.property(데이터)

• console : 저장소, 객체임!
• log라는 propery인 함수

---

📌 인터프리터 언어 vs 컴파일 언어

자바스크립트는 인터프리티어 언어에 해당된다.

• 기계어로 이뤄진 컴파일일러 언어가 속도가 더 빠르다. cpu가 빠르게 해석할 수 있기 때문이며, 미리 소스코드와 컴파일러가 준비된 상태로 시작하기 때문이다. (예시: .exe)
• 인터프리터 언어의 장점
  1. 바로 실행이 가능 → 별도의 실행 파일이 X
  2. 컴파일과정 없어서 수정, 디버깅 그리고 개발속도에 유리
  3. 플랫폼에 독립적이다.

📌 원시형 자료 vs 객체형 자료(아직 배우지 않음, 추후 추가)

1. 원시 탑입

객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의합니다.

✔ String, Number, Boolean, Symball, Undefined, Null

• null 개발자의 실수(예외처리에서 쏙 뺴먹음)
  null은 원시자료형인데 예외처리를 잘 못해서 타입을 오브젝트로 처리해버림 (예외처리잘못함)
• 오브젝트는 객체
• literal(문자그대로) 표현 --> 숫자 타입을 숫자로, 문자 그대로 쓰는 방식
  var num = 10;
• 원래 리터럴 표현이 아닌 원시자료형 형태
  var num = new Number(1);
  

• 원시자료형이 저장된 변수를 다른 변수에 할당하면 값자체가 복사되고 복사된 변수를 변경해도 원래 변수는 변하지 않습니다.
• 한번 할당되어 값을 복사해가면, 그 후엔 자동으로 업데이트가 안된다고 생각하면 됨.
  

• new String('hello') -->
  생성자 함수, 함수의 결과물은 instance인 hello
  

2. 객체 자료형

✔ Object, Null

---

👀 타입 알아내는 두가지 방법(콘솔창)

1) Object.prototype.toString.call(데이터).slice(8, -1);

우리가 받아온 데이터를 문자열로 바꾸는데, 문자열의 8번째 인덱스부터, 마지막에서 두번째 인덱스까지 잘라내기 [object String] 에서 앞글자 덜어내기

2)
var str = 'hello';
str.constructor

---

📘 변수의 자료형

var 변수하나 = 20;
var 변수둘 = 10;
var 변수셋 = 2;

document.write('변수하나 : ', 변수하나);
document.write('<br>');
document.write('변수둘 : ', 변수둘);
document.write('<br>');
document.write('변수셋 : ', 변수셋);
document.write('<br>');
document.write('변수하나+변수둘 : ', 변수하나+변수둘);
document.write('<br>');
document.write('변수하나-변수둘 : ', 변수하나-변수둘);
document.write('<br>');
document.write('변수하나/변수둘 : ', 변수하나/변수둘);
document.write('<br>');
document.write('변수하나*변수둘 : ', 변수하나*변수둘);
document.write('<br>');
document.write('변수하나**변수셋 : ', 변수하나**변수셋);
document.write('<br>');
document.write('변수하나%변수셋 : ', 변수하나%변수셋);

✔ 변수 자료형의 타입은 적어야 할까?NO! 변수 자료형은 다양한 타입의 데이터를 사용하기 위함인데, 다른 언어와 달리 JS에서는 따로 변수의 타입을 쓰지 않아도 된다!

typeof 'hello world'   // String
typeof 100             // Number
typeof NaN             // Number
typeof true            // Boolean
typeof undefined       // undefined
typeof Symbol()        // Symbol
typeof null            // Object, 여기서부터 js가 어려워 집니다.
typeof []              // Object, 여기서부터 js가 어려워 집니다. 왜 Array가 아닐까요?
typeof {}              // Object
typeof function () {}  // function
typeof /정규표현식/gi   // Object

// Object.prototype.toString.call(데이터).slice(8, -1);
// 로 확실하게 알 수 있습니다.

📌 변수 자료형 - 문자

const 이름 = '김태희';
const 소속 = '멋쟁이 사자들 FE 2기';

let 주소 = '춘천';
주소 = '서울';

document.write(이름, '<br>');
document.write(소속, '<br>');
document.write(주소, '<br>');
// [] index번호는 0부터 시작, 띄어쓰기도 문자열 포함
document.write(소속[2], '<br>');
document.write(소속[6], '<br>');

(결과)

📌 변수 자료형 - 숫자

✔ parseInt(string,radix-진수)

• 문자형 숫자
• 정수 값을 반환하기 위해 소수점 이하 값을 자름
• 숫자가 아닌 문자를 마주치는 경우 문자이전까지 파싱, 문자와 그 이후는 모두 무시
• 선행 및 후행 공백은 허용

✔ 부동소수점

• 사람이 보기에는 0.1 + 02 = 0.3이 당연하게 생각될 수 있다.
• 그러나 컴퓨터는 2진수로 처리를 하기 때문에 정확하게 0.3이 되는 것이 아니다.
• 모든 숫자가 다 부동소수점으로 표현되는 건 아니고, 일부는 10진수처럼 딱 떨어지는 경우도 있다.

✔ Max_SAFE_INTEGER

해결 방법: BigInt("");

📌 숫자형 method

Math.메소드(인자)

✔ randome()을 이용하여 원하는 수 뽑는 방법

규칙 1. Math.floor(Math.random()*9); -->0~8

• 곱하는 수보다 하나 작은 수까지 나오게된다
• 한 자리수 중 랜덤(로또처럼): Math.floor(Math.random()*10); --> 0~9

규칙 2. Math.floor(Math.random()*9 + 5); 5~ 13

• 범위 정해주기

---

👀 템플릿 리터럴 백틱??

document.write(n : ${n} <br>);

• 수정하기 편하게 하기 위해서

document.write(n.toLocaleString() : ${n.toLocaleString()} <br>);

• 쉼표

document.write(s.replace(/,/g, '') : ${s.replace(/,/g, '')} <br>);

• 전체에서 쉽표를 찾아 ""빈문자로 만들어라
• /,/g --> 정규표현
• 정규 표현이 아닌 것은 맨 처음 문자만 바꿔줌
  console.log(p.replace('dog','monkey')) 이건 정규표현 아님, 근데
  replaceall 명령을 쓰면 정규식처럼 전체 해당 문자 바꿀 수 이씀

document.write(parseInt(s, 10) : ${parseInt(s, 10)} <br>);

• 숫자형 문자
• parseFloat: 소수점처리
• 둘 다 숫자만 , 숫자문자숫자면 앞에 숫자만 꺼내짐

document.write(n.toFixed(10) : ${n.toFixed(10)} <br>);
- 원하는 소숫점 자리까지만 잘라줌