[2023-02-28]hoisting,encodeURI,객체,생성자

<복습>

DOM객체 : document object model , 내가 만든 소스파일 컴파일해서 최종적으로 나온 변환된 html이며, 이를 DOM객체라고 한다. html이 DOM 객체이기 때문에 요소들을 추가하고 꾸밀 수 있는 것이다.

매개변수(parameter):함수 내부에서 실행될 수 있도록 값을 전달받는 변수

인수(argument):실제 함수 실행시 받을 변수의 값 

---

1.함수 or 변수 hoistig : 함수 안에서 변수가 선언되기 전에 미리 사용하려는 것을 의미 

 

var num = 10; // 전역변수 ( window 객체에 설정되는 객체 )
function globalNum() //전역함수(script문서 내에서 사용됨)
{
    document.write(num); //undefined
    var num = 20;
    document.write(num); // 20 
}
globalNum();
document.write(num);//10

답은 각각 undefined , 20 , 10 이 나온다 

 

왜 두번째 함수안에 선언된 var num = 20 로컬변수가 들어가지 않고, undefined로 나왔을까?

함수 안에 있는 변수는 우선 함수 내부에 선언된 로컬변수의 값을 찾아간다.

하지만 위의 경우, 로컬변수 var num =20;이 선언되기 전에 num을 출력하라고 했기 때문에 값이 없는 undefined가 나온 것이다.

함수 내부에 선언된 로컬변수 var num = 20;은 함수 밖에서 쓰지 않기 떄문에 전역변수 var num = 10이 마지막으로 출력된 것이다.

 

undefined를 피하는 방법 

 

방법 1 ) 이름을 바꾼다 

var num = 10;
function globalNum()
{
    document.write(num);
    var num1 = 20;
    document.write(num1);
}
globalNum();
document.write(num);

10 20 10 

이름을 바꾸면 , 첫번째 라인의 num은 전역변수를 찾아가 10을 프린트 한다. 

방법 2) window객체를 이용한다 

 var num = 10; 
    function globalNum()
    {
        document.write(window.num);
        var num = 20;
        document.write(num);
    }
    globalNum();
    document.write(num);

보통 변수 이름 같게 해도,  window 객체를 이용해서 로컬변수가 아니라 함수 밖에 있는 윈도우 객체를 사용하여 변수값을 쓸 수 있다. 

window 객체란??

The window object represents a window in browser. An object of window is created automatically by the browser. Window is the object of browser, it is not the object of javascript. The javascript objects are string, array, date etc.

브라우저가 로딩될때 자동으로 생성되는 객체이다.

alert() 도 사실 window.alert() 이런식으로 윈도우 객체에 소속되어있는 함수이다. 

 

 

2.웹브라우저에 내장된 전역함수

eval()

var a = "10 + 20" ;  
var b = eval(a);

document.write(b);//30

숫자로 된 문자열을 계산해준다.

 

isFinite()

document.write(isFinite(123) + "<br>");     //true
document.write(isFinite(123e100) + "<br>"); //true
document.write(isFinite(0) + "<br>");       //true
document.write(isFinite(true) + "<br>");    //true
document.write(isFinite(false) + "<br>");   //true
document.write(isFinite(null) + "<br>");    //true //조심
document.write(isFinite("123") + "<br>");   //true //숫자로만 된 문자열을 숫자로 변환 후, 처리됨
document.write(isFinite("") + "<br>");      //true //조심: 값이 없으면 검증 못함
document.write(isFinite("홍길동") + "<br>"); //false
document.write(isFinite(undefined) + "<br>"); //false 
document.write(isFinite(NaN) + "<br>");       //false
document.write(isFinite(Infinity) + "<br>");  //false

인수값이 "유한한 숫자값"이면 true를 반환함

 

 

isNaN()

document.write(isNaN(123) + "<br>");     //false
document.write(isNaN(123e100) + "<br>"); //false
document.write(isNaN(0) + "<br>");       //false
document.write(isNaN(true) + "<br>");    //false
document.write(isNaN(false) + "<br>");   //false
document.write(isNaN(null) + "<br>");    //false
document.write(isNaN("123") + "<br>");   //false
document.write(isNaN("") + "<br>");      //false
document.write(isNaN("홍길동") + "<br>"); //true 
document.write(isNaN(undefined) + "<br>"); //true  //조심 
document.write(isNaN(NaN) + "<br>");       //true 
document.write(isNaN(Infinity) + "<br>");  //false

전달된 값이 NaN(숫자X)면 true를 반환 ,  

숫자의 강제 변환에 의해 예상치 못한 결과값이 나올 수 있어서 보통 Number.isNaN(인자값)을 사용한다

 

document.write(Number("123") + "<br>");  //123
document.write(Number("123.000") + "<br>"); //123
document.write(Number("123.756") + "<br>"); //123.756
document.write(Number(true) + "<br>"); //1
document.write(Number(false) + "<br>"); //0
document.write(Number(new Date()) + "<br>"); //1677566571349
document.write(Number("12.34 34 56") + "<br>"); //NaN
document.write(Number("12.57, 34 56") + "<br>");//NaN
document.write(Number("  123  ") + "<br>");  //123
document.write(Number("123 초콜릿") + "<br>"); //NaN
document.write(Number("초콜릿 123") + "<br><br>");//NaN

 

parseInt("숫자로만 된 문자열") : 정수로 반환

parseFloat("숫자로만 된 문자열") : 실수로 반환

document.write((parseFloat("123") + 1) + "<br>");     //123***
document.write((parseFloat("123.000") + 1) + "<br>"); //123***
document.write((parseFloat("123.456") + 1) + "<br>"); //123.456***
document.write(parseFloat("12 34 56") + "<br>");//12
document.write(parseFloat("  123  ") + "<br>"); //123
document.write(parseFloat("123 초콜릿") + "<br>"); //123
document.write(parseFloat("123초콜릿") + "<br>"); //123
document.write(parseFloat("초콜릿 123") +"<br>"); //NaN
document.write(parseFloat(true) + "<br>"); //NaN
document.write(parseFloat(false) + "<br>"); //NaN
document.write(parseInt("123") + "<br>");//123
document.write(parseInt("123.000") + "<br>");//123
document.write(parseInt("123.756") + "<br>");//123
document.write(parseInt("12.34 34 56") + "<br>");//12
document.write(parseInt("12.57, 34 56") + "<br>");//12
document.write(parseInt("  123  ") + "<br>");//123
document.write(parseInt("123 초콜릿") + "<br>");//123
document.write(parseInt("초콜릿 123") + "<br><br>");//NaN
document.write(parseInt(true) + "<br>");  //NaN
document.write(parseInt(false) + "<br>"); //NaN

123 초콜릿은 앞에 숫자열이 있어서 실행되는거고 초콜릿123은 처음부터 NaN이 나와서 출력이 NaN으로 나온다 

 

3. encodeURI & decodeURI & encodeURIComponent & decodeURIComponent 

 

[ 인코드가 필요한 이유 ]

컴퓨터의 언어는 텍스트가 아니라 바이트만 쓸 수 있다. 인코딩은 텍스트를 바이트로 변환하는 과정이며 컴퓨터가 읽을 수 있도록 해준다. 

128개의 문자로 이루어진 아스키코드는 각각 1바이트며, 정해진 인코딩 형식이 있으나 , 한글이나 특수문자는 아스키코드로 변환이 안되기 때문에 코드를 짤 때 인코딩을 해준다 

standard 128 character ASCII set. Reserved characters that do not belong to this set must be encoded

 

1.encodeURI : 한글과 빈칸을 %문자열로 변환 , 특정 기호들 @,:,//는 변환되지 않는다 

var id = "푸딩//@";
var encodedURI = encodeURI(id);
document.write(encodedURI); // %ED%91%B8%EB%94%A9//@

 

2.decodeURI : encodeURI된 %문자열을 다시 원래 문자열로 변환

var id ="푸딩//@"
var encodedURI = encodeURI(id); // %ED%91%B8%EB%94%A9//@
var decodedURI = decodeURI(encodedURI); // 푸딩

 

3.encodeURIComponent:거의 모든 문자를 변환함 

var id = "푸딩//@";
var encComp = encodeURIComponent(id);
document.write(encComp); // %ED%91%B8%EB%94%A9%2F%2F%40

4.decodeURIComponent:encodeURIComponent된 문자를 다시 원래 텍스트로 변환함

var id = "푸딩//@"
var encComp = encodeURIComponent(id); // %ED%91%B8%EB%94%A9%2F%2F%40
var decComp = decodeURIComponent(encComp);
document.write(decComp); // 푸딩//@@

대부분 https:// 프로토콜 부분은 남기고 싶어서 encodeURI를 쓴다. 

 

 

새로운 url를 만들때 쓰기도 한다.

var x = encodeURIComponent("푸딩프로필");
var url = http://pudding.com/?search=" + x  + "&length=34";

개인 홈페이지 url 생성 
http://pudding.com/?search=" + %ED%91%B8%EB%94%A9%ED%94%84%EB%A1%9C%ED%95%84
 + "&length=34";

 

4.객체

객체(Object)란? 메모리에서 실행 중인 실행파일을 말한다.
객체 안에는 이름(name)과 값(value)로 구성된 프로퍼티(property)가 들어있다. 프로퍼티의 값으로 동작을하는 함수를 넣을 수 있는데 이러한 것을 메소드(method)라고 한다. 

var dog = {
    name : "푸딩",
    family : "비숑",
    age : 1,
    bark : function(){
        alert("pudding pudding");
    }
}

만약 객체의 프로퍼티를 뺴오고 싶을 때는 객체이름.프로퍼티를 하면 된다.

dog.name , dog.family , dog.bark() ..

<button id="dog" onclick="display('pudding');">강아지</button>
//결과표시
<div id="display"></div>

<script>
function display(who) {
//결과값 담는 변수 
var display = document.getElementById("display");
if (who == "pudding") {
    display.innerHTML = "나의 강아지 이름은" + dog.name + '입니다";
    display.innerHTML = "나의 강아지 나이는" + dog.age+"입니다";
    }
}
</script>

 

 

생성자 : 동일한 틀의 객체를 여러개 생성하고 싶을 때 쓰는 것이다.

function Dog(name, color, age, sound) {
this.name = name ;
this.color = color ;
this.age = age ;
this.sound = sound ;
this.breed = function () {
    return this.name + "가 밥을 먹습니다." ;
	}
}

this는 자신을 생성하는 객체를 가리킨다.

생성자를 만들 때의 중요한 점

프로퍼티의 타입을 미리 정해두지 않는다 .

예를 들어서 boolean 값을 추가 하고 싶을 떄 , this.isDog = true; 이런식으로 넣지 말고 this.isDog = isDog 이렇게 넣어야한다.

예전에 boolean에 타입을 줘서 생성자가 디폴트가 내가 정한 타입으로만 나온 적이 있다.

 

https://www.geeksforgeeks.org/javascript-function-parameters/

• There is no need to specify the data type for parameters in JavaScript function definitions.
• It does not perform type-checking based on the passed-in JavaScript functions.
• It does not check the number of received arguments.

 function()도 만들 수 있으며, function은 파라메터로 따로 변수를 넣지 않는다. 

생성자 이름의 앞자리는 대문자이며, 객체에서는 정의할 때 : 로 했지만 생성자에서는 = 로 정의한다.

 

 

이런식으로 같은 틀을 가진 객체를 여러개 생성할 수 있으며... 

var pudding = new Dog("푸딩","흰색",1)
var cola = new Dog("콜라","블랙",1)

 

이렇게 불러낼 수 있다.

pudding.name; // 푸딩
pudding.breed; // 푸딩이 밥을 먹습니다.
cola.name;//콜라
colas.breed; //콜라가 밥을 먹습니다.