[JavaScript] JavaScript 정리 - 2 (Java와 차이, 기본 특징)

👉 동적 타이핑 언어 JavaScript

     자료형을 명시하지 않는다.

     HTML 문서 내에 존재하고, 웹 브라우저에서 실행되는 프로그램이다.

     HTML 문서에 대한 조작과 유효성 검사를 위해 사용한다.

 

👉 JavaScript 와 Java의 차이

JavaScript	Java
클라이언트 스크립트	서버 스크립트
브라우저에서 실행	JVM에서 실행
html	jsp
동적 타이핑 언어	정적 타이핑 언어
; 생략 가능	; 생략 불가
문자열을 표현 시 ", '를 구분없이 사용	문자열을 표현시 "만 사용함
char가 없음	char가 있음
문자열 비교 시 == 사용	문자열 비교 시 .equals 사용
값 비교 시 === 사용	값 비교 시 == 사용

 

👉 파일에 따라 사용하는 웹 요소들

.html(CSS, JS)
.jsp (HTML+Java) 

      jsp파일에 java 코드를 먼저 실행하고, 브라우저에 전달된 후에 메모리 로딩을 거친 후에 script 코드를 사용한다.

      JS는 html 파일 내부의 어디서나 사용할 수 있다.

      but... 한줄씩 읽어들이는 인터프리터 언어 특성 상

      태그의 선언부보다 앞에 함수를 선언하면서 getElement 등을 사용하게 되면 실행되지 않는 문제가 있을 수 있다.

 

👉 호이스팅

     영역 끌어올림(업캐스팅)

     모든 선언들을 해당 스코프의 최상단에 선언하는 것

     영역 내의 맨 위로 끌어 올리는 것

     일단 선언하는 부분이 있긴해야한다. 단지 아래에 선언되어도 윗 부분에서 사용은 할 수 있으며,

     대신 값이 초기화가 되지 않은 undefined라고 되는 것이다.

     그리고 새 영역에서 또 호이스팅이 되는 경우에는 기존 영역에서 사용되던 변수더라도 undefined된다.

 

 

👉 let과 const

     let과 const는 동일하게 영역 내 변수로만 선언할 수 있다.

     const의 경우 값을 변경할 수 없다는 상수의 특징이 있다.

 

👉 백틱

    멀티 라인을 지원해 줌

    공백까지도 하나의 문자열로 인식

    ("로 줄바꿈을 진행했을 때는 한 문장이 끝나는 것으로 인식, 자동으로 ; 가 추가됨)

 

👉 구분자, 종결자 역할

1.  다음 문장으로 띄우기
2.  ; 를 사용하기(이 경우에는 다음 문장으로 이동하지 않아도 다음 문장으로 인식)

👉 주석에 <!-- -->를 사용하는 이유

     원래 자바 스크립트의 주석은 자바와 같지만, 저렇게 주석을 쓰는 경우를 발견했다면,

     그것은 구식 브라우저가 자바 스크립트의 주석 처리를 인식하지 못할 경우에

     브라우저에 뿌려지는 것을 방지하기 위해서 만드는 것이다.

 

👉 조건문과 반복문

     대부분의 경우는 자바와 동일함

     if 문 내부에 boolean, 숫자, 객체가 들어갈 수 있다.

     존재하는 객체인지 아닌지 등을 판별하기 위한 방식으로도 사용한다. (null, undefined면 false)

 

👉 빈 문자열 체크

     자바스크립트에서는 length를 사용하여 빈 문자열인지 확인한다.

1. str.length == 0
2. str==''

💖 함수(메소드 정의)

   

자바 case)

void hello(String name, int age){}
int hello(String name, int age){return 100;}

//오버로딩
void hello(String name, int age){}
void hello(String name, int age){return 100;}

자바스크립트 case)

/*case 1*/
hello(); //호출
function hello(){
}
// ==> 에러가 발생하지 않는다

/*case 2*/
hello(); //호출
function hello(i){
}
// ==> 에러가 발생하지 않는다(i은 undefined)

/*case 3*/
function hello(){
	alert("안녕");
}
function hello(name){
//같은 이름의 함수가 정의되는 경우, 오버로딩이 되는 것이 아니라, 아래쪽에 있는 함수로 overwrite
	alert("안녕안녕" + name);	
}
hello();	// 안녕안녕undefined
hello("나길동");	// 안녕안녕나길동