[JavaScript] 변수와 상수(var, let, const), 자료형

자바스크립트에서의 변수와 상수

변수

데이터를 저장하는 공간. 데이터가 변할 수 있음.

특히 자바스크립트는 변수에 숫자와 문자 뿐만 아니라 함수와 클래스까지 저장이 가능함

 

변수를 선언하는 방법

/*문법*/
var 변수명 = 값;     
let 변수명 = 값;

★ var: 자바스크립트에서 변수 선언을 의미하는 키워드

★ let : 자바스크립트에서 변수 선언을 의미하는 키워드, var와 차이점은 변수 중복 선언이 불가하다는 것!

재할당은 가능하므로,,

재할당 할 경우 let 키워드를 제외하고 선언하면 된다.

ex) let grade = "F";

grade = "A+";

 

- 문자열을 할당할 시 큰따옴표("")나 작은따옴표('')로 감싸야 된다. (안그러면 오류 발생)

- 자바스크립트에서 변수 선언은 선언 > 초기화 단계를 거쳐 수행된다.

 

 

상수 

데이터를 저장하는 공간. 데이터가 변할 수 없음. (재할당 불가)

상수를 선언하는 방법

/*문법*/
 const 상수명 = 값;

---

변수와 상수의 차이

var name = "홍길동";
console.log(name);
	
var name = "유관순";
console.log(name);

==>  var로 선언했기 때문에(변수이기 때문에) 에러를 표시하지 않는다,

name 변수에 홍길동이라고 저장되었던 값이 유관순으로 재정의 되었기 때문에!

 

let name = "홍길동";
console.log(name);
	
let name = "유관순";
console.log(name);

이미 정의되어 있는 이름이라고 오류가 뜸.

==> let으로 선언했기 때문에(상수) 이미 정의되어 있는 이름이라고 오류가 뜬다.

상수는 변할 수 없는 값이기 때문에!

 

 변수명 작성 규칙

 1. 영문 대/소문자, 숫자, _ 또는 $만을 사용할 수 있음.
 2. 변수명의 첫 글자로 숫자가 오면 안됨.

ex) let 1grade = "A+"; (X)
 3. 변수명은 대소문자를 구분함. ==> SUM과 sum은 다른 변수명으로 인식.
 4. 가급적 변수명 작성 시 소문자로 시작.

 5. 가급적 상수명 작성 시 대문자로 작성.
 6. 공백이 들어가면 안 됨.
 7. 변수명을 사용 시 되도록 의미를 부여해서 작성하는 것이 좋음.
 8. 자바스크립트 예야어를 사용할 수 없음.  (==> 이를 "reserved words" 라 함)

        예) document, do, for, var 등등

https://www.w3schools.com/js/js_reserved.asp

JavaScript Reserved Words

 9. 두 단어 이상을 결합해서 변수명을 사용 시 낙타봉 표기법(CamelCase)을 권장함.

---

자바스크립트에서의 자료형

Primitive(기본형)과 Object(객체) 타입이 존재

 

기본적으로 자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장해,

변수의 타입을 따로 쓰지 않고 var 를 쓴다.

 

기본형 자료형(Primitive)

Boolean : 논리적인 요소, true와 false값이 있다.

null :  변수에 null을 할당하면 해당 변수는 명확하게 비어있는 empty값이라고 지정해준다.

undefined : 변수 선언은 이루어졌지만 할당된 값이 없는 상태이다.

Number : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(숫자가 아님) 값을 포함한다.

String : 한글자든, 여러 문자열이든 전무 문자열이다.

symbol : 심볼은 맵이나 다른식별자에서 유일한 식별자가 필요할 때, 동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때, 고유한 식별자가 필요할 때 사용한다.

논리형(boolean)

참(true) 또는 거짓(false) 두 가지 값을 가지는 자료형

 

숫자형(number)

숫자를 표현하는 자료형,

숫자 안에서도 정수, 실수로 구분이 되는데 자바스크립트에서의 숫자 자료형은 그 종류들을 하나로 총괄함.

십진수와 실수형은 일반적으로 살용하는 숫자.

하지만 16진수는 글자색이나 배경색을 나타낼 때 사용함.

/* 예 */
var age = 30;
var color = 0xF00; (빨간색)

문자형(string)

홑따옴표 또는 쌍따옴표, 또는 backtick(`) 를 양 끝에 두고, 그 안에 한 글자 이상의 문자가 있는 자료형을 문자형이라고 함

/* 예 */

/* 방법 1. 큰 따옴표로 감싸기 ==> 작은 따옴표를 필요할 때 사용하기 좋음 */
var message1 = "i'm 홍길동";

/* 방법 2. 작은 따옴표로 감싸기 */
var name = '홍길동';

/* 방법 3. backtick(`)로 감싸기 ==> 문자열 내부에 변수를 넣고싶을 때 사용 */
var message = `My name is ${name}`;

console.log(message)

결과

"My name is 홍길동"

실수로 backtick을 작은 따옴표로 사용하게 되면 변수명이 그대로 노출되니 주의하도록 한다.

 

 

 

 

 

undefined

일반적으로 변수를 만든 후 초기화하지 않은 상태를 말함.

/* 예 */
var data;
alert("data >>> " + data);

null

아무 것도 참조하고 있지 않다는 의미
주로 객체를 담을 변수를 초기화할 때 많이 사용됨
 - NaN : Not A Number. 즉, 숫자가 아닌 데이터를 숫자처럼 사용할 때 나타남(★★★★★)

/* 예 */
var str = null;
alert("str >>> " + str);

 

---

객체 (Object)

객체는 사전에 비유할 수 있음

사전에서 단어를 찾으면 그 단어에 대한 설명이 적혀 있고 이러한 단어와 설명의 모음이 사전이 되듯이 객체도 마찬가지.

여기서 단어를 키(Key), 설명을 밸류(Value)라고 함

즉, 객체는 키 (Key)와 값 (Value)의 쌍으로 이루어진 데이터의 집합

ar alice = {
  name: "Alice",
  age: 7
}

alice 라는 객체를 정의하고, 객체 내부에 키와 값은 콜론(:)으로 구분해 작성하며, 각각의 항목들은 콤마로 구분

여기서 키는 프로퍼티 (property) 라고도 함

 

키 (Key) 는 어떠한 값을 불러오기 위한 방법이고, 객체 내에서 유일해야 함,

 

값(Value)은 키에 대한 값

값에는 어떠한 자료형의 값이든 사용할 수 있음

숫자, 문자열, 불리언과 같은 기본자료형만이 아니라,배열이나 함수, 다른 객체 등도 객체 내부에서 값으로 사용될 수 있음

 

객체 사용하기

객체는 중괄호({})를 이용해서 선언함

객체 내부에 아무런 값이 없는 비어있는 객체는 아래처럼 변수에 {} 를 이용해 선언할 수 있음

// 비어있는 객체 선언
var obj = {};

객체 내부의 프로퍼티 값을 불러오려면 객체의 이름뒤에 점(.)을 찍고 키를 명시함

즉 alice의 나이를 알고 싶다면 아래와 같이 입력하면 된다.

alice.age
//=> 7

//혹은 대괄호를 이용해서 원하는 값을 조회할 수도 있음

alice["age"]
//=> 7

객체에 새로운 키(key)와 값(vlaue)을 추가할 수도 있음

 

아래와 같이 추가하려고 하는 키(key) 이름에 값을 대입하면 새로운 키(key)가 객체에 추가됨

만약 해당 프로퍼티가 이미 존재한다면 값을 덮어씌움

alice.gender = "female";
console.log(alice);  //-> { name: 'Alice', age: 7, gender: 'female' }

키(key)를 삭제할 때는 delete 연산자를 사용

delete alice.gender;

배열 (Array)

배열은 기능이 추가된 특수한 형태의 객체로, 데이터 값들만의 모음

var arr = ["Alice", 7, true];