-
변수 (var, let, const) + 연산자 + 데이터 타입프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 13:35
변수
- 프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억장소
자바스크립트에서 식별자(변수명, 함수명 등) 명명 규칙
- 시작은 반드시 영문자나 _ 사용. 숫자로 시작하지 않음
- 대소문자 구별
- 키워드 사용할 수 없음
- 특수문자, 공백 사용할 수 없음
- 한글 사용 가능 (영문 사용 권장 - 한글 사용 안 함)
- 의미 있는 단어 사용 (예: name, address, age)
변수 선언
- var
- let
- const
- ES6 이후 보완하기 위해 추가된 변수 선언 방식 : let과 const
변수 선언
- 변수를필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨
- 변수의 데이터 타입은 실행 시 결정 (동적 타이핑)
- 명시적으로 선언하는 경우에는 예약어 var 사용 (명시적 선언 권장)
- var total; //명시적 선언
- var name, address; //여러 개 선언 가능
- var price = 10000; // 변수 초기화 (선언과 동시에 값 저장)
- var name = “홍길동”;
- tel = “010-1234-1234”;
정적 타이핑 언어 vs 정적 타이핑 언어
정적 타이핑 언어
- 변수의 자료형을 컴파일 시에 결정
- C, C++, Java 등
- 선언한 변수의 자료형에 따라 값 저장
- int a; //변수의 선언
- int b = 10; // 변수의 선언과 동시에 값 저장 : 변수 초기화
- 선언의 의미 : 알린다 (누구에게?) 컴파일러에게 알림. 왜? 실행 시 메모리 할당 받기 위해 얼마만큼 필요한지 확보하도록. 운영체제로 부터.
- int a; // 정수형 변수를 선언. 정수형 (4바이트 값을 저장하기 위한 공간 확보하도록 알림. 컴파일러가 운영체제에게 공간 확보 실행 시에 값을 저장)
동적 타이핑 언어
- 변수의 자료형을 실행 시 결정
- 자료형 없이 변수에 값 저장
- var name = “홍길동”;
- num = 100;
- JavaScript, Python 등
변수 선언 예제 : variable.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 변수</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("num : " + num + "<br>"); document.write("pi : " + pi + "<br>"); document.write("ch : " + ch + "<br>"); document.write("name : " + name + "<br>"); document.write("address : " + address + "<br>"); document.write("nation : " + nation); </script> </head> <body> </body> </html>
변수의 유형 : 멤버변수(전역변수) / 지역변수
멤버변수 (전역변수)
- 전역범위(<script> 태그 바로 아래)에 명시적으로 선언되거나
- 명시적으로 선언하지 않고 사용하는 변수
- var 붙든 안 붙든 전역변수
- 자바스크립트 코드 내 모든 곳에서 사용 가능
지역변수
- 함수 내에서 var를 붙여서 선언된 변수
- 함수 내에서만 사용 가능
- 함수 내에서 var를 붙이지 않고 사용하는 변수는 전역변수로 간주
전역변수/지역변수 예제
- variableGlobal.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 전역변수</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(); document.write(x + "<br>"); document.write(total + "<br>"); </script> </head> <body> </body> </html>- variableLocal.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 지역변수</title> <script type="text/javascript"> function f1() { // 지역변수 : 함수 내에서 var 붙인 변수 // 함수 내에서만 사용 가능 var localVar1 = 100; } f1(); // 함수 f1()에서 선언된 지역변수 사용 불가 : 오류 (not defined) //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>"); // 오류 localVar3 is not defined </script> </head> <body> </body> </html>var vs let
- var와 let의 차이점은 scope
- var : function 단위의 scope
- let : { } (block) 단위의 scope
- var와 let의 차이점2
- var는 동일 변수명 여러 개 선언해서 사용해도 오류 없음
- let : 이미 선언된 변수명으로 선언 불가
- const : 상수의 개념 (값 변경 불가)
호이스팅 (Hoisting)
- 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
- 즉, 선언은 뒤에 했는데, 선언문 전에서 변수 사용하는 것
- var로 선언된 변수는 가능
- let로 선언된 변수는 불가
- console.log(name);
- var name=”홍길동”;
연산자 : 자바와 동일
자바스크립트에서 사용되는 데이터 타입
데이터 타입 (데이터 값의 유형)
- 숫자 : 정수형, 실수형
- 문자 : ‘a’
- 문자열 : “string”, ‘작은 따옴표도 가능’
- NaN : Not a Number (숫자가 아닌데 숫자로 사용할 경우)
- 논리값 : true, false
- undefined와 null
- null : ‘참조 객체 없음’의 의미 (값이 없을 때)
- undefined : 값의 유형을 알 수 없음
데이터 형변환
- parseInt() : 정수값으로 형변환
- parseFloat() : 실수값으로 형변환
- Number() : 숫자로 형변환 (실수인 경우 소수점 이하 값 유지)
- String() / toString() : 문자열로 형변환
- String(변수)
- 변수(객체). toString()
데이터 타입 예제 : dataType.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 데이터 타입</title> <script type="text/javascript"> var num1=15; var num2=123.45; var answer = 'y'; var name="홍길동"; var address='서울시 종로구 1번지'; var result=true; var nothing; // [취소]버튼 누르면 null값 반환 var input=prompt("자료형 예제", "취소 버튼 누르세요"); // 1. 숫자 연산 document.write("정수 * 실수 : " + (num1 * num2)); // 2. 형변환 : parseInt(num2) : 실수값을 정수로 변환 // 123.45 -> 123 document.write("<br>실수를 정수로 형변환 : " + parseInt(num2)); // 3. 숫자를 문자열로 변환 document.write("<br>숫자를 문자열로 형변환 : " + String(num1) + num2.toString); // 4. 문자열 * 문자열 : NaN(Not a Number : 숫자 아님) document.write("<br>문자열 곱하기 : " + (name * address)); // NaN 출력 // 5. nothing변수를 선언만 하고 값을 저장하지 않은 경우 // undefined : 값의 유형을 알 수 없음 document.write("<br>nothing : " + nothing); // undefined 출력 // 6. prompt() 대화상자에 [취소] 버튼을 누를 경우 // null : '참조 객체 없음'(값이 없을 때) document.write("<br>input : " + input); // null 출력 </script> </head> <body> </body> </html>'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26 자바 스크립트 (JavaScript)란? + 기본구조 및 사용법 (0) 2022.01.26