javascript 변수

변수

어떤 정보에 이름을 붙여서 저장하고 싶을때 사용
*아래 예제 코드에서 Mike는 " (따옴표)로 감싸져 있고 32는 감싸져  있지 않는데 자바스크립트에선 문자형(string)만 따옴표로 감싸줘야함! 만약 문자형에서 따옴표를 붙이지 않는다면 에러 발생

name = "Mike";
age = 32;
// name 이라는 변수에 Mike라는 값이, age 변수엔 32이라는 값이 들어가 있는 상태

 

- 앞으로 예제를 위해 아래 방법으로 변수에 접근할 것임

alert(), console.log()

name ='Mike'
alert(name);
console.log(name);
//웹 사이트의 console 창에 보면 "Mike" 라고 출력도히는걸 볼 수 있음

alert을 통해 출력된 'name'

변수 이름 규칙

프로그래밍 언어에서 이름을 붙일 때 사용하는 단어. 식별자를 붙일때는 몇가지 지켜야할 규칙이 있음
*필수로 지켜야할 아래 규칙 외에도 관례적으로 알파벳 사용, 의미있는 단어 사용 등 규칙도 있음

• 키워드(예약어)를 사용하면 안됨 (예약어가 사용 불가능한 것은 아님 사용할 수 있는 예약어도 존재)
• 숫자로 시작하면 안됨
• 특수 문자는 _ 와 $만 허영
• 공백을 포함하면 안됨
• 대소문자를 구분함 ex) apple 과 Apple 은 다른 변수명 그러나 관례적으로 대문자 선언은 class 와 const선언시만

변수선언 방법

변수는 3단계의 생성과정을 거침

 

[ 선언 단계 ] - [ 초기화 단계 ] - [할당 단계 ]

 

var는 선언과 초기화 단계가 동시에 진행 그래서 할당 전에 호출하면 에러가 나오지 않고 'undefined'가 출력됨

let은 선언, 초기화, 할당이 각각 분리되어 진행. 호이스팅 되면서 선언단계는 먼저 이뤄지지만 초기화 단계는 실제 코드에 도달할경우 되기 때문에 에러가 나는것임 let 과 var는 선언만 해두고 나주엥 할당하는게 가능하지만(둘은 나중에 값을 바꿀수 있음) const는 아님

const는 선언,초기화, 할당이 모두 동시에 진행 

 

 

 

name='Mike'; 라는 변수를 선언하고 추후에 name = 'dana'; 라고 선언을 하게 되면 마지막에 선언된 값으로 변경된다. 여러 개발자와 협업할 것을 생각해서 이를 방지하기 위한 변수 선언 방법이 있는데 let 과 const , var이다.
* 코드를 입력할때 팁으로 무조건 const로 선언을 하고 문제가 될 것 가같은 경우만 let 사용, var 요즘 거의 사용 안함

 

• var: ES5 이전, 지금은 사용 지양, 함수 레벨 스코프, 재선언시 에러X(에러가 안뜨기 때문에 협업개발시 문제 발생할 수 있음)
• let: 블록 레벨 스코프, 재선언시 에러O, 콘솔에서는 에러X, 변경가능한 자료형
  *다른 외부 스크립트에서 선언을 했어도 같은 document 에서 작동시 에러가 뜸 
• const: 블록 레벨 스코프, 재선언시 에러O, 콘솔창 에서 직접 입력시 에러X, 변경이 불가능한 자료형(상수 ex-원주율)
  *const로 선언시 지켜야할 규칙은 대문자로 선언하는것 -> 다른 개발자에게 상수라고 알리기 위함

let name = 'Mike';
let name = 'danna';
//Uncaught SyntaxError: Identifier 'name' has already been declared
//let을 통해 선언시 중복으로 동일한 변수명 선언시 콘솔에 위와 같은 에러가 뜸
name = "kong";
// 에러가 뜨지 않고 변수가 'kong' 으로 바뀜

const SPEED_LIMIT = 50;

*let은 생략하고 다른이름으로 변경할 수 있음 let을 생략하고 선언하면 됨

 

<블록레벨 스코프란?>

블록레벨 스코프는 중괄호로 감싸져 있는 곳에서만 변수 출력 가능

*함수 레벨 스코프는 if문, for문 모든 중괄호 안의 블록 스코프에서 벗어나서도 쓰일수 있지만 오직 함수 스코프만 벗어날 수 없음

// 블록레벨 스코프란
if (true) {
  let testName = "Mike";
  const testAge = 32;
  console.log(testName)  // "Mike 출력"
}

consoel.log(testAge); // consoel is not defined

 

---

<강의를 보고 이해가 안됐던것>

*현재
html 문서에 <h1 id="one">Hellow world</h1> 라고 돼 있는 상태
document.getElementById('one').innerHTML = 'hi world'  스크립트엔 이렇게 써져있는 상태

 

const one = document.getElementById('one') 

$one.innerHTML  

// 출력 된것이 > 'hi world' 로 변경

 

이게 let을 생략하고 다시 변수 선언하면 변수가 변경되는 거랑 무슨 상관이지..? 강의 16분부터 다시 보기

---

<출처>&nbsp;https://velog.io/@hari6180/var-let-const-%EC%B0%A8%EC%9D%B4

* 위 이미지는  https://velog.io/@hari6180 님의 블로그 에서 가져온 이미지입니다.

 

키워드 (예약어)

자바스크립트가 처음 만들어질 때 젛애놓은 특별한 의미가 있는 단어 

예약어 이기 때문에 class= "수업" 같이 이미 예약이 돼있는 변수명이기 때문에 값을 매길 수 없음

awai	break	case	catch	class	const
else	defult	delete	for	function	if
import	return	switch	typeof	let	static
true	false	null	from	get	set

*다 외울 필요는 없음 하다보면 자주사용하는 키워드는 외워질것