[JavaScript] 변수와 데이터 타입

변수가 필요한 이유와 선언하는 방법

변수(Variable)란?

• 값(데이터)을 담기 위해 이름 붙인 상자
• 변수는 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용함. 이때, 컴퓨터 메모리 공간에 일정한 크기로 생성됨

   const myNumber = 23;

  
  
  

변수가 필요한 이유

• 가장 큰 이유는 코드의 재활용성과 가독성을 높여주기 때문이다. 중복을 제거하여 유지보수가 용이하기 때문에 효율적인 프로그래밍을 가능하게 해준다.
• 정확한 값을 몰라도 이름만 알고도 사용할 수 있다. 또한 필요한 값을 저장하고 필요할 때마다 그 값을 바꿀 수 있다.

예를 들어,

"안녕하세요. 2022년 새해 복 많이 받으세요. 저는 20살입니다." 

let year = 2023;
let age = 21;

`안녕하세요. ${year}년 새해 복 많이 받으세요. 저는 ${age}살입니다.`;

// 안녕하세요. 2023년 새해 복 많이 받으세요. 저는 21살입니다.

매년 해가 지날 때마다 본문에 있는 문장 전체를 쓰지 않고, 변수 year와 age의 값만 재할당 해주면 된다.

변수를 선언하는 방법

• 선언자를 사용하여 변수 이름을 선언한다.
• 선언자 종류 : var, let, const

var name = "Lily";
let age = 12;
const saying = "Hello";

구분	재선언	재할당	참고
var	O	O
let	X	O	let 재할당: let을 제외하고 작성 let name = "Lily" /..../ name = "Jane"
const	X	X	절대로 바뀌지 않는 상수(파이, 생일, 최댓값 등)를 선언할 때 사용

• const로 선언한 array에 push, pop 등을 이용하여 수정하는 것은 가능!

const array = [1, 2, 3];
array.push(4); // 가능
array = [1, 2, ,3, 5]; // 불가능

<참고>

= (대입 연산자)

오른쪽 값을 왼쪽 변수에 대입한다는 뜻

== (일치 연산자)

5 == '5' //true
5 == 5 //true

=== (동등 연산자)
: value 뿐만 아니라 type도 같아야 true

 5 === '5' //false
 5 === 5 //true

---

자바스크립트 데이터 타입의 종류

자바스크립트에서는 크게 두 가지의 데이터 타입이 존재한다. 원시타입과 참조타입.

원시(기본) 타입

• Number : 1, 136

• String : '안녕하세요', 'Hello World'

  console.log("My name is 'Lily'."); // My name is 'Lily'.

• Boolean : true, false

  //자바스크립트에서는 주로 제어 구문에서 사용
  (if/else 문, while 문, do/while 문, for 문)

• Undefined

  • 선언은 됐지만 아직 value가 할당되지 않은 경우
  • value로 undefined를 준 것이 아니라 자바스크립트 엔진이 자동적으로 부여한 값이다.
  • 주로 프로그램이 무언가를 검색했지만(ex. 배열의 요소, 객체의 프로퍼티 등) 찾지 못했을 때 아무것도 없음을 전달하기 위한 값

• Null

  • '아무 것도 없다/비어있다(blank)'는 값(value)이 존재
  • value로 null을 부여한 것
    
    

✨ Undefined와 Null의 차이점

구분	null	undefined
의미	아무것도 없음	정의되지 않은 상태

둘은 언뜻 보기에 '값이 없다'로 비슷해 보인다. 그러나 undefined는 문자 그대로 '정의되지 않음'을 뜻하고, null은 '없음'을 뜻한다. 즉, undefined는 애초에 정의를 하지 않은 것이고 null은 '없음'이란 값을 할당한 것으로 그자체로 '값'이 되는 것이다.

👉 즉, Undefined는 자바스크립트가 자동적으로 부여한 값이며,Null은 사용자가 직접 부여한 값이다.

참조 타입

원시타입과 참조타입의 차이 : 원시타입은 값을 하나만 저장하는 경우이고, 참조타입은 여러가지 값들을 주제에 따라 저장할 수 있게 한 구조이다.

• Object

  const myObject = { name : 'Lily', age : '12' };

• Array

  const myArray = [ '안녕', 12, true ];

• Funciton

  const myFunction() {
    console.log('Hello')
  };