JS : 데이터 변수(var), 배열(array), 객체(object)

 

---

 

 

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

 

1. 원시 데이터

* 참조를 이루지 않고 특정 변수에 바로 데이터값이 저장되어있는 경우를 뜻합니다.

* 각 원시데이터 특징에 따라 한 가지 값만 담을 수 있습니다.

* String, Number, Boolean, Null, Undefined, Symbol(ES6) 총 6개로 이루어져 있습니다.

* String(문자)

* number(숫자)

* boolean(논리형)

* null(없음)

* undefined(정의되지 않음)

 

 

 

2. 참조 데이터

* 객체, 배열, 함수 등과 같은 Object 형식의 타입입니다.

* 변수의 크기가 동적으로 변합니다.

* 원시 데이터와 다르게 여러 속성의 모음을 저장할 수 있습니다.

* 원시 데이터 타입을 제외한 나머지는 모두 참조 데이터입니다.

 

 

---

 

(ES5) 변수 선언 var

* ES5 이전버전부터 사용하던 변수 지정방법입니다.

* 데이터를 저장하는 장소 or 읽고 쓰고 할 수 있는 장소

* 변수는 한번에 한가지 값만 저장할 수 있습니다.

* 새로운 값을 대입하면 기존 값은 삭제되게 됩니다.

   다른 연산자 등을 이용하면 다른 결과를 낼 수도 있습니다.

 

 

 

//변수선언키워드 변수명 대입연산자 대입값
//var 변수명 = 대입값; 
var box = 10;

 

 

변수는 이럴 때 사용해요!

특정 사이트의 로그인 유무를 변수에 저장합니다.

사용자가 선택한 메뉴 항목도 변수에 저장합니다.

출력되는 메뉴 항목도 변수에 저장합니다.

게임에서 현재 기록 점수도 변수에 저장됩니다.

쇼핑몰 장바구니에 담겨있는 상품목록도 변수에 저장됩니다.

게시판에 게시물 목록 들도 변수에 저장되있는 내용을 출력한겁니다.

 

 

 

변수 이름을 위한 규칙들

변수의 이름은 반드시 문자, 달러기호($) 언더스코어(_) 시작합니다.

절대로 숫자로 시작해서는 안되요!

변수의 이름은 대시(-)나 마침표(.)같은 기호들을 사용할 수 없습니다.

키워드나 예약어는 사용할 수 없어요.  break, case, catch, continue, default, delete, do, else, finally, for,if, instanceof, new, reutrn, switch, this, throw, try, function, typeof, var, void, while, with, preventDefault, length, click, mouseover, setInterval, css 등..

모든 변수는 대/소문자를 구별합니다. score와 Score는 다른 변수에요!

변수가 저장할 정보의 종류를 잘 표현하는 단어를 사용합시다

사람의 이름은 firstName 성은 lastName 나이는 age

변수의 이름에 두 개이상의 단어를 사용할 때에는 뒷 단어의 첫 글자를

대문자로 사용하자 또는 단어를 언더스코어(_)로 연결해도 됩니다

ex) firstname X firstName O first_name O

 

 

 

전역변수와 지역변수

* 전역변수란?

        전역에서 사용하는 데이터를 담는 변수이며 어디서든지 사용 가능합니다.

* 지역변수란?

        특정 영역에서만 사용하는 변수로 함수 내부에 주로 만들어집니다.

//전역변수
let a = 10
console.log(a) //10

//지역변수
function data(){
	let a = 10
}
console.log(a) //Syntax Error

 

+ ES6 변수 

https://webty.tistory.com/136?category=885818 

JS : ES6 변수(let)과 상수(const)

 

 

 

---

 

 

 

2개이상의 데이터값을 저장하는 방법 = 1. 배열(Array)

* 배열은 2개 이상의 데이터값을 가질 경우 사용합니다.

* 대괄호 [, ] 와 new Array 등의 선언방법으로 작성합니다.

* 배열명[n] //배열 인덱스는 0 부터 시작합니다.

 

▼ 스크립트는 7개의 배열값을 가진 배열 변수를 선언합니다.

 

 

 

 

배열 생성, 출력 1)

var 배열명 = [저장데이터1, 저장데이터2];
배열명[배열인덱스번호]

var color = ['white', 'black']
color[0] //white
color[1] //black

 

 

배열 생성, 출력 2)

var 배열명 = new Array(데이터1, 데이터2)

배열명[배열인덱스번호]

var color = new Array('white', 'black')
color[0] //white
color[1] //black

 

 

배열 생성, 출력 3)

var 배열명 = new Array(3);
배열명[0] = 데이터1;
배열명[1] = 데이터2;

var color = new Array(2);
color[0] = 'white';
color[1] = 'black';

color[0]
color[1]

 

---

 

 

2개이상의 데이터값을 저장하는 방법 = 2. 객체(Object)

* 객체는 변수에 2가지 이상의 속성과 값 또는 배열을 담을 때 사용할 수 있습니다.

* 기본 작성 구조는 아래와 같습니다.

 

변수키워드 객체변수 = { 속성:값, 속성:값; }

//고양이는 검은 털을 가지고 있고 1살입니다.
const cat = { 
  color:'black', 
  age:1 
}

cat.color //black
cat.age //1

 

 

변수키워드 객체변수 = { 속성:[배열1, 배열2], 속성:값; }

//고양이는 흰색과 검은색의 털을 가지고 있고 1살입니다.
const cat = { 
  color:['black', 'white'], 
  age:1 
}

cat.color[0] //black
cat.color[1] //white
cat.age //1

 

 

변수키워드 객체변수 = { 속성:값, 속성:함수; }

//고양이의 이름은 쿠키이고 생일은 12/25일입니다.
const cat = {
  name : '쿠키',
  birthday : '12.25',
  birth:function(){
  	return this.birthday + '생일축하해!'
  }
}