Variable (변수)

---

데이터를 담는 공간

<script>
var fruit;					// 변수 선언
fruit = "apple";	 		// 변수 초기화

var fruit = "orange"; 		// 변수 선언 및 초기화
fruit = "banana"; 			// 데이터 변경

console.log(fruit)			// banana 출력 (개발자도구)
document.write(fruit)		// banana 출력 (웹페이지)
</script>

리터럴(literal)

---

· 코드 안에서 직접 만들어 낸 상수 값 자체를 의미, 값을 구성하는 최소 단위
· 값은 프로그램에 의해 수정 가능
· 다양한 방법으로 생성 가능, 이때 방법으로 리터럴 표기값 사용

10.50, 1001 						// 숫자 리터럴
'Hello', "world" 					// 문자열 리터럴
true, false							// 불리언 리터럴
null 								// null	리터럴
undefined							// undifined 리터럴
{ name: 'Lee', gender: 'male' } 	// 객체 리터럴
[ 1, 2, 3 ] 						// 배열 리터럴
/ ab+c /							// 정규표현식 리터럴
function() {}						// 함수 리터럴

변수 이름 규칙

---

• 다른 변수와 이름 중복 허용 X
• 대소문자를 구분함
• 변수는 var, let, const 키워드를 사용하여 선언하고 값을 할당 함.
• 특수문자 X ( _ $ 는 예외 )
• 띄어쓰기 X ( 대신 camelCase : myName )
• 키워드(예약어) X ( const, var, let ··· )
• 숫자로 시작 X
• 이모지 / 이모티콘 X

변수의 종류

let , const
ES2015 (ES6) 이후 새롭게 등장한 변수 선언 방법

var

---

1. 전역 범위(global-level scope) 또는 함수 범위(function-level scope)

// 변수의 범위에 따른 에러
    var school = "first grade"; 		// 전역 범위
	function newFunction = () => {
     	var classroom = "seven";		// 함수 범위
    }
    
    console.log(classroom) 
	// error: classroom is not defined

2. 재선언 및 업데이트 가능

// 1. 재선언 가능
var school = "first grade";
var school = "sceond grade";

// 2. 업데이트 가능
var school = "first grade";
school = "third grade";

3. 호이스팅 시 초기화 됨

• console.log 보다 변수가 아래에 있음에도, 범위 내에서 최상단으로 끌어올려지며 값이 undefined로 초기화 된 것 ( not defined가 아님 )

console.log(school);
let school = "first grade";
// school is undefined

let

---

1. 블록 범위 (block-level scope)

2. 재선언 불가능, 업데이트 가능

let school = "first grade";
let homework = "read book:";

if (times > 3) {
	let hobbit = "soccer";
	console.log(hobbit); // "soccer"
}

console.log(hobbit) 
// hobbit is not defined

3. 호이스팅 시, 초기화 되지 않음

• var와 마찬가지로 let 선언은 최상단으로 끌어올려지지만, undefined 으로 초기화되는 var와 다르게 let의 키워드는 초기화되지 않음.
• 다만, 선언 이전에 let 변수를 사용하려고 시도한다면 Reference Error(참조 오류) 발생

const

---

1. 블록 범위 (block-level scope)

2. 재선언 및 업데이트 업데이트 불가능

• 객체 멤버는 업데이트 가능

// 1. 원시 타입
  const school = "first grade";
  school = "second grade";
  // error: Assignment to constant variable. 

// 2. 객체 타입
  const school = {
  	  grade: "first",
      number: 3
  }
  
	// 2-1. 객체 업데이트 불가
  	  school = {
          subject: "korean",
      	  number: "three"
      } 
	  // error:  Assignment to constant variable.

  	// 2-2. 객체 멤버 업데이트 가능
   	  school.classroom = "seven";

3. 호이스팅 시, 초기화 되지 않음

• let과 동일 ( 최상단으로 끌어올려짐, 선언 이전에 사용 시 Reference Error)

변수 데이터 타입

Primitive(원시) 타입

---

⚪ 단일 데이터
👉 단 한 개의 데이터만 저장

Number : 숫자

---

var num1= 10; // 정수
var num2= -20; // 음수
var num3= 3.14; // 실수

String : 문자열

---

var str1= "hello world";
var str2= 'he's a boy';
var str3= "20";

Boolean

---

• True로 인식하는 자료의 타입

'false'		// 문자열
'0'			// 문자열
[]			// 빈 배열
{}			// 빈 객체
외 다른 값들

• False로 인식하는 자료의 타입

false
0			// 숫자 0
''			// 빈 문자열
null
undefined
NaN

Null과 Undefined 의 차이
둘 다 값이 비어있음을 나타내는 데이터 타입

• undefined
  변수가 선언만 되고 값이 할당되지 않음 ( 누구나 점유 가능 )
  변수 안에 데이터가 '비어있는' 상태
• Null
  객체 타입으로 '비어 있는 값'을 의미 ( 'null' 이라는 값이 세팅된 상태 )
  변수 안에 '빈 데이터'를 삽입한 상태

Symbol

---

ECMA Script 6 에서 등장한 새로운 데이터 타입, 고유한 값을 만들기 위한 데이터 타입

let tmp1 = Symbol("tmp");
let tmp2 = Symbol("tmp");

console.log(typeof tmp); 						// symbol
console.log(tmp1 === Symbol("tmp")); 			// false
console.log(tmp1 === tmp2);			 			// false

Object(객체) 타입

---

· Primitive Type 은 제외하고 다른 모든 타입은 Object 타입
· 메모리 공간이 "동적으로" 변하는 데이터 타입
· 메모리 공간에 값을 할당
· 식별자 (변수이름은 다른 메모리 공간에 있는 값의 주소를 할당)
· 복합 데이터
👉여러 개의 데이터를 저장

⚪ 객체 종류

• 배열 (Array) : 순서가 있는 여러 개의 데이터가 들어가는 데이터 타입
• 객체 (Object) : 여러 개의 key와 value로 이루어진 데이터 타입
• 함수 (Function) : 함수를 호출할 때 stack 메모리 공간 생성, 호출이 끝나면 stack 공간에서 삭제

배열 (Array)

---

variable = [a, b, ··· ]

· 같은 타입의 변수 여러 개를 저장하는 공간
· 좌표값(index)을 통해서 값이 순서대로 들어간다.
· 데이터의 좌표값(index) 부여, 첫번째 좌표값은 0

⚪ 생성 방법
1. 선언과 동시에 할당 ( nums = [ 1, 2, 3 ]; )
2. 선언한 이후 하나씩 할당 ( nums[0]= 1; nums[1]= 2; nums[2]= 3; )

<script>

var fruits = ["사과", "배", "수박"];
consloe.log(fruits[0]);				// "사과"

fruits[0] = "포도";					// 인덱스로 접근하여 새로운 데이터 대입
consloe.log(fruits[0]);				// "포도"

</script>

객체 (Object)

---

variable = {key : value};

· 서로 연관 있는 여러 종류의 데이터 타입을 한 개로 묶어주기 위해서 object 타입 사용
· key 값을 통해서 value 값을 받아 옴
👉 key(프로퍼티) : value(데이터)

⚪ 접근 방법
1. 식별자.key
2. 식별자['key']

<script>

var student = {
	name : "Merry",					//	프로퍼티(name) : 데이터("Merry")
    age : 20,
    skills : ["JavaScript", "HTML", "CSS"],
    sum : function (num1, num2) { return num1 + num2; 	// sum = 메서드
    } 
}
>
console.log(student.name);			//	객체명.프로퍼티명
console.log(student['age']);		//	객체명['프로퍼티명']
>
student.name = "Mark"				//	name 프로퍼티의 데이터 변경

</script>

함수 (Function)

---

<script>

// 	형태 1 (변수 내에 삽입)
var func1 = function() {
	console.log("Func1");
}

// 	형태 2 (함수 자체를 선언)
function func1() {
	console.log("Func1");
}

>> func();						// 함수 호출

</script>