MSA Full-Stack 개발자 양성 과정 -41일차 노트 필기_JavaScript_220921

let 변수

: 동일한 이름 선언 불가하다.

: 선언전에 사용 불가

: 변수의 scope이 블럭 레벨 scope({})이다.

 

**함수 레벨 스코프(Function-level scope)

: 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

: 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

**블록 레벨 스코프(Block-level scope)

: 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

 

: let 키워드로 선언된 변수를 전역 변수로 사용하는 경우, let 전역 변수는 전역 객체의 프로퍼티(속성)가 아니다.

: window.으로 같이 접근할 수 없다. let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 된다.

 

**JavaScript에서 모든 객체의 최상위 객체

: 전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window 객체

 

 

** var 키워드로 선언된 변수의 특징

: 함수 레벨 스코프(Function-level scope)

: 전역 변수의 남발

: for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있음

: var 키워드 생략 허용 → 의도치 않은 변수의 전역화

: 중복 선언 허용 → 의도치 않은 변수값 변경

: 함수 안에서 선언된 변수(var)의 scope은 블록당({ })이 아니라 함수 레벨 scope를 갖는다. (↔ Java)

: var 키워드로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 된다.

 

const 상수

: 상수이다.

: 고정값이므로, 값 변경 불가

: 반드시 선언 시 초기화가 필요하다.

: 보통 대문자로 변수 선언 (≒java)

 

 

---

연산자 

1. 산술연산자

속성	내 용
+	더하기 연산을 함
-	빼기 연산을 함
*	곱하기 연산을 함
/	나누기 연산을 함
%	나머지 연산을 함

 

예제 1)

let a = 10, b = "3";
	document.write(`<hr color = "red">`);
	document.write(`a + b = ${a+b}<br>`); // 문자열로 취급, +는 연결연산자로 사용
	document.write(`a - b = ${a-b}<br>`);
	document.write(`a * b = ${a*b}<br>`);
	document.write(`a / b = ${a/b}<br>`);
	document.write(`a % b = ${a%b}<br>`);
    // 서로 타입이 달라도 연산 가능하면, 자동으로 convert 및 연산
    
    
	/*
		출력값:
		a + b = 103
		a + parseInt(b) = 13
		a - b = 7
		a * b = 30
		a / b = 3.3333333333333335
		a % b = 1
	*/

 

2. 비교연산자

속성	내 용
==	A와 B가 같음
!=	A와 B가 같지 않음
<	A가 B보다 작음
<=	A가 B보다 작거나 같음
>	A가 B보다 큼
>=	A가 B보다 크거나 같음

 

**==와 ===의 차이

document.write(`i==j의 결과  :  ${i==j}<br>`); // 값 비교
document.write(`i===j의 결과  :  ${i===j}<br>`); // 값과 type을 모두 비교
  /*
    값 출력
    i==j의 결과 : true
    i===j의 결과 : false
  */

 

 

 3. 대입연산자

속 성	내 용
=	왼쪽 변수에 오른쪽 값을 할당함
+=	더하기 연산 후에 할당
-=	빼기 연산 후에 할당
*=	곱하기 연산 후에 할당
/=	나누기 연산 후에 할당
%=	나머지 연산 후에 할당

 

let a = 10, b = "3";

document.write(`<hr color = "red">`);
document.write(`a += b = ${a+=b}<br>`); //string 타입(103)
document.write(`a -= b = ${a-=b}<br>`); //103-3 = 100
document.write(`a *= b = ${a*=b}<br>`); //100*3 = 300
/*
    출력값:
    a += b = 103
    a -= b = 100
    a *= b = 300
*/

 

---

 

**템플릿 문자열 문법 - ES6 추가 홑따옴표 = ``  (≒ java의 prinf 메소드)

document.write(`i=${i}, type = ${typeof i}<br>`);
/*
 출력값: i=10, type = number
*/

: 변수를 ${ }안에 넣는다.

 

 

**형변환

1) (window.)parseInt()

    : 메소드

    : 변환하려는 문자열 안에 앞에 숫자와 문자열이 함께 있으면 숫자가 있는 곳까지 숫자로 변환

    : 동적으로 css의 가로와 높이 크기 구해와서 연산 시 많이 사용  (ex) 이미지 크기 등

2) Number()

    : 객체

let data1 = "a100";
let data2 = "100a";

document.write("<hr>형변환 TEST ----- <p>")
document.write(`data1=${data1} , type = ${typeof data1}<br>`);
document.write(`parseInt(data1)= ${parseInt(data1)}, type = ${typeof parseInt(data1)}<br>`);
document.write(`Number(data1)= ${Number(data1)}, type = ${typeof Number(data1)}<br>`);
/*
    출력값:
    data1=a100 , type = string
    parseInt(data1)= NaN, type = number
    Number(data1)= NaN, type = number
    **Nan = Not a number
*/

document.write(`data2=${data2} , type = ${typeof data2}<br>`);
document.write(`parseInt(data2)= ${parseInt(data2)}, type = ${typeof parseInt(data2)}<br>`);
document.write(`Number(data2)= ${Number(data2)}, type = ${typeof Number(data2)}<br>`);
/*
    출력값:
    data2=100a , type = string
    parseInt(data2)= 100, type = number
    Number(data2)= NaN, type = number

*/

 

 

3) parseFloat()

let avg = "50.5";
let c = 5;
document.write(`<hr color = "red">`);
document.write(`avg =${avg} , type = ${typeof avg}<br>`);
document.write(`parseFloat(avg) =${parseFloat(avg)} , type = ${typeof parseFloat(avg)}<br>`);

document.write(`avg+c =${avg+c}<br>`);
document.write(`parseInt(avg)+c =${parseInt(avg)+c}<br>`);
document.write(`parseFloat(avg)+c =${parseFloat(avg)+c}<br>`);	

/*
    출력값 :
    avg =50.5 , type = string
    parseFloat(avg) =50.5 , type = number
    avg+c =50.55
    parseInt(avg)+c =55 - 정수형
    parseFloat(avg)+c =55.5 - 실수형
*/

---

Function 함수

내부함수(내장함수)

 

 

외부 함수 

: 사용자가 자신이 원하는 함수를 만들어서 사용하는 것

: 키워드로 function이라는 것을 사용함

: 사용자 정의 함수라고도 함 

 

**익명함수

//익명 함수
let test2 = function(i){
    alert("익명함수 i = "+i);

    return "화이팅";
}

//익명함수 호출
let result = test2(1); // test2라는 변수에 function 담김, test2 변수 타입이 곧 함수(function)이다.

document.write(`<h3>result = ${result}</h3>`);

/*
	출력값:
    result = 화이팅
*/

 

---

 

자바스크립트 객체(Object)

 

: 객체의 구성 = 속성 + 행동(Method)

: 속성(Property) = 다른 것과 어떤 객체를 구분하고, 그 객체의 다른 성질, 상태, 모습 등을 결정하는 개별적인 것

: 메소드(Method) = 개체의 동작을 지정하는 함수

 

 

내장객체