변수
'이름이 붙은 저장소' or '데이터를 저장하는 장소'
변하는 데이터(값)을 저장할 수 있는 메모리 공간
var, let, contst
*var의 변수 스코프는 function 단위
*const/let은 block 단위 {}, const는 상수, let은 변수
var / let
변수를 선언하는 키워드로 리터럴 값의 재할당이 가능함
const
상수를 선언하는 키워드로 선언과 동시에 리터럴 값을 할당해 줘야함 (const x = 2;)
리터럴 값의 재할당이 불가능하고, 재할당, 재선언이 모두 불가능함
* var, let, const 정리
|
변수 범위(Scope)
|
변수 선언
|
특징
|
|
함수 레벨 스코프
|
var
|
· 변수를 중복해서 선언할 수 있다.
· 함수 블록내에서 선언하면 지역 변수
|
|
블록 레벨 스코프
|
let
|
· 같은 블록{ }에서는 이미 선언한 변수를 중복해서 선언할 수 없다.
· 블록{ }, 제어문 블록{ } 내에서 선언하면 지역 변수
|
|
const
|
· 같은 블록 { }에서는 이미 선언한 변수를 중복해서 선언할 수 없고, 저장된 값을 변경할 수 없다.
· 블록{ }, 제어문 블록{ } 내에서 선언하면 지역 변수
|
cf. 모든 변수는 스코프 밖에서 선언하면 전역변수, 변수 범위 안에서 선언하면 지역변수이다.
변수는 스코프를 작게 잡아주는 것이 변수의 충돌을 피할 수 있는 현명한 방법이다.
var
재할당 재선언 가능
기본형
var 변수명;
var 변수명 = 값;
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var
var - JavaScript | MDN
var문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다.
developer.mozilla.org
*console창을 띄워서 확인해보자 - 웹 사이트 창에서 f12(개발자도구)누르고 콘솔 탭 눌러서 이용할 수 있음
var num = 5; // 전역변수
{var num = 7; num;} // 전역변수
num; // result 7 전역변수
num에 5라는 숫자를 넣고 스코프 안의 num에 7이라는 수를 재할당 해주었다. var는 함수안에서만 지역변수에 해당한다. 현재는 일반 블록 {}안에 있으니 스코프 안의 var는 전역변수이다. 때문에, 스코프 밖으로 빠져나와도 재할당된 7이라는 값을 저장하고 있다.
*참고
var는 재선언 가능한데, 이는 코드를 사용하다가 동일 변수를 사용해 값을 변경해도 에러가 발생하지 않기에, 이후에 더 큰 에러가 생길 수 있는 치명적인 단점이다. 이러한 이유를 보완하기위해 ES6에서 let과 const가 등장했다.
한번 var name을 jiwon이라고 선언했는데도 불구하고, var name을 한번더 choi로 선언해도 오류가 나지않고 출력이 되는 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<body>
<script>
var name = "jiwon";
document.write(name+"<br>");
var name = "choi";
document.write(name);
</script>
</body>
</html>결과화면
let
재할당은 허용되지만 재선언은 불가능
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
let - JavaScript | MDN
let 명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.
developer.mozilla.org
var num = 7; // 전역변수
{let num =3; num;} // 지역변수
num; // result 7 전역변수
let은 var와 다르게, 함수 뿐만 아니라 일반 블럭{}에서도 지역변수에 해당하기 때문에, 처음에 num에 7의 값을 할당해주었으면, { } 안의 num을 2로 재할당 해주어도 이는 { }안에서만 해당하기에 { }안에서의 num은 재할당된 값 2가 출력 되지만 {} 밖의 num에서는 { }밖에서 할당해주 었던 값 7이 출력된다.
*참고
let은 재선언이 불가능 하기 때문에, 한번 선언을 해주고 난 뒤에 똑같은 변수로 선언해주게 되면 오류가 생긴다.
<!DOCTYPE html>
<html>
<body>
<script>
let name = "jiwon";
console.log(name);
name = "ji";
console.log(name);
let name = "choi";
console.log(name);
</script>
</body>
</html>결과화면
const
변수에 저장할 수 있는 데이터 형
문자형(string), 숫자형(number), 논리형(boolean), null & undefined
1) 문자형 데이터
var name = "jiwon";
var num = "10"; // 숫자이지만 " " 안에 있을 시 String으로 인식함
var tagname = "<p>String</p>";
2) 숫자형 데이터
var num = 1000;
var num2 = Number("500"); // " "안에 담겨져있는 것은 String이지만, Number 사용시 숫자형으로 변환하여 숫자 500이 됨 --> 형변환(다음 글에서 설명 예정)
3) 논리형 데이터
var bl = true;
var num = 10 >= 100; // false
var bn = Boolean(0); // false를 반환하고 변수 bn에 저장 0일경우 false 1일경우 true
var bn2 = Boolean("홍길동"); // 값이 있기에 true를 반환하고 변수 bn2에 저장
<!DOCTYPE html>
<html>
<body>
<script>
var a = true;
var b = false;
var c = 10>5;
var d = Boolean(null);
document.write(a, "<br>");
document.write(b, "<br>");
document.write(c, "<br>");
document.write(d, "<br>");
</script>
</body>
</html>
변수 선언시 주의 사항
참고 표
|
JavaScript란
|
JavaScript는 동적인 웹페이지를 만들기 위해서 사용되는 언어
최근에는 웹 뿐만 아니라 하이브리드앱, 서버 개발, IoT(사물인터넷) 등 사용범위가 확대되고 있음.
프론트와 백(서버)에 사용되는 언어.
|
|||||
|
Syntax
|
컴퓨터에서 사용되는 기본 문법
프로그래밍 언어 또한 고유의 문장을 가지고 있음.
즉, JavaScript프로그래밍 언어를 배운다는 것은 그 언어의 문장 구조를 배우는 것과 같다고 할 수 있음
|
|||||
|
Variable(변수)
|
변수는 문자나 숫자 등 어떤 값 등을 담아내는 공간
변수 선언 및 값 설정 : var 변수명 = 변수값;
|
|||||
|
console.log()
|
var msg="Nice to meet you";
console.log(msg);
디버깅이나 테스트 시 자주 사용되는 자바스크립트 메소드
|
|||||
|
변수 이름 짓는 법
자료형
|
카멜표기법(낙타표기법)
|
var koreaSeoulHome;
|
||||
|
스네이크 표기법(소문자)
|
var korea_seoul_home;
|
|||||
|
변수의 값은
달라질 수 있음
|
var str="Hello World!";
str="Nice to meet you";
console.log(str);
|
|||||
|
변수의
데이터타입 소개
|
String, Number, Boolean, Undefined, Object, Array, Function
|
|||||
|
String
|
var str='Hello World!';
var str1="Nice to meet you";
console.log(typeof str);
|
|||||
|
Number
|
var num=1;
console.log(typeof num);
|
|||||
|
Boolean
(true,false)
|
var bool=false;
console.log(typeof bool);
|
|||||
|
Null
|
변수 값을 의도적으로 비워둔 상태
var res=null;
console.log(typeof res); // object
|
|||||
|
Undefined
|
변수명만 존재하고 어떠한 값도 입력되지 않은 상태
var result;
console.log(typeof result);
|
|||||
|
object { }
|
var obj={
name:"inchon",
age:20
};
console.log(typeof obj);
|
|||||
|
Array [ ]
|
var arr=["Apple","Banana","Tomato"];
console.log(typeof arr);
|
|||||
|
Function
|
var func=function(width,height){
var area=width*height;
return area;
}
console.log(typeof func);
|
|||||
|
|
||||||
|
데이터의 타입
(자료형을 정의)
|
원시타입(primitive type) : 값을 복사(변경불가능한 값)
|
|||||
|
String, Number, Boolean, Null, Undefined
|
||||||
|
var str1="Hi";
var str2=str1;
str2; // Hi
str1="wow";
str2; //Hi
|
||||||
|
참조타입(reference type) : 값을 참조 (메모리를 가르킴 )
|
||||||
|
객체, 배열, 함수
|
||||||
|
var obj1 = {
val: 10
};
var obj2 = obj1;
console.log(obj2.val); // 10
obj1.val = 20;
console.log(obj2.val); // 20
|
||||||
|
|
||||||
|
Scope(스코프)
변수의 영향력
|
Global Variable
( 전역변수 )
|
함수의 외부에서 선언된 모든 변수는 전역 변수
|
||||
|
var a=5;
{var a=3;}
a // 3 전역변수
|
||||||
|
a = 1; //전역변수
var b = 2; //전역변수임
var c = 0; // 전역변수임
test = function() {
c = 3; // 전역변수
var d = 4; // 지역변수
}
|
||||||
|
|
||||||
|
Local Variable
( 지역변수 )
|
함수 내에 선언된 변수
|
|||||
|
let
|
var b=5;
{let b=3;
b;} // 함수 안에서만 b=3, 지역변수
b; // 5 전역변수
|
|||||
|
const(상수)
값을 할당
재할당 불가
const z = 2;
|
var x=10;
{const x=2;
x;} // 함수 안에서만 x=2, 지역변수
x; // 10 전역변수
|
|||||
|
|
||||||
참고 예제
GitHub - jiwonch/javascript_study
Contribute to jiwonch/javascript_study development by creating an account on GitHub.
github.com
참고 사이트
https://ko.javascript.info/variables
변수와 상수
ko.javascript.info
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Variables
필요한 정보를 저장하기-변수 - Web 개발 학습하기 | MDN
앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어
developer.mozilla.org
https://www.w3schools.com/js/js_variables.asp
JavaScript Variables
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'JavaScript > 스터디(책 200제 포함)' 카테고리의 다른 글
| 기본 - 형식, 규칙, prompt, alert, confirm (vscode 설치) (0) | 2022.08.04 |
|---|
댓글