728x90
반응형
SMALL
1. 변수 (variable)
- 데이터를 저장할 수 있는 메모리 공간
- 값이 변경될 수 있음
- 자바스크립트의 변수는 타입이 없음
var,let 키워드를 사용하여 변수를 선언
1-1. var
- 유연한 변수 선언 방식
- 지역변수, 전역변수와의 구별이 있음
- 같은 이름의 변수를 선언할 수 있음
- 약간의 버그로 인해 변수 선언시 var보다는 let을 주로 사용
// 버그???
console.log(num)
var num = 10;
{
console.log(num); // 전역변수 num = 10
var num = 20; // 지역변수 num = 20
}
console.log(num) // 전역변수 num = 20
1-2. let
- 지역변수, 전역변수의 구별이 확실
- 같은 이름의 변수를 선언할 수 있음
let 변수명 = 값;
let 변수명;
변수명 = 값;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변수</title>
</head>
<body>
<h2>변수</h2>
<script>
var num;
num = 10
console.log(num)
str = '안녕'
console.log(str)
var str = '반가워'
console.log(str)
{
console.log(num)
var num = 30
console.log(num)
}
console.log(num) // 30 ??????
console.log('----------')
let val = 10
console.log(val)
// let val = 20; 에러!( let을 안쓰고 같은이름으로 변수를 만들 경우)
{
console.log(val)
//let val = 30 에러!( let을 안쓰고 지역내에서도 같은 이름으로 변수를 만들 수 없음)
}
console.log(val)
</script>
</body>
</html>
✔ 트랜스 컴파일러
- 과거 브라우저 및 특정 브라우저 버젼등을 모두 사용할 수 있도록 해석해주는 라이브러리
- BABEL
2. 상수(constrant)
- 한번 선언된 상수는 다시 재정의할 수 없음
- 값을 재할당 할 수 없음
const 상수명 = 값;
// 예) const num = 10;
const 상수명;
상수명 = 값; // 사용할 수 없음!
✔ 자바스크립트에서 상수를 권장하는 이유
- 해킹을 방지하기 위해
- 개발자 실수를 방지하기 위해
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상수</title>
</head>
<body>
<h2>상수</h2>
<script>
// const s;
// s = '김사과'
const str ='김사과'
console.log(str)
const obj = {id: 'apple', name:'김사과', gender:'여자'}
console.log(obj.id)
console.log(obj.name)
console.log(obj.gender)
// obj = '오렌지';
// console.log(obj)
obj.id ='orange'
obj.name = '오렌지'
console.log(obj.id)
console.log(obj.name) // 객체 안의 데이터를 변경하는 것(객체가 가리키는 메모리주소는 바뀌지 않음)
</script>
</body>
</html>
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 자동 타입 변환 & 타입 변환 함수 & NaN(Not a Number) (0) | 2023.04.06 |
|---|---|
| [JavaScript] 자바스크립트의 데이터 타입 (0) | 2023.04.05 |
| [JavaScript] 주석문 & VSC 익스텐션 설치 - snippets 등록하는 법 (0) | 2023.04.05 |
| [JavaScript] 자바스크립트의 실행 순서 - <head>태그 사이, <body>태그 끝, <script async>, <script defer> (0) | 2023.04.05 |
| [JavaScript] 자바스크립트란? & 자바스크립트의 역사, 특징, 출력 (0) | 2023.04.05 |
