[개념] JS_개념정리

기본문법1

Math.pow(3,2); // 9, 3의 2승
Math.round(10.6); // 11, 10.6을 반올림
ath.ceil(10.2); // 11, 10.2를 올림
Math.floor(10.6); // 10, 10.6을 내림
Math.sqrt(9); // 3, 3의 제곱근
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자

기본문법2

function get_members() {
return ['egoing', 'k8805','sorialgi']; 
} 
members = get_members(); 
members.push('chris'); //꼬리에다 추가 
members.unshift('james'); //앞에다가 값 추가

for(i=0;i< members.length;i++){
console.log(members[i].toUpperCase());
} 
var str = 'html,css,javascript,jquery,apache,php'; 
str.split(',');
console.log(str);

str.split(',',2); 
console.log(str);

// 
var emails = 'a@cb.com@b@cb.com@c@cb.com@cb.com'; 
emailArray= emails.split('g'); 
emailStr = ''; 
for(var i=0; i<emailArray.length;i++){
emailStr += emailArray[i]+','; 
} 
console.log(emailStr); 

//객체와 반복문 
var grades = {'egoing':10, 'k8805':6, 'sorialgi':80}; 

for(key in grades){ 
console.log("key: "+key+" value: "+grades[key]+" <br/>" ); } 

//객체지향 프로그래밍 
var grades ={ 'list' : {'egoing' : 10, 'k8805': 8, 'sorialgi': 80}, 
'show': function (){
for(var name in this.list){ 
console.log(name, this.list[name]); } 
} 
} 

console.log(grades['list']['egoing']); 
grades.show();

정규표현식

정규표현식 리터럴
var pattern = /a/ ;

정규표현식 객체 생성자
var pattern = new RegExp('a');

//String.match()
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null

//String.replace()
onsole.log('abcdef'.replace(pattern, 'A'));  // Abcdef

//옵션
//i, i를 붙이면 대소문자를 구분하지 않음
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];

//g g를 붙이면 검색된 모든 결과를 리턴한다.
var xg = /a/;
console.log("abcdea".match(xg)); //[a]
var og = /a/g;
console.log("abcdea".match(og)); //['a','a']

//캡쳐
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1"); //$2두번재 그룹 //$1은 첫번째 그룹 
console.log(result);
//결과값: everybody, coding


//치환 
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

 

지역변수 전역변수 

변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 해야함 

var scope = 'global';
function fscope(){
        var vscope = 'local';
        console.log(vscope);
}
fscope(); //local
console.log(vscope); //global

//동일한 이름의 변수 사용예
var vscope = 'global';
function fscope(){
        var vscope = 'local'; //#1.지역변수(새로운변수인가?)
        vscope = 'local';//함수 안에서 로컬변수가 먼저 존재하는지 확인하기 하기 때문에
        //#1번때문에 지역변수로 인식 >> 전역변수의 값을 변경하지 않음
}
fscope();
console.log(vscope); //결과 global 

유효범위 효용성

 

값으로서의 함수 콜백 

//1번 
function cal(func, num){
    return func(num)
}
function increase(num) {
    return num+1;
}
function decrease(num) {
    return num-1
}
console.log(cal(increase,1)); //함수자체를 매개변수로 받을 수 있다. 
console.log(cal(decrease,1));

//2번 
function cal(mode) {
    var funcs = {

        'plus': function (left, right)
        {return left + right},
        'minus': function (left, right)
        {return left - right}
    }
        return funcs [mode];
    }

    console.log(cal('plus')(2,1)); //결과:3
    console.log(cal('minus')(2,1)); //결과:1
    
    //3번 배열에 저장
    //first-classs citizen or object 
var process = [
        function (input) { return input +10;},
        function (input) { return input * input;},
        function (input) { return input /2;}
];
var input =1;

for(var i=0;i<process.length;i++){
    input = process[i](input); //input값의 변화: 1+10 >> 11*11 >> 121/2 = 최종값: 60.5
}
console.log(input);

//4. 정렬 
var numbers = [20, 10, 5, 1, 74, 36,87];
var sortfunc = function(a,b){
    console.log(a,b);
    return a-b; //오름차순 정렬(양수이면 잘바꿈)
    //retrun b-a;//내림차순 정렬
}
console.log(numbers.sort(sortfunc)); //sortfunc가 콜백함수가된다.

클로저 및 내부함수, 외부함수 

Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다. 이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다. 자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다.

function outter() {
    function inner() {
        var title = 'coding everybody';
        console.log(title);
        //결과값: coindg everybody 
        //내부함수는 외부함수의 지역변수에 접근할 수 있다.
    }
    inner();
}
outter();

//클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고,
//외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.
function outter() {
    var title = 'coding everybody';
    return function(){
        console.log(title);
    }
}
inner = outter(); //여기서 죽어야하지만!!계속해서 살아있음!!! 
inner();
//결과값: coding everybody

//활용 실용 예제는? 
function factory_move(title) {
    return {
        //get_title이라는 메소드를 호출하면, title이라는 값을 리턴해준다. 그럼 이 title이라는 값은 어디서 오는걸까?
        // factory_move(title) 여기에서 온다
        get_title : function () {//내부함수라고 볼 수 있다. 객체의 소속이다.
            return title;
        },
        set_title : function (_title) {
            title = _title
        }
    }
}
ghost = factory_move('Chost in the shell');
matrix = factory_move('Matrix');

console.log(ghost.get_title());//Chost in the shell
console.log(matrix.get_title());//Matrix

//여기서 이렇게 다시 한다면?
ghost.set_title('공각기동대');

//실행된 시점에서의 외부함수에 접근할 수 있었고,
console.log(ghost.get_title()); //공각기동대
console.log(matrix.get_title());//Matrix

//외부함수 factory_movie를 공유하고 있는 ghost와 matrix의 get_title의 결과는 서로 각각 다르다.
//그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 
//ghost와 matrix는 서로 완전히 독립된 객체가 된다.
//factory_movie의 지역변수 title은 2행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다. 
//이 말은 title의 값을 읽고 수정 할 수 있는 것은 factory_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다.
//JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.
//**set으로만 수정할 수 있고, get으로만 가져올수 있게 하면 값을 안전하게유지할수 있다. 


//클로저 함수에서 자주 일어나는 실수는? 
var arr = []
for(var i = 0; i< 5;i++){
    arr[i] = function (id) {
        return function () {
            return id;
        }
    }(i);
}

for(var index  in arr){
    console.log(arr[index]());
}
//결과값:0 1 2 3 4
	
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참조

https://opentutorials.org/course/743/6495