JavaScript - 변수유형, 호이스팅, 연산자, 형변환

JavaScript - 변수유형, 호이스팅, 연산자, 형변환

FrontEnd_day3 정리 (2021.12.06 월요일)

JavaScript 변수

프로그램 실행 중 값을 저장하기 위한 메모리 내의 임시 기억장소

자바스크립트에서 식별자(변수명, 함수명 등) 명명 규칙 시작은 반드시 '영문자'나 '_' 사용한다. 숫자로 시작하지 않는다. 대소문자 구별 키워드 사용 불가 특수문자, 공백 사용할 수 없음 한글 사용 가능(영문 사용 권장) 의미 있는 단어 사용(어떻게 사용하는 변수(혹은 함수)인지 알 수 있도록)

변수 선언 var let const EC6 이후 보완하기위해 추가된 변수 선언 방식 : let, const 변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 된다. 변수의 데이터 타입은 실행 시 결정(동적 타이핑) 명시적으로 선언하는 경우 예약어 var사용 (명시적 선언 권장) var @@@; // 명시적 선언 var @@@, ###, $$$; // 여러개 동시 선언 가능 var price = 10000; // 변수 초기화 var name = "홍길동"; // 변수 초기화 tel = "010-1111-1111"; // 명시적 선언하지 않고 변수 선언

정적 타이핑 언어 변수의 자료형을 컴파일 시에 결정 c, c++, java 등 선언한 변수의 자료형에 따라 값 저장 선언의 의미는 실행 시 컴파일러가 운영체제에게 메모리를 얼만큼 할당 받아야 하는지 확보하도록 알리는 것

동적 타이핑 언어 변수의 자료형을 실행 시 결정 자료형 없이 변수에 값 저장 var name = “홍길동”; num = 100; JavaScript, Python 등

변수 선언 예제 : variable.html

// 명시적 선언 var num = 10, pi = 3.14; var ch = 'a'; var name = "홍길동"; // 명시적 선언하지 않고 값 저장. address = "서울시 강남구"; nation = "대한민국"; // 변수 값만 출력 document.write(num); // 문자열과 변수, 태그 연결해서 출력 document.write("
"); document.write("num : " + num + "
"); document.write("pi : " + pi + "
"); document.write("name : " + name + "
"); document.write("address : " + address + "
"); document.write("nation : " + nation + "
");

변수의 유형

멤버변수(전역변수) 전역 범위

지역변수 함수 내에서 var를 붙여서 선언된 변수 함수 내에서만 사용 가능 함수 내에서 var를 붙이지 않고 사용하는 변수는 전역변수가 된다. function @@@() { var name = "홍길동";} // 지역변수 function @@@() { name = "홍길동";} // 전역변수

전역변수/지역변수 사용 예제 : variableLocalGlobal.html

// 여기에 선언된 변수는 var 존재 여부와 상관 없이 전역 변수 var x = 5, y = 10; // 명시적 선언 전역변수 total = 0; // 비명시적 선언 전역변수 function f1() { // 모든 전역 변수 사용 가능 x = x + y; document.write(x + "
"); } function f2() { // 모든 전역 변수 사용 가능 total = x + y; document.write(total + "
"); } f1(); f2(); document.write(x + "
"); document.write(total + "
"); function localf1() { // 지역변수 : 함수 내에서 var 붙인 변수 // 함수 내에서만 사용 가능 var localVar1 = 100; } localf1(); // 값이 사용 되는지 확인 위해 함수 호출 //document.write(localVar1 + "
"); // 함수에서 선언된 지역변수 사용 불가 : Uncaught ReferenceError: localVar1 is not defined function localf2() { // 전역변수 : 함수 내에서 var 붙이지 않고 저장한 변수 // 함수 밖에서도 사용 가능 localVar2 = 200; } localf2(); // 값이 사용 되는지 확인 위해 함수 호출 document.write(localVar2 + "
"); // 제대로 출력 된다.

var와 let, const의 차이

차이점 1 : scope var : function 단위의 scope let : { }(block) 단위의 scope

차이점 2 : var는 동일 변수명 여러 개 사용해도 오류 없음 let은 이미 선언된 변수명으로 선언 불가

const : 상수의 개념(값 변경 불가)

var와 let, const의 차이 예제 : var_let.html

var name = "홍길동"; document.write(name + "
"); var name = "이몽룡"; document.write(name + "
"); // 홍길동 // 이몽룡 출력됨 // 동일 변수명으로 중복 선언해도 오류 없고 다른 값으로 출력 됐다. // let name = "성춘향"; // document.write(name + "
"); // Uncaught SyntaxError: Identifier 'name' has already been declared // 이미 사용됐기 때문에 사용 불가능 let name2 = "성춘향"; document.write(name2 + "
"); // 사용 가능 sumi = 0; for(var i = 0; i < 10; i++) { sumi += i; } document.write(i + "
"); // 10 출력 => i는 for문 밖에서도 사용 가능하다. // sumj = 0; // for(let j = 0; j < 10; j++) { // sumj += j; // } // document.write(j); // j is not defined 출력 안됨. => let은 해당 블록 안에서만 유효한 값. // const : 상수 개념. 값을 변경할 수 없다. let name3 = "홍길동"; document.write(name3 + "
"); name3 = "이몽룡"; document.write(name3 + "
") const address = "서울"; document.write(address + "
") // address = "부산"; // document.write(address + "
") // Assignment to constant variable. => 값 변경 불가능.

호이스팅(Hoisting)

변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

즉, 선언은 뒤에 하지만 선언 전에 미리 변수 사용하는 것

var로 선언된 변수는 가능하지만, let으로 선언된 변수는 불가능.

document.write(name);

var name = "홍길동"; 이 가능하다. (다른 출력 함수도 마찬가지)

호이스팅 예제 : variableHoisting.html

document.write(name); var name = "홍길동";

연산자

자바와 동일

데이터 타입

숫자 : 정수형, 실수형

문자 : 'a'

문자열 : "큰 따옴표도 가능하고", '작은 따옴표도 가능하다'

논리값 : true, false

undefined와 null null : 참조 객체 없음(값이 없다) undefined : 값의 유형을 알 수 없다.

데이터 형변환 parseInt() : 정수값으로 형변환 parseFloat() : 실수값으로 형변환 String() / toString() : 문자열로 형변환

데이터 타입, 형변환 예제 : dataType.html

var num1 = 15; // 정수 var num2 = 123.45; // 실수 var answer = 'Y'; // 문자 var name = "홍길동"; // 큰 따옴표 문자열 var address = '서울시 강남구'; // 작은 따옴표 문자열 var result = true; // 참 var nothing; var input = prompt("자료형 예제", "취소 버튼 누르세요") // 취소 버튼 누르면 null값 반환 // 1. 숫자 연산 // 1851.75 출력 document.write("정수 * 실수 : " + (num1 * num2)); // 2. 형변환 parseInt(num2) 실수를 정수로 변환 // 123 출력 document.write("
실수를 정수로 형변환 : " + parseInt(num2)); // 3. 숫자를 문자열로 변환 // 15123.45 출력 document.write("
숫자를 문자열로 형변환 : " + String(num1) + num2.toString()); // 4. 문자열 * 문자열 // NaN (Not a Number : 숫자가 아니다) 출력됨 document.write("
문자열 곱하기 : " + (name*address)); // 5. noting 변수를 선언만 하고 값을 저장하지 않은 경우 출력 // undefined(값의 유형을 확인할 수 없음) 출력됨 document.write("
nothing : " + nothing); // 6. prompt() 대화상자에 취소 버튼 누를 경우 // null(값이 없을 때) 출력됨 : '참조 객체 없음' document.write("
input : " + input);

from http://5bong2-develop.tistory.com/89 by ccl(A) rewrite - 2021-12-07 17:27:28