[ javaScript ] 간단정리 part 3

 

클로저

• 독립적인 변수를 가지는 함수
• 내부함수를 이용하여 별도의 스코프 정의

    function test(name){
        var str = name+'님 안녕하세요';

        return function(){
            return str;
        };
    }

    var m1  = test('hong');
    var m2  = test('kim');
		
		console.log(f1);  //f(){ return str; }
    console.log(f1());//hong님 안녕하세요
    console.log(f2());//kim님 안녕하세요

history객체

브라우저에서 이전에 방문했던 페이지 불러오는 객체

stack으로 저장됨

//a.html
<a href="b.html">b.html</a>

//b.html
<a href="c.html">c.html</a>

//c.html
<a href="#;" onclick="history.back()">이전 페이지로</a>

//history.back() 이전페이지(b.html)로 이동
//history.back() == history.go(-1) 

location 객체

현재 문서의 url 정보 저장

<a href="#;" onclick="location.href='a.html';">페이지 이동</a>
<a href="#;" onclick="location.reload()">새로고침</a>

JS에서의 객체

console.log(navigator.userAgent);

    var car = {
        model:'flying whispher',
        company:'bently',
        color:"dark blue",
        run:function(){
            console.log("차가 달린다");
        }
    };
    
    console.log(car);
    //함수실행
    car.run();
    
     //속성
    console.log(car.model);
    console.log(car['company']);
    
    
//model,company,color, run 모두 다 속성이다.
//run은 익명함수가 들어간 속성이지, 메서드가 아니다.

    //객체를 이렇게 생성해도 된다.
    //new 라는 생성자 덕에 가능한 짓
    function Student(){

    }
    var s = new Student();
    s.name = 'hanju';
    s.age = '26';
    s.run = function(){
        console.log('출근중');
    };
    console.log(s);
  

지역변수 vs 속성

    function Square(w,h){
        var width = w;
        var height = h;
        var result = 0;

        var calc = function(){
            result = width * height;
        }
    }
    var square = new Square(5,10);
    console.log(square); //Square {}
    console.log(square.width); //undefined -> width는 속성이 아니라 지역변수이기 떄문.
    
    //---------------------------
     function Square2(w,h){
        this.width= w;
        this.height = h;
        this.result = 0;

        this.calc = function(){
            result = width * height;
        }
    }
    var square2 = new Square2(5,10);
    console.log(square2); //{width: 5, height: 10, result: 0, calc: ƒ}
    console.log(square2.width);//5
    //this를 사용해서 속성을 만들어줬기때문에 접근가능

클래스 선언

    //클래스
    class Triangle {
        //생성자
        constructor(b, h) {
            this.base = b;
            this.height = h;
        };
        //메서드
        calc() {
            this.result = this.base * this.height / 2;
            return this.result;
        };
    };

    var tri = new Triangle(5, 10);
    console.log(tri.calc()); //25

템플릿 문자열

    //template 문자열
    var name = '전한주';
    var msg = '안녕';
    console.log (name+"님 "+msg);

    var test2 = `${name}님 ${msg}`;
    console.log(test2);

전개연산자

배열의 원소들을 하나하나 넘길때 사용

    //전개연산자 ...
    var arr=[1,2];
    var arr2 = arr;
    console.log(arr==arr2); //true
    
    var arr3 = [...arr];
    console.log(...arr); //1 2
    console.log(arr===arr3);//false

    //배열합침
    var arr4 = [...arr,...arr2,...arr3];
    console.log(arr4);//[1,2,1,2,1,2]
    
    //객체
    var obj1 = {a:1,b:2};
    var obj2 = {c:3,d:4};
    var obj3 = {...obj1,...obj2};
    console.log(obj3);//{a:1,b:2.c:3.d:4}

객체생성

    //새 객체 생성
    var obj4 = {...obj3,c:5};
    console.log(obj4);

    var propName = "name";
    obj4[propName] = "홍길동"; //변수추가
    console.log(obj4);
    
    var student = {
        stdno :1,
        propName :"김길동" //변수가 아니라 속성명 자체
    };
    console.log(student);

    var student2 = {
        stdno :2,
        [propName] :"최길동" //속성명을 변수의 값으로 저장
    };
    console.log(student2);

    var studno = 3;
    var name = '박길동';
    var age = 10;
    var func =()=>{
        console.log('함수');
    };
    var student3 = {studno,name,age,func};
    console.log(student3);

import는 아니지만 import

//test1.js
function func1(){
    console.log('func1 호출');
}

function func3(){
    console.log('test1의 func3()');
}

//test2.js
function func2(){
    console.log('func2 호출');
}

function func3(){
    console.log('test2의 func3()');
}

<script src = "test1.js"></script> <!--test1.js의 전체 내용을 불러옴-->
<script src = "test2.js"></script> <!--test2.js의 전체 내용을 불러옴-->
<script>
    func1();
    func2();
    func3();
</script>
 //func3는 test1,test2모두에 있다.
 //test2를 더 늦게 호출했으니 test2의func3가 실행됨

import

function func1(){
    console.log('func1 호출');
}

function func2(){
    console.log('func2 호출');
}

function func3(){
    console.log('test1의 func3()');
}

export{func1,func2};

function func4(){
    console.log('func2 호출');
}

function func5(){
    console.log('test2의 func3()');
}

export default func4;
//default는 하나만 export할 수 있다. default문도 하나만 가능

<script type="module">
    import{func1,func2} from './test1.js'
    func1();
    func2();

    import xxx from './test2.js';
    xxx();
</script>
//test2에 있는 default를 xxx로 저장 후 ㅇㅇ

or

export default ()=>{
    console.log('화살표 함수');
}
//default를 export할때 화살표함수나 익명함수를 사용할 수 있다.
//왜냐면 차피 이름으로 받아오는게 아니기 때문에.

 

 

쓰레드같은놈들

        //setTimeout() : 특정시간 후에 실행
        //setInterval() : 특정시간 마다 실행
        console.log('시작');
        setInterval(function(){ //or setTimeout
            console.log('setTimeout');
        },1000);
        console.log('끝');

기본 이벤트 제거

        window.onload=function(){
            document.querySelector("#naver").onclick=function(e){
                console.log(e);
                alert("이동");
                //기본 이벤트 제거 -> 네이버로 이동 안함
                e.preventDefault();
            }
        }
    네이버

이벤트 전파 중지

            document.querySelector("#box").onclick =  e=>{
                alert('box');
                e.stopPropagation(); //이벤트 전파 중지
            }
            //alert('box')후에 뒤으 #box와 관련된 이벤트 발생 x