1. Implicit Coercion 



1.1 number와 string


1
2
3
4
5
6
7
8
9
10
11
3 * "3" //9
1 + "2" + 1 //121
 
true + true //2
10 - true //9
 
 
const foo = {
  valueOf: () => 2
}
3 + foo // 5
cs



숫자(number)+문자(string)는 string이 number로 변환된다.

숫자(number)+문자(string)+숫자(number)는 string로 변환된다.


true 는 numbre 1로 변환된다.

const 상수 number 로 변환된다.




1.2 number와 array


1
2
3
4
5
6
7
8
9
4 * [] // 0
 
4 * [2] // 8
 
4 + [2] // "42"
 
4 + [1, 2] // "41,2"
 
4 * [1, 2] // NaN
cs



number * array[0] = number

number + array[0] = string

number + array[0,1] = string

number * array[0,1] = NaN




3. string to number


1
2
3
4
5
6
7
8
9
10
11
12
13
14
3 * "3" // 3 * 3
3 * Number("3") // 3 * 3
Number("5") // 5
 
Number("1.") // 1
Number("1.34") // 1.34
Number("0") // 0
Number("012") // 12
 
Number("1,") // NaN
Number("1+1") // NaN
Number("1a") // NaN
Number("one") // NaN
Number("text") // NaN
cs



String to Number일때 Implicit Coercion NaN이 발생한다.




4. typeof


1
2
3
4
5
const add = (number) => {
  if (typeof number !== "number") new Error("Only accepts arguments of type: number")
  //your code
  else return number;
}
cs



type check -> error or return value 




2. 테스트 소스





자바스크립트에서 string, number, string to number로 강제형변환이 일어나는 것을 확인할 수 있었다.


저작자표시

'전체 > JS & Jquery' 카테고리의 다른 글

JS scope from function, collision avoidance  (0) 2019.04.09
JS ==, === 의 비교  (0) 2019.04.08
js value와 reference  (0) 2019.03.12
js primitive type  (0) 2019.03.10
자바스크립트 콜스택(call stack)  (0) 2019.03.09


1. Value





1
2
3
4
let a = 10;
let b = a;
a = 20;
console.log(b);
cs


a는 10이고 a의 값을 b에 주입하여 10이 되었다.

(a값을 복사해서 b에 붙여넣음)


그래서 아래 a의 값을 20으로 변경해도 b는 값의 영향을 벗어난다.

이것을 value라고 한다.


value는 string number, boolean, NaN, undefined, null 가능하다.



2. Reference






1
2
3
4
const a = ["apple","banana"]
const b = a;
a.push("carrot");
console.log(b);
cs


b에는 ["apple", "banana", "carrot"] 가 들어있다.

레퍼런싱하는 것이다. 배열을 참조 하고 있는 것이다.

a와 b가 가르키는 배열은 메모리 어딘가에 위치해있고 동일한 배열을 바라보고 참조하는 것이다.





1
2
3
4
const a = { x: 'hi'}
b = a;
b.x = 'hello';
console.log(a);
cs


마찬가지로 map 형식의 데이터도 레퍼런스 참조를 하는 것을 확인할 수 있다.


reference는 arrray, object, function 에서 사용될수 있다.



'전체 > JS & Jquery' 카테고리의 다른 글

JS ==, === 의 비교  (0) 2019.04.08
JS Implicit Coercion(형변환)  (0) 2019.04.08
js primitive type  (0) 2019.03.10
자바스크립트 콜스택(call stack)  (0) 2019.03.09
버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트  (0) 2018.10.31


자바스크립트 primitive type



1. string, number, boolean 비교








2. undefined, null, NaN 비교






 항목

 내용 

 undefined

 정의되지 않음,

 null

 존재하지 않음

 NaN(Not a Number)

 계산이 잘못됨 wrong result



'전체 > JS & Jquery' 카테고리의 다른 글

JS Implicit Coercion(형변환)  (0) 2019.04.08
js value와 reference  (0) 2019.03.12
자바스크립트 콜스택(call stack)  (0) 2019.03.09
버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트  (0) 2018.10.31
시작페이지 설정, 즐겨찾기 설정 JS 소스  (0) 2018.10.31


자바스크립트 콜스택(call stack)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function four(){
 console.log("four function execute");
}
 
function three(){
    four();
}
 
function two(){
  three();
}
 
function one(){
  two();  
}
 
one();
cs



다음과 같이 javascript에

one() 이라는 함수를 실행하면 two()를 부르고 

two()는 three()를 부르고, three()는 four()를 불러서 

console.log("four function execute")를 찍는다.


자바스크립트는 함수를 스택 위에 올리고 



 

 

 

 four() 

 

 

 three() 

 three() 

 

 two()

 two()

 two()

 one()

 one()

 one()

 one()



함수를 다 실행하면 하나씩 pop하면서 제거한다.



 four()

 

 

 

 three() 

 three() 

 


 two()

 two()

 two()


 one()

 one()

 one()

 one()


스택을 다 처리하면 실행시킬 것이 없는 거다.

실행이 완료되면 함수는 리스트에서 사라진다.




만약 스택에 올라가있는 함수에 

다음과 같은 throw 에러문이 있다면


1
throw Error("i am an error");
cs


에러 전에 있던 있던 모든 콜스택을 알려준다.





또한 스택에 함수를 계속 호출한다면 스택에 계속 쌓이게 되고 

스택의 사이즈는 한계가 있으므로 다음과 같은 오류가 발생한다.






1. callstack.html


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <title>js 콜스택 테스트</title>
  <meta charset="utf-8" />
</head>
<body>
  <script type="text/javascript" src="callstack.js"></script>
  <h1>Hello</h1>
  <div>
  </div>
</body>
</html>
cs



2. callstack.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function four(){
 console.log("four function execute");
}
 
function three(){
    four();
}
 
function two(){
  three();
}
 
function one(){
  two();  
}
 
one();
cs



3. 실행결과 및 동작원리






자바스크립트는 함수를 스택 위에 올리고 함수가 실행되고 끝이 나면 pop하여 없애는 것을 확인할 수 있었다.



'전체 > JS & Jquery' 카테고리의 다른 글

js value와 reference  (0) 2019.03.12
js primitive type  (0) 2019.03.10
버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트  (0) 2018.10.31
시작페이지 설정, 즐겨찾기 설정 JS 소스  (0) 2018.10.31
JS Function Definitions Variable 자바스크립트 함수 선언방법  (0) 2018.10.28


1. ajax 요청 공통 메소드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var myCommon = {};
myCommon.util = {
     // method : get/post , url : call url 
     // params    : json 형식 요청 데이터, callbackFunction : callback 함수명
    callAjax : function(method, url, type,params, callbackFunction ){
        if(method=="" || url==""){
            console.log("method or url empty");
            return false;
        }
 
        $.ajax({
             type : method
            , url : url
            , data : JSON.stringify(params)
            , contentType:'application/json; charset=utf-8'
            , dataType: type
            , success : function(response) {
                if (type == "html") {
                        $(document.getElementById(callbackFunction)).html(response);
                } else {
                    // Callback 함수 호출
                    if (typeof(callbackFunction) == "function")
                        callbackFunction(params, response);
                }
            }
            , error : function(jqXHR, error) {
                console.log(error);
            }
        });
    }
};  
cs



2. 버튼 클릭하여 json 형태 데이터를 ajax 공통 메소드에 태워 보내기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function() {
    var processScript = true;
    var sendData = {};
 
    $("#ptcp").click(function(){
        // 버튼 여러번 클릭되지 않게 막기
        if(!processScript){
            alert("처리중입니다.");
            return;
        }
        
        var userName = $("#userName").val();
        var phoneNumber = $("#phoneNumber").val();
        var birthDt = $("#birthDt").val();
        var age = $("#age").val();
 
        sendData.userName = userName;
        sendData.phoneNumber = phoneNumber;
        sendData.birthDt = birthDt;
        sendData.age = age;
 
        if(!confirm("응모하시겠습니까?")){
            return;
        }
        ptcpEvent(sendData);
    });
 
    function ptcpEvent(sendData){
        var url = "@RequestMapping될 url 명시";
        var type   = "json";
        var requestData = sendData;
        console.log(JSON.stringify(requestData));
        processScript = false;
        myCommon.util.callAjax("POST", url, null,requestData, returnData.myResult);
    };
    
    var returnData = {
        myResult : function(request, response){
            console.log(request);    
            console.log(response);    
        }
    }
});
cs



'전체 > JS & Jquery' 카테고리의 다른 글

js primitive type  (0) 2019.03.10
자바스크립트 콜스택(call stack)  (0) 2019.03.09
시작페이지 설정, 즐겨찾기 설정 JS 소스  (0) 2018.10.31
JS Function Definitions Variable 자바스크립트 함수 선언방법  (0) 2018.10.28
게시판 페이징 ajax 스크립트  (2) 2018.08.17


1. 시작페이지, 즐겨찾기 JS


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 시작페이지 설정
$('#startPage').on('click', function() {
    var agent = navigator.userAgent.toLowerCase();
    if ((navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) 
        || (agent.indexOf("msie") != -1)) {
        // ie일 경우
        if (agent.indexOf("msie") != -1) {
            document.body.style.behavior = 'url(#default#homepage)';
            document.body.setHomePage('http://www.naver.com');
        } else {
            alert("internet explorer(10버전 이하) 에서만 지원하는 기능입니다.");
        }
    } else {
        // ie가 아닐 경우
        alert("지원되지 않는 브라우저입니다.");
    }
});
 
// 즐겨찾기 설정
$('#favorite').on('click', function(e) {
    var bookmarkURL = "http://www.naver.com";
    var bookmarkTitle = document.title;
    var triggerDefault = false;
 
    if (window.sidebar && window.sidebar.addPanel) {
        // Firefox version < 23
        window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)) 
                || (window.opera && window.print)) { // Firefox version >= 23 and Opera Hotlist
        var $this = $(this);
        $this.attr('href', bookmarkURL);
        $this.attr('title', bookmarkTitle);
        $this.attr('rel', 'sidebar');
        $this.off(e); triggerDefault = true;
    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
        window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else { // WebKit - Safari/Chrome
        alert((navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Cmd' : 'Ctrl') 
                + '+D 키를 눌러 즐겨찾기에 등록하실 수 있습니다.');
    }
    return triggerDefault;
});
cs



IE 10 버전 이하에서 시작페이지와 즐겨찾기 설정이 가능하다.

IE가 아닌 다른 브라우저로 클릭 이벤트를 발생시키면 지원하지 않는다는 alert창이 뜬다.





'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트 콜스택(call stack)  (0) 2019.03.09
버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트  (0) 2018.10.31
JS Function Definitions Variable 자바스크립트 함수 선언방법  (0) 2018.10.28
게시판 페이징 ajax 스크립트  (2) 2018.08.17
JS 문자열 막는 스크립트, 키보드 입력 글자 카운트 스크립트, 화면에서 여러번 클릭 막는 스크립트  (2) 2018.08.17


1. js function variable


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 화살표 함수
var arrowfunction = (a, b) => {
    if(a==1 && b==3){
        alert("Arrow function Execute");
    }else{
        alert("wrong");
    }
    return a;
}
 
// 함수명을 앞으로 뺀 함수 정의
var jsFunction = function(a, b) {
    if(a==1 && b==3){
        alert("jsFunction Execute");
    }else{
        alert("wrong");
    }
    return a;
}
 
// 일반적인 함수 정의
function nomalFunction(a, b){
    if(a==1 && b==3){
        alert("nomalFunction Execute");
    }else{
        alert("wrong");
    }
    return a;    
}
 
// 익명 함수 선언 및 바로실행
(function () {
    var x = "invokeSelf Function Execute"; 
    alert(x);
})();
 
// 각각의 결과값을 담기
var a1 = arrowfunction(1,3);
var b1 = jsFunction(1,3);
var c1 = nomalFunction(1,3);
 
alert(a1);
alert(b1);
alert(c1);
cs



자바스크립트 함수 선언을 function 함수명(인자) 가 아닌 여러가지 방법으로 표현할 수 있음을 확인했다.

또한 return 값이 있어도 되고 없어도 된다는 것과 함수선언과 동시에 호출이 가능한 함수 또한 알 수 있었다.



'전체 > JS & Jquery' 카테고리의 다른 글

버튼 클릭하여 json 형태 데이터 ajax 보내는 스크립트  (0) 2018.10.31
시작페이지 설정, 즐겨찾기 설정 JS 소스  (0) 2018.10.31
게시판 페이징 ajax 스크립트  (2) 2018.08.17
JS 문자열 막는 스크립트, 키보드 입력 글자 카운트 스크립트, 화면에서 여러번 클릭 막는 스크립트  (2) 2018.08.17
자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16


1. 게시판 페이징 ajax 스크립트


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 게시판 조회하는 함수
var board = {};
var lstCnt = 10;
board.boardList = {
        init : function(cmpnNo, lstCnt) {
            var page = 1;
            board.boardList.param.pageNumber = Number(page);
            board.boardList.param.cmpnNo = cmpnNo;
            board.boardList.param.pageSize = lstCnt;
            board.boardList.data();
        },
       data : function() {
            $.ajax({
                url : 'event/boardList',
                data : board.boardList.param,
                success : function(result) {
                    var boardList = result.boardList;
                    if(boardList.length != 0){
                        board.boardList.totalCount = boardList[0].totalCount; // 총 건수
                    };
                    drawPagination(lstCnt);
                    var markup ="";    // mark 로직 작성
                    $("#event_div").html(markup);
                },
                error : function() {
                    alert('게시판 조회 중 오류가 발생했습니다.');
                }
            });
        },
        param : {
            pageNumber : 1,
            pageSize : lstCnt
        },
        totalCount : 0
    };
 
//페이징을 설정하고 페이징 영역에 화면에 그리는 함수
function drawPagination(lstCnt){
    $("#boardPagingDiv").pagination({
       items: board.boardList.totalCount,
       currentPage : board.boardList.param.pageNumber,
       itemsOnPage: lstCnt, // 설정 안할 경우 10
       displayedPages : lstCnt, // 설정 안할 경우 10
       selectOnClick : false, // 페이징 버튼을 눌렀을 때 자동으로 페이징을 다시 그릴지 여부 (기본값은 true)
       onPageClick: function(currentPage){ // 페이징 버튼을 눌렀을 때 이벤트 바인딩
           searchBoardListPaging(currentPage); // 페이징 버튼을 눌렀을 때 다시 비동기로 데이터를 가져와 화면과 페이징을 그립니다.
       }
   });
}
 
// 페이징 번호 눌렀을때 함수
function searchBoardListPaging (page) {
    board.boardList.param.pageNumber = Number(page);
    board.boardList.data();
    drawPagination(lstCnt);
}
cs


pageNumber, pageSize, totalCount 를 통해 


페이징 영역을 그리고, 페이징 번호를 눌렀을때 


선택한 페이징번호와 페이지사이즈를 가지고 데이터를 다시 가져오는 것을 확인할 수 있다.



'전체 > JS & Jquery' 카테고리의 다른 글

시작페이지 설정, 즐겨찾기 설정 JS 소스  (0) 2018.10.31
JS Function Definitions Variable 자바스크립트 함수 선언방법  (0) 2018.10.28
JS 문자열 막는 스크립트, 키보드 입력 글자 카운트 스크립트, 화면에서 여러번 클릭 막는 스크립트  (2) 2018.08.17
자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04

+ Recent posts

티스토리툴바