Front/JavaScript
JavaScript - 변수와 연산자
by Hyeon_
2021. 12. 7.
JavaScript (자바스크립트)
JavaScript
- 정식 명칭 ECMA스크립트 (ECMAScript)
- ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
- ES6
- default parameter
- class
- arrow function
- const
- let
JavaScript란?
- 동적인 웹 페이지를 작성하기 위하여 사용되는 언어
- 웹 표준 프로그래밍 언어
- 모든 웹 브라우저에서 자바스크립트 지원
- 웹 브라우저 뿐 아니라 스마트폰용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정받고 있음
- 초기에는 브라우저에 내장되어 제한된 기능만 지원하였으나, 현재
Ajax(Asynchronous JavaScript and XML) 기술과 함께 영향력 증가
- 전 세계에서 가장 많이 사용되는 언어
기능
- HTML이 지원하지 못하는 다양한 기능 지원
- 동적 움직임 / 이벤트 발생 처리 / 경고 메시지 출력 / 데이터 유효성 확인 / 멀티미디어 기능
- Ajax를 이용하여 새로운 내용을 동적으로 로딩하거나 서버에 전송하여 동적인 페이지 생성
- 애니메이션 기능 지원
- 브라우저 사용자의 특성(웹 페이지 탐색 움직임, 게시물 읽을 때의 습관 등)에 대한 정보를 서버로 전송하여 웹 분석, 사용자 동작 트래킹 분석, 웹서비스 개인화 등에 사용
자바 스크립트 실행
- 스크립트 언어이기 때문에 컴파일 되지 않고
- 인터프리터(해석기)를 통해 웹 브라우저에서 한 줄씩 바로 실행
스크립트 언어(인터프리팅 언어)
- 독자적으로 실행되지 않고 다른 프로그램에 내장되어 사용
- 소스코드를 컴파일하지 않고 한 줄씩 인터프리터를 통해 바로 실행
- 대표적인 인터프리팅 언어: C
자바 스크립트의 용도
- 이벤트에 반응하는 동작 구현
- HTML 요소들을 동적으로 변경
- 사용자가 입력한 값들을 검증
- 게임이나 애니메이션 / 멀티미디어 기능 구현
- Ajax 기술을 사용하여 서버와 데이터를 비동기적으로 교환
비동기식 처리
- 서버 측에 데이터를 요청한 후 데이터 수신이 완료될 때까지 기다리지 않고 다른 작업 진행이 가능한 기술
자바스크립트에서의 변수
- 프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억 장소
자바스크립트에서 식별자(변수명, 함수명 등 명명 규칙)
- 시작은 반드시 영문자나 _ 사용. 숫자로 시작하지 않음
- 대소문자 구별
- 키워드 사용할 수 없음
- 특수문자, 공백 사용할 수 없음
- 한글 사용 가능(영문 사용 권장 - 한글 사용 안 함)
- 의미 있는 단어 사용 (name, address, age)
변수 선언
- var
- let
- const
- EX6 이후 보완하기 위해 추가된 변수 선언 방식: let과 const
변수 선언 특징
- 변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨
- 변수의 데이터 타입은 실행 시 결정 (동적 타이핑)
- 명시적으로 선언하는 경우에는 예약어 var 사용(명시적 선언 권장)
- var total; // 명시적 선언
- var name, address; // 여러 개 선언 가능
- var price = 0; // 변수 초기화(선언과 동시에 값 저장)
- var name = "홍길동";
- tel = "010-1234-5678";
정적 타이핑 언어 Vs. 동적 타이핑 언어
정적 타이핑 언어
- 변수의 자료형을 컴파일 시에 결정
- C, C++, Java 등
- 선언한 변수의 자료형에 따라 값 결정
int a; // 변수의 선언. 정수형(4바이트 값을 저장하기 위한 공간 확보)int a = 10; // 변수의 선언과 동시에 값 저장 -> 변수 초기화- 선언 - > 컴파일러에게 알리는 것 -> 실행 시 메모리 할당받기 위해 (운영체제로부터 필요한 만큼 확보하기 위함)
동적 타이핑 언어
- 변수의 자료형을 실행할 때 결정
- 자료형 없이 변수에 값 저장
- JavaScript, Python 등
variable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
// 명시적 선언
var num=10, pi=3.14;
var ch = 'a';
var name = "홍길동";
// 명시적으로 선언하지 않고 값 저장
address = "서울시 강남구";
nation = '대한민국'; // 문자열에 작은 따옴표 사용 가능
document.write(num); // 변수 값 출력
document.write("<br>");
document.write(ch);
document.write("<br>");
document.write(name);
document.write("<br>");
document.write(address);
document.write("<br>");
document.write(nation);
</script>
</head>
<body>
</body>
</html>
변수의 유형
- 멤버 변수 (전역 변수)
- 전역 범위(<script> 태그 바로 아래)에 명시적으로 선언되거나
- 명시적으로 선언하지 않고 사용하는 모든 변수
- 자바스크립트 코드 내 모든 곳에서 사용 가능
- 지역변수
- 함수 내에서 var을 붙여서 선언된 변수
- 함수 내에서만 사용 가능
- 함수 내에서 var을 붙이지 않고 사용하는 변수는 모두 전역 변수로 간주
variableLocal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 지역변수</title>
<script type="text/javascript">
function f1() {
// 지역변수 : 함수 내에서 var 붙인 변수
var localVal1 = 100;
document.write(localVal1 + "<br>");
}
f1();
// 함수 밖에서 불렀기 때문에 출력되지 않음
//document.write(localVar1 + "<br>");
function f2() {
// 함수 내에서 var 안붙이고 선언된 변수 -> 함수 밖에서도 사용 가능
localVar2 = 200;
}
f2();
document.write(localVar2 + "<br>");
function f3() {
// 지역변수 : 함수 내에서 let 붙인 변수
// 함수 내에서만 사용 가능
let localVar3 = 300;
}
f3();
document.write(localVar3 + "<br>"); // 오류
</script>
</head>
<body>
</body>
</html>
variableGlobal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 전역변수 / 지역변수</title>
<script type="text/javascript">
// var의 유무 관계없이 전역변수
// 어디서든 사용 가능
var x=5, y=10; // var이 있는 명시적 선언. 전역 변수
total=0; // var 없이 값 저장. 전역 변수
function f1() { // 모든 전역변수 사용 가능
x = x + y;
document.write(x + "<br>");
}
function f2() { // 모든 전역변수 사용 가능
total = x + y;
document.write(total + "<br>");
}
f1();
f2();
</script>
</head>
<body>
</body>
</html>
var Vs let
- var과 let의 차이점은 scope
- var : function 단위의 scope
- let : { }(block) 단위의 scope
- 차이점 2
- var은 동일 변수명을 여러 개 선언해서 사용해도 오류 없음
- let은 이미 선언된 변수명은 다시 사용할 수 없음
- const : 상수의 개념 (값 변경 불가)
var_let.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript var Vs. let</title>
<script type="text/javascript">
// 동일 변수명 중복 선언 가능 (오류 없음)
var name = "홍길동";
console.log(name);
var name = "이몽룡";
console.log(name);
// 동일 변수명 중복 선언 불가능
let person = "홍길동";
console.log(person);
let person = "이몽룡";
console.log(person);
</script>
</head>
<body>
</body>
</html>
var_let2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript var Vs. let</title>
<script type="text/javascript">
/*
sum = 0;
for(var i = 0; i<10;i++){
sum += i;
}
console.log(i); // for문 밖에서 i 사용 가능
*/
sum = 0;
for(let i = 0; i<10;i++){
sum += i;
}
console.log(i); // for문 밖에서 i 사용 불가 -> block 안에서만 사용 가능
// let : if문 안에서 선언했으면 if문 안에서만 사용 가능
</script>
</head>
<body>
</body>
</html>
const.html
- const : 상수 개념. 값을 변경할 수 없음
- 값이 변경되지 않을 경우 변수로 사용 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript const</title>
<script type="text/javascript">
let name = "홍길동";
console.log(name);
name = "이몽룡";
console.log(name);
const address = "서울";
console.log(address);
// const : 상수 개념. 값을 변경할 수 없음
const address = "캐나다";
console.log(address);
</script>
</head>
<body>
</body>
</html>
호이스팅(Hoisting)
- 선언문 이전에 변수를 사용하는 것
- var로 선언된 변수는 사용 가능
- let으로 선언된 변수는 사용 불가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 호이스팅</title>
<script type="text/javascript">
// 호이스팅 : 선언문 이전에 변수 사용
// let은 사용 불가
// var 사용 가능
console.log(name);
var name = "홍길동";
</script>
</head>
<body>
</body>
</html>
연산자
