가전제품 이것저것 이야기

1. DOM

브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 

그렇게 저장된 정보를 DOM Tree라고 합니다.

결국 HTML element는 Tree 형태로 저장됩니다.

Dom tree

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘듭니다.

그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다.

브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공합니다.

2. getElementById()

ID 정보를 통해서 찾을 수 있습니다.

MDN사이트를 참고해서 이를 테스트해봅시다.

테스트를 할 때는 특정 웹사이트에 접속한 후, 크롬 개발자도구-콘솔을 열어서 그곳에서 코딩을 해보면서 찾을 수 있습니다. 

document.getElementById("wrap");

3 Element.querySelector()

DOM을 찾는데 특히 유용한 querySelector 메서드입니다.

CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있습니다.

DOM을 찾을 때 querySelector만 써도 충분하고 빠릅니다.

참고로, 비슷하지만 다른 querySelectorAll이 있습니다. 

이 녀석은 어떤 역할을 하는지, 그 반환 값은 무엇인지 확인해보세요.

특정 웹사이트에 접속한 후, 크롬 개발자도구를 열어 콘솔 창에서 querySelectorAll을 활용해서 다양한 UI 영역을 찾아보세요.

document.querySelector("div");
document.querySelector("#container");	// id
document.querySelector(".modal_progress");	// class
document.querySelector(".modal_wrap > .modal_inner"); // modal_wrap 밑에 modal_inner

4. css selector

selector문법은 querySelector와 querySelectorAll메서드에서 사용할 수 있으며, css 스타일을 부여했을 때 익혔던 selector문법과 동일하다고 생각하고 사용할 수가 있습니다.

다양한 css selector문법을 사용해서 원하는 엘리먼트를 찾을 수 있습니다.

window 객체

브라우저 개발을 하다 보면, window라는 객체가 있습니다.

window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있습니다.

window는 디폴트의 개념이므로 생략할 수 있습니다.

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

setTimeout 활용

setTimeout은 낯설게 동작합니다.

인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도 합니다.

자바스크립트는 함수를 인자로 받을 수 있는 특징이 있습니다.

참고로 함수를 반환할 수도 있고요.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
}

run();

setTimeout의 특성을 잘 이해하고, 지연실행이 필요한 경우에 잘 활용하면 좋습니다.

1000 ms = 1초

setTimeout 실행 순서

setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행됩니다.

function run() {
    console.log("start");
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
    console.log("end");
}

run();

start -> end -> hello codesquad

즉 setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서, (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행됨) 실행됩니다.

디버거를 통해서 이를 스스로 직접 확인하는 것이 학습이 도움이 됩니다. 

function run(){
    
    setInterval(function() {
        var msg = "setInterval function";
        console.log(msg);
    }, 1000);
   
}

console.log("start");
run(); 
console.log("end");

start -> end -> setInterval function -> setInterval function -> setInterval function -> setInterval function -> ...

함수 - arguments 객체

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성됩니다.

arguments의 타입은 객체 입니다.(console.log( typeof arguments) 로 확인해보세요!)

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다.

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있습니다.

arguments는 배열타입은 아닙니다.

따라서 배열의 메서드를 사용할 수가 없습니다.

function a() { console.log(arguments); } a(1,2,3);

자바스크립트의 가변인자를 받아서 처리하는 함수를 만들때 등에서 arguments속성을 유용하게 사용할 수가 있습니다.

응용해보기

• arguments속성을 사용해서 , 1~무한대까지 인자를 받아 합을 구하는 함수를 만들어봅시다.

function sum() {
    var sum = 0;
    var len = arguments.length;
    for(var i=0; i<len; i++){
        sum += arguments[i];
    }
    return sum;
}

var getSum = (...arguments) => {
    var sum = 0;
    var len = arguments.length;
    for(var i=0; i<len; i++){
        sum += arguments[i];
    }
    return sum;
}

console.log(sum(1,2,3,8));
console.log(getSum(1,2,3));

생각해보기

1. arrow function

ES2015에는 arrow function이 추가됐다.

arrow function 참고 바로가기

간단하게 함수를 선언할 수 있는 문법으로 처음에는 꽤 낯설수 있습니다.

하지만 점점 많이 사용되고 있는 syntax이므로 같이 알아두어도 좋을 것 같습니다.

function getName(name) {
   return "Kim " + name ;
}

//위 함수는 아래 arrow함수와 같다.
var getName = (name) => "Kim " + name;

함수 - 함수의 선언

함수는 여러 개의 인자를 받아서, 그 결과를 출력합니다. 

파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않습니다. 

만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 됩니다.

이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문입니다.

이를 한번 테스트해보세요.

// 함수의 호출.
function printName(firstname) {
    var myname = "jisu";
    return myname + " " +  firstname;
}

위와 같은 형식의 함수 선언코드는 함수선언문이라고 합니다.  

함수 - 함수표현식

함수는 아래 printName과 같이 표현할 수도 있습니다.

이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.

function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}

test();
//TypeError: printName is not a function

함수 표현식보다 함수 선언문을 더 자주 사용하지만, 어떤 코딩컨벤션에서는 함수 표현식을 권장하기도 합니다.

어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋습니다.

함수 - 표현식과 호이스팅

앞선 코드에서, printName이 "printName이 is not defined" 이라고 오류가 나오지 않고, function이 아니라고 나온 이유는
printName이 실행되는 순간 'undefined'으로 지정됐기 때문입니다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언합니다.

함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 합니다.
(실제로 코드가 끌어올려지는 건 아니며<이 과정이 눈에 보이는 게 아니죠>, 자바스크립트 파서 내부적으로 그렇게 끌어올려서 처리하는 것입니다)

따라서 아래 코드 역시 함수를 값으로 가지지만 어쨌든 printName도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태입니다.

printName(); //아직, printName이 undefined으로 할당된 상태다. 
var printName = function(){}

printName이라는 변수가 존재하고 아직 값이 할당되기 전이므로 printName에는 'undefined'이라는 기본 값이 할당된 셈입니다.

함수 - 반환값과 undefined

아래 함수의 반환값은 무엇일까요? 

function printName(firstname) {
    var myname = "jisu";
    var result = myname + " " +  firstname;
}

정답은 undefined입니다.

자바스크립트 함수는 반드시 return값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환됩니다.

자바스크립트에서는 void 타입이 없습니다.

반복
for 문이나 while문을 사용해서 반복문을 구현할 수 있습니다.

function howMany(selectObject) { 

    var numberSelected = 0; 
    for (var i = 0; i < selectObject.options.length; i++) { 
    	if (selectObject.options[i].selected) { 
        	numberSelected++; 
        } 
     } 
     return numberSelected; 
}

function howMany(selectObject) { 

    var numberSelected = 0; 
    var len = selectObject.options.length;
    for (var i = 0; i < len; i++) { 
    	if (selectObject.options[i].selected) { 
        	numberSelected++; 
        } 
     } 
     return numberSelected; 
}

-> for문 안에서 돌때마다 length를 계속 구해야하기 때문에 먼저 length값을 받아서 len 변수에 넣어놓고 실행한다.

function howMany(selectObject) { 

    var arr = [1,2,3];

    var numberSelected = 0; 
    var len = arr.length();
    
    for (var i = 0; i < len; i++) { 
    	if (arr[i] > 2) { 
        	numberSelected++; 
        } 
     } 
     return numberSelected; 
}

-> arr 는 이런 식으로 쓴다.

배열의 경우 forEach와 같은 메서드도 있고, for-of를 통한 탐색도 자주 사용됩니다.

(for-in은 객체를 탐색할때 사용합니다)

forEach와 같은 메서드의 사용법이 익숙하지 않다면, 우선은 for문으로 배열을 탐색하는 것으로 충분합니다.

MDN 링크 바로가기

문자열 처리

자바스크립트의 문자와 문자열은 같은 타입으로 모두 문자열입니다.

typeof "abc"; //string 
typeof "a"; //string 
typeof 'a'; //string. single quote도 사용가능.

쌍따옴표든 홑따옴표이든 모두 string type으로 인식한다.

문자열에 다양한 메서드가 있습니다.

"ab:cd".split(":"); //["ab","cd"] 
"ab:cd".replace(":", "$"); //"ab$cd" 
" abcde ".trim(); //"abcde"

자바스크립트의 버전

• 자바스크립트 버전은 ECMAScript(줄여서ES)의 버전에 따라서 결정되고, 이를 자바스크립트 실행 엔진이 반영합니다.
• ES5, ES6(ES2015).. 이런 식으로 버전을 일컫습니다.
• 2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇 년간 ES6 문법이 표준으로 쓰이고 있습니다.
• ES6는 ES5문법을 포함하고 있어 하위호환성 문제가 없습니다.
• 다만 feature별로 지원하지 않는 브라우저가 있을 수 있어 조심해야 합니다.

변수

변수는 var, let, const 로 선언할 수 있습니다.

어떤 것을 사용하는가에 의해서 scope, 즉 변수의 유효범위가 달라집니다.

ES6이전까지는 var를 사용해서 변수를 선언할 수 있습니다.

var a = 2; 
var a = "aaa"; 
var a = 'aaa'; 
var a = true; 
var a = []; 
var a = {}; 
var a = undefined;

연산자

연산자 우선순위를 표현하기 위해서는 ()를 사용하면 됩니다. 

수학연산자는 +,-,*,/,%(나머지) 등이 있습니다.

그리고 논리 연산자, 관계연산자, 삼항연산자도 있습니다. 

//or 연산자 활용

const name = "crong"; 
const result = name || "codesquad"; 
console.log(result); 
-> "crong"

var name = ""; 
var result = name || "codesquad"; 
console.log(result);
-> "codesquad"

연산자 - 삼항연산자

간단한 비교와 값 할당은 삼항연산자를 사용할 수 있습니다.

const data = 11; 
const result = (data > 10) ? "ok" : "fail"; 
console.log(result);
-> "ok"

연산자 - 비교연산자

비교는 == 보다는 ===를 사용한다.

==로 인한 다양한 오류 상황이 있는데 아래 결과를 참고해봅시다. 

0 == false; -> true
"" == false;  -> true
null == false;  -> false
0 == "0";   -> true
null==undefined;  ->true

자바스크립트의 Type

자바스크립트 타입에는 다양한 것이 존재합니다.

> undefined, null, boolean, number, string, object, function, array, Date, RegExp

타입은 선언할 때가 아니고, 실행타임에 결정됩니다.

함수안에서의 파라미터나 변수는 실행될 때 그 타입이 결정됩니다. 

타입을 체크하는 또렷한 방법은 없습니다.

정확하게는 toString.call 함수를 이용해서 그 결과를 매칭하곤 하는데, 문자, 숫자와 같은 자바스크립트 기본 타입은 'typeof' 키워드를 사용해서 체크할 수 있습니다. 

배열은 타입을 체크하는 isArray함수가 표준으로 생겼습니다.

IE와 같은 구 브라우저를 사용해야 한다면 지원범위를 살펴보고 사용해야 합니다.

toString.call("word");
"[object String]"

toString.call(12);
"[object Number]"