본문 바로가기

디지털노마드/Javascript 강좌

JavaScript 변수(Variables)를 알아보자!

변수(Variables) 란 무엇입니까?

• 컴퓨터 프로그래밍의 변수는 정보 (데이터)를 컴퓨터 프로그램에서 참조 (검색) 및 조작할 수 있도록 만들어 줍니다.
• 개발자는 설명 변수 이름을 데이터의 레이블(이름표)로 사용하여 더 쉽게 데이터 검색 및 어떤 종류의 데이터인지 이해하는 데 도움 을 줍니다.


변수의 범위

• JavaScript의 변수는 함수 범위 (var) 또는 블록 범위 일 수 있습니다. (const 또는 let)
• 다른 언어와 달리 부모에서 선언 된 JavaScript는 변수 하위 기능 내에서 기능 (또는 전역 공간)을 사용할 수 있습니다.

 

변수 종류 - const, let , var

• ES6 이전에는 변수를 선언하는 유일한 올바른 방법은 “var”키워드 이었습니다.
• 최근에는 두 가지 새로운 유형의 변수를 도입했습니다.

 const 는 스크립트를 실행하는 동안 값을 한 번만 설정할 수 있으며 핵심 값은 변경할 수 없습니다.
• "const"키워드로 선언 된 변수는 블록 범위입니다
• let 은 이전의“var”과 유사하게 “let”키워드로 선언 된 변수는 값을 가질 수 있습니다.
    그리고, 스크립트 실행 중 변경할 수 있습니다.

• 함수 범위 인 "var"키워드로 선언 된 변수와 달리, "let"키워드로 선언 된 변수는 블록 범위 입니다.

<!DOCTYPE html>

<html>

<body>

 

<h2>JavaScript 변수 정하기</h2>

 

<p id="ex"></p>

 

<script>

var x = 5;

var y = 6;

var z = x + y;

document.getElementById("ex").innerHTML =

"z is: " + z;

</script>

 

</body>

</html>

<!DOCTYPE html>

<html>

<body>

 

<h2>JavaScript 변수 정하기</h2>

 

<p id="ex"></p>

 

<script>

var price1 = 5;

var price2 = 6;

var total = price1 + price2;

document.getElementById("ex").innerHTML =

"전체 가격은?: " + total;

</script>

 

</body>

</html>

 

자바 스크립트 식별자(JavaScript Identifiers)

모든 JavaScript 변수는 고유 한 이름으로 식별해야합니다. 이러한 고유 이름을 식별자라고합니다. 식별자는 짧은 이름 (예 : x 및 y)이거나 설명적인 이름 (연령, 합계, totalVolume) 일 수 있습니다.

변수 이름 (고유 식별자)을 구성하는 일반적인 규칙은 다음과 같습니다.

- 이름은 문자, 숫자, 밑줄 및 달러 기호를 포함 할 수 있습니다.
- 이름은 문자로 시작해야합니다
- 이름은 $와 _로 시작할 수도 있습니다
- 이름은 대소 문자를 구분합니다 (y와 Y는 다른 변수입니다)
- 예약어 (예 : JavaScript 키워드)는 이름으로 사용할 수 없습니다

 

할당 연산자(The Assignment Operator)


JavaScript에서 등호 (=)는 "같음" 계산시 사용하는 연산자가 아니라 변수에 값을 부여해주는 "할당"연산자입니다.

예를 들어, 자바스크립트에서  A= x + 6 은   방정식 처럼 x에 값을 부여해주는 것입니다.

"같음"연산자는 JavaScript에서 ==와 같이 작성됩니다.

 

자바 스크립트 데이터 형식(JavaScript Data Types)


JavaScript 변수는 100과 같은 숫자와 "Jane"와 같은 텍스트 값을 보유 할 수 있습니다.

프로그래밍에서 텍스트 값을 텍스트 문자열이라고합니다.

JavaScript는 여러 유형의 데이터를 처리 할 수 있지만 현재로서는 숫자와 문자열 만 생각하면됩니다.

문자열은 큰 따옴표 나 작은 따옴표 안에 작성됩니다. 숫자는 따옴표없이 작성됩니다.

따옴표 안에 숫자를 넣으면 텍스트 문자열로 취급됩니다.

<!DOCTYPE html>

<html>

<body>

 

<h2>JavaScript 변수</h2>

 

<p>문자는 따옴표안에 넣기.</p>

 

<p id="ex"></p>

 

<script>

var pi = 789384745;

var person = "Jane";

var answer = 'Hello!';

 

document.getElementById("ex").innerHTML =

pi + "<br>" + person + "<br>" + answer;

</script>

 

</body>

</html>

 

자바 스크립트 변수 선언하기


- JavaScript에서 변수를 만드는 것을 변수 "선언"이라고합니다. 보통 var 키워드를 사용하여 JavaScript 변수를 선언합니다.

예) var schoolName;

- 선언 후 변수에는 값이 없습니다 (기술적으로 정의되지 않은 값이 있음). 변수에 값을 지정하려면 등호를 사용하십시오.

예) schoolName = "한국대학";

- 변수를 선언 할 때 변수에 값을 지정할 수도 있습니다.

예) var schoolName= "한국대학";

<!DOCTYPE html>

<html>

<body>

 

<h2>JavaScript 변수</h2>

 

<p>변수 선언하기</p>

 

<p id="ex"></p>

 

<script>

var schoolName= "한국대학";

document.getElementById("ex").innerHTML = schoolName;

</script>

 

 

</body>

</html>

하나의 명령문으로 많은 변수를 선언 할 수 있습니다. var로 명령문을 시작하고 변수를 쉼표로 구분하세요.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 변수</h2>

<p>변수 선언하기</p>

<p id="ex"></p>


<script>
var person = "영수",
carName = "현대",
price = 200만원;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

 

값이 정의되지 않은 경우


컴퓨터 프로그램에서 변수는 종종 값없이 선언됩니다. 값은 계산해야하거나 나중에 사용자 입력과 같이 제공 될 수 있습니다.

값없이 선언 된 변수는 정의되지 않은 값을 갖습니다. 변수 carName은이 명령문을 실행 한 후에 정의되지 않은 값을 갖습니다.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript 변수값</h2>


<p id="ex"></p>

<script>
var schoolName;
document.getElementById("ex").innerHTML = schoolName;
</script>

</body>
</html>

 

자바 스크립트 변수 재 선언

JavaScript 변수를 다시 선언하면 해당 값이 손실되지 않습니다. 변수는 다음 명령문을 실행 한 후에도 여전히 값을 갖습니다.

<!DOCTYPE html>

<html>

<body>

 

<h2>JavaScript 변수 재선언</h2>



<p id="ex"></p>

<script>
var schoolName = "한국대학";
var carName;
document.getElementById("demo").innerHTML = schoolName;
</script>

</body>
</html>

자바 스크립트 산술(Arithmetic)

대수와 마찬가지로 = 및 +와 같은 연산자를 사용하여 JavaScript 변수로 산술을 수행 할 수 있습니다.

문자열을 추가 할 수도 있지만 문자열이 연결됩니다. 숫자를 따옴표로 묶으면 나머지 숫자는 문자열로 처리되고 연결됩니다.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript </h2>

 

<p id="ex"></p>

 

<script>

var x = 6 + 3 + 9;

var y = "jane" + " " + "kim";

var z = "5" + 6 + 7;

document.getElementById("ex").innerHTML = x+y+z;

</script>

 

</body>

</html>

 

자바 스크립트 달러 기호 $

JavaScript 식별자 (이름)는 다음으로 시작해야합니다.
편지 (A-Z 또는 a-z), 달러 기호 ($), 또는 밑줄 (_)


- JavaScript는 달러 기호를 문자로 취급하므로 $를 포함하는 식별자는 유효한 변수 이름입니다.
- 달러 기호를 사용하는 것은 JavaScript에서 흔하지는 않지만 전문 프로그래머는 종종 JavaScript 라이브러리에서 주 함수의 별칭으로 사용합니다.
- 예를 들어 JavaScript 라이브러리 jQuery에서 주 함수 $는 HTML 요소를 선택하는 데 사용됩니다. jQuery에서 $ ( "p"); "모든 p 요소 선택"을 의미합니다.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript </h2>

<p id="ex"></p>


<script>
var $ = 2;
var $ddMoney = 7;
document.getElementById("ex").innerHTML = $ + $ddMoney;
</script>

</body>
</html>

자바 스크립트 밑줄 (_)

JavaScript는 밑줄을 문자로 취급하므로 _를 포함하는 식별자는 유효한 변수 이름입니다.

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript </h2>

<p id="ex"></p>


<script>
var _x = 7;
var _600 = 4;
document.getElementById("ex").innerHTML = _x + _600;
</script>

</body>
</html>