coderbear's log

# Hoisting(호이스팅) : 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것

[javascript] 호이스팅 (hoisting) 이란?

호스팅(hosting)은 많이 들어봤는데 호이스팅(hoisting) 은 생소한 단어였다. 호이스팅의 개념은 javascript 변수 범위를 설명하면서 자주 언급되었는데 오늘 해당 용어의 의미와 어떤 개념인지 확인해

ojava.tistory.com

- 일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점

일반 함수 정의는 함수 호출 시 호이스팅(hoisting) 기술을 지원합니다.

그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않습니다.

호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출합니다.

ex)

- 일반 함수 정의 방식(정상 작동)

testFnc();
function testFnc(){
           자바스크립트 코드;
}

- 익명 함수 선언 참조 방식(오류 발생)

testFnc();
var testFnc = function(){
           자바스크립트 코드;
}

- 자바스크립트 메모리 관리

자바스크립트는 어떻게 작동하는가: 메모리 관리 + 4가지 흔한 메모리 누수 대처법

How JavaScript works: memory management + how to handle 4 common memory leaks

engineering.huiseoul.com

+ https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

- 표준 내장 객체

표준 내장 객체

이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.

developer.mozilla.org

[실습문제]

var num = [10, 5, 200, 45, 70, 20, 15, 7];

Q1. 위의 배열을 오름 차순 정렬

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var num;

        function sort() {
            num = [10, 5, 200, 45, 70, 20, 15, 7];
            
            var result = num.sort(function(a, b){
	           return a - b ;
            }) ;
            document.getElementById("sort").innerHTML = num;
        }
    </script>
</head>

<body onload="sort()">
    <div id="sort">
    </div>
</body>

</html>

Q2. 위의 배열을 내림 차순 정렬

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var num;

        function sort() {
            num = [10, 5, 200, 45, 70, 20, 15, 7];
            
            var result = num.sort(function(a, b){
	           return b - a ;
            }) ;
            document.getElementById("sort").innerHTML = num;
        }
    </script>
</head>

<body onload="sort()">
    <div id="sort">
    </div>
</body>

</html>

Q3. 위의 배열을 무작위로 섞으시오.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var num = [10, 5, 200, 45, 70, 20, 15, 7];
        num.sort(function() {
            return Math.random() - Math.random();
        })
        document.getElementsById('rand').innerHTML = num;
        }());
    </script>
</head>

<body id='rand'>

</body>

</html>

// Tip : sort()

Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

developer.mozilla.org

Q4. 버튼 게임

- HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Button Game</title>
		<meta charset="UTF-8">
    </head>
    <body>
        <div id="game"></div>      
        <script src="ButtonGame.js"></script>
    </body>
</html>

- JavaScript

var text = "";
var num = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var answer = [1, 2, 3, 4, 5, 6, 7, 8, 0];
const LEFT = -1, UP = -3, RIGHT = 1, DOWN = 3;

function shuffle()
{
    num.sort(function(a,b){return 0.5 - Math.random()});
}

function display()
{

    text ="";
    var idx = 0;
    for(var i=0;i<3;i++)
    {
        for(var j=0;j<3;j++)
        {
            // text += "<button onclick='move(" + idx + ", " + num[idx] + ")'>" + num[idx] + "</button>";
            text += `<button onclick='move(${idx}, ${num[idx]})'>${num[idx]}</button>`;
            idx++;
        }
        text += "<br>"
    }
    document.getElementById("game").innerHTML = text;  
}
function move(idx, btnNum)
{
    var pointOfTheCompass = whereIsZero(idx, btnNum);
    if( pointOfTheCompass != -100)
    {
        if( pointOfTheCompass == LEFT )
        {
            num[idx+LEFT] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == UP )
        {
            num[idx+UP] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == RIGHT )
        {
            num[idx+RIGHT] = btnNum;
            num[idx] = 0;       
        }
        else if( pointOfTheCompass == DOWN)
        {
            num[idx+DOWN] = btnNum;
            num[idx] = 0;       
        }

        display();        
        if( result() ) alert("정답입니다.");
    }
}
function whereIsZero(idx, btnNum)
{
    if( idx%3 != 0 )
    {
        if( num[idx+LEFT]== 0 ) 
            return LEFT;
    }
    if( (idx+UP)>=0 )
    {
        if( num[idx+UP]==0 )
            return UP;
    }
    if( idx%3 != 2 )
    {
        if( num[idx+RIGHT]==0 )
            return RIGHT;
    }       
    if( (idx+DOWN) < num.length )
    {
       if( num[idx+DOWN]==0 )
            return DOWN;
    }
    return -100;   
}
function init()
{
    shuffle();
    display();
}
function result()
{
    for(var i=0;i<num.length;i++)
    {
        if(num[i] != answer[i])
            return false;
    }
    return true;
}

window.onload = init;

Q5. 사용자로부터 전화번호를 입력받은 후 사용자의 뒷 전화번호 4자리를 *로 바꾸어서 출력하시오.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var phoneNumber = prompt("전화번호를 입력해주세요.");
        var changeNumber = phoneNumber.substr(0,phoneNumber.length-4) + "****";
        document.write(changeNumber);
    </script>
</body>

</html>

Q6. 배열 객체와 수학 객체를 이용해 다음 코드를 완성해 보세요.

점심시간에 "짜장면", "돈까스", "된장국", "김치찌개", "회덮밥" 중

어떤 메뉴로 선택할지 고민이 된다면 랜덤으로 선택되도록 만들어 보자.

- 배열 객체를 이용하여 메뉴의 5개 데이터를 변수 menu에 참조하시오.

- Math.random()과 배열 데이터 개수(length)를 이용하여 배열 인덱스 값이 랜덤으로 나오도록 하자.

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script>
        var menu = ["짜장면", "돈까스", "된장국", "김치찌개", "회덮밥"];
        var menuNum = Math.floor(Math.random() * menu.length);
        var result = menu[menuNum];
        document.write(result);
    </script>
</head>

<body>
</body>

</html>

Q7. 다음 문제를 참고하여 코드를 완성해 보자.
버튼을 클릭할 때마다 함수가 실행되어 5개의 색상이 차례로 바뀌게 하자.

["#ff0", "#6c0", "#fcf", "#cf0", "#39f"];

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
	function changeColor( ){
		var colorList = ["#ff0", "#6c0", "#fcf", "#cf0", "#39f"];
		var arrNum = Math.floor(Math.random() * colorList.length);
		var bodyTag = document.getElementById("body");
		bodyTag.style.backgroundColor = colorList[arrNum];
	}
</script>
</head>
<body id="body">
    <button onclick="changeColor();">전체 배경 색 바꾸기</button>
</body>
</html>

Q8. 다음 문제를 참고하여 코드를 완성해 보자.
다음은 TestScore 객체 생성자에 대한 설명이다.
- 객체 생성자 함수를 만들어 두 학생(kim, oh)의 객체를 생성하고

속성으로 이름, 국어 점수, 영어 점수를 등록하자.
- 그리고 나서 getTestInfo(), getAvg() 함수도 등록하자.

이때 다음 조건에 맞게 빈 칸을 채워 보자.
(1) 객체를 생성하면 prototype으로 함수를 등록하자.
(2) getTestInfo() 함수를 실행하면 이름, 국어, 영어 정보를 출력하도록 작성해 보자.
(3) getAvg() 함수를 실행하면 평균 점수를 출력하도록 작성해 보자.

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <script>
        function testScore(name, korScore, engScore) {
            this.name = name;
            this.korScore = korScore;
            this.engScore = engScore;
        }
        testScore.prototype.getTestInfo = function() {
            document.write("이름: " + this.name, "<br>");
            document.write("국어: " + this.korScore, "<br>");
            document.write("영어: " + this.engScore, "<br>");
        }
        testScore.prototype.getAvg = function() {
            return (this.korScore + this.engScore) / 2;
        }
        var kimgun = new testScore("김", 70, 90);
        var ohgun = new testScore("오", 50, 80);

        kimgun.getTestInfo();
        document.write("평균 점수:" + kim.getAvg(), "<br><br>");

        ohgun.getTestInfo();
        document.write("평균 점수:" + oh.getAvg(), "<br>");
    </script>
</head>

<body>
</body>

</html>

Q9. 이미지 갤러리를 만들어 보시오.

- 조건 : 이미지 파일 명은 pic_1 ~ 9까지 숫자 순서가 있다.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
	var num = 1;
	function gallery(idx) {
		if(idx) {
			if(num == 8) return;
			num++;
		} else {
			if(num == 1) return;
			num--;
		}

		var imgContent = document.getElementById("photo");
		imgContent.setAttribute("src","images/pic_" + num + ".jpg");
	}
</script>
</head>
<body>
	<div id="galleryZone">
		<p><img src="images/pic_1.jpg" id="photo" alt=""></p>
		<p>
			<button onclick="gallery(0)">before</button>
			<button onclick="gallery(1)">next</button>
		</p>
	</div>
</body>
</html>

728x90

저작자표시

'Web > javascript' 카테고리의 다른 글

[필기정리]Day53 - class, array, Fields 등 (0)	2020.09.07
[필기정리]Day52 - let, const, symbol 등 (0)	2020.09.04
[필기정리]Day51-1 - 자바스크립트의 역사, use strict 등 (0)	2020.09.03
[필기정리] Day50-2 - 자바스크립트 예시 및 문제 (0)	2020.09.03
[필기정리] Day50-1 - array sort, 유효성체크 (0)	2020.08.31

coderbear

[필기정리]Day51-2 - Hoisting, 자바스크립트 실습문제 등

'Web > javascript' 카테고리의 다른 글

티스토리툴바