[JavaScript] JavaScript 정리 - 4 (기존 내용 복습)

👉 자바스크립트란?

     자료형을 명시하지 않는 동적 타이밍 언어

 

👉 자바스크립트를 어디서 사용하는가?

     html에 포함되어져서 브라우저에 로딩, 메모리 할당한 다음에 실행해준다.

 

👉 정적 페이지 -> 동적 페이지

     html -> JavaScript

• 입력 데이터를 얻어오고 문서 조작, 유효성 검사를 위해서 사용한다.

👉 JavaScript와 Java의 비교

     JavaScript는 브라우저에서 실행, Jsp(Java)는 JVM에서 실행

 

👉 JavaScript의 위치

     HTML문서 내에 포함되어서 실행.

     스크립트 태그로 구분되어서 사용되어진다.

     스크립트 태그의 위치는 어디라도 상관이 없다. (일반적으로는 head와 body 내부에 넣어준다.)

     만약 외부에서 JS 파일을 가져오고 싶으면 src를 통해서 가져온다.

     JS의 길이가 길어질 수록, 브라우저의 속도를 위해서

     JS파일은 되도록 body쪽에 넣어주어야 빠르게 동작하도록 하여 좋을 수 있다.

 

👉 JavaScript의 변수 선언

String name = "홍길동" (X)

       name = "홍길동" (O) --> 전역변수 (다른 js 파일에서 접근 가능)
   var name = "홍길동" (O) --> 지역변수 (다른 js파일에서 접근 불가능, 선언된 스코프 내에서만 사용 가능)
   
   💖 다른 파일에서 접근하는 경우, 다른 파일의 스크립트가 로딩되기 전에 해당 변수가 사용되어야 한다.
   
   var su;  선언을 여러 번 할 수 있음(overwrite)
   let su;  선언을 두 번 이상 할 수 없음

 

👉 원시형 데이터 타입의 종류

number , String , boolean , null , undefined

👉 호이스팅

     선언 시 영역의 최상단으로 올라가는 것. (영역 내 끌어 올림)

     let과 const도 적용되나, TDZ(temporal deadline zone)가 적용되어 초기화 하지 않은 변수에 대해 접근 시

     ReferenceError를 발생.

     같은 영역에서 let, const 변수를 동일 변수명으로 사용할 수 없다.

     또한 var과는 달리 단순한 {} 중괄호도 영역으로 인식하여

     선언한 영역을 벗어나는 경우에는 호출하여 사용할 수 없다.

     let과 const는 거의 동일하나, let은 변수 const는 상수

// 1번 case (정상 동작: 출력 10)
var su = 10;
document.write(su);

// 2번 case (에러 발생 : su is not defined)
document.write(su);

// 3번 case (정상 동작: 출력은 undefined)
document.write(su);
var su = 10;	// 호이스팅 발생(변수 선언이 영역의 맨 위로 올라감)

/*
호이스팅이 되면 다음 동작 과정과 같다.
var su;
document.write(su);
su = 10;
*/


// 4번 case (에러 발생: 호이스팅이 되었으나, 초기화하지 않은 변수에 대해서는 Reference에러 발생)
document.write(su);
let su = 10;

/*
다음 동작 과정과 같다.
let su;
document.write(su);  let 변수가 초기화되지 않았는데 접근하여 에러 발생!
su = 10;
*/

	var와 let의 차이
function{ }의 영역이 아닌 영역 괄호{ }만 있다면 그 밖의 영역을 자기 영역으로 호이스팅	function{ }의 영역 뿐만 아니라 단순 영역 괄호{ }도 자기 영역으로해서 호이스팅

 var과 let의 차이

 

 

👉 브라우저에 html 출력하기

document.write("<p></p>");
document.write("브라우저에 출력할 html");

 

👉 백틱 ( ` ` )

1. 멀티라인 지원
2. ${expression}을 사용하여 '+' 기호를 줄일 수 있다

var name = `김예진`;
console.log("이름은 " + name + "입니다");
console.log(`이름은 ${name} 입니다`);	//백틱을 쓰면 이렇게 표현이 가능해진다.

 

👉 자바스크립트의 특징

     자바스크립트는 구분자, 종결자 역할을 하는 ' ; ' 를 생략가능

     구분자가 없는 경우, 한 줄을 문장이라고 인식한다.

    (있는 경우에는 한 줄 내에도 문장이 여러개인지 검사한다)

 

 

👉 엄격한 등가 연산자 사용

==, !=	===, !==
값이 일치하는 지 확인	값이 일치하는 지 확인
타입은 일치 안해도 됨	타입도 일치하는 지 확인

 

👉 조건문 if

1. boolean    true,                               false
2. 숫자         0이 아닌 경우,                  0인 경우
3. 객체         객체가 존재하는 경우,        객체가 존재하지 않는 경우

 

👉 빈 문자열 체크

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

 

👉 함수

👇 정상 작동하는 예시

<script>
	function hello(){
    	alert('안녕~~!!');
    }
</script>

...


<script type="text/javascript">
	hello();
</script>

👇 주의해야 하는 예시

<script>
	function hello(){
    	alert('안녕~~!!');
    }
    function hello(var name){
    	alert('안녕~~!! ' + name);
    }
</script>

...

<script type="text/javascript">
	hello();	//안녕~!!! undefined 출력
</script>

👇 주의해야 하는 예시2

<script>
	function hello(){
    	alert('안녕~~!!');
    }
    function hello(name){
    	alert('안녕~~!! ' + name);
    }
</script>

...

<script type="text/javascript">
	hello();	//안녕~!!! undefined 출력
    hello('김예진');	//안녕~!!! 김예진 출력
</script>

 

👉 주의해야 하는 상황

     ◾ src 속성을 사용하는 경우, 외부 자바스크립트 참조 전용이다.

        내부에 아무리 좋은 기능을 넣어도 인식되지 않으므로,

        src를 넣지 않은 script 내부에서만 코드를 작성하도록 한다.

     ◾ 만약 함수명이 여러 참조 파일을 통해 중복되는 경우(내부 스크립트도 포함해서)

        가장 마지막으로 초기화된 함수로 호출된다.

 

👉 변수에 함수 넣기

// 방법 1
var s = function(){
	alert('안녕');
};

// 방법 2
var s2 = new Function(인자, 인자, ... , "동작코드");	// 비권장
var s3 = new Function("alert('안녕~~');");	          // 비권장


// 호출 방법
<button onclick="s()">버튼</button>

// 방법 3
var s4 = function(add){
	add(100, 300);
    alert(add);
}

<script>
s4(function(a, b){ return a + b; });	// 일급 객체(함수도 일급 객체)는 인자로 전달하는 것이 가능
</script>