TIL 2023.02.02 JavaScript 2

Object

var obj1 = new Object();
var obj2 = {"key1":"val1", "key2":"val2"}
obj1["key1"] = "val1";
obj1.key2 = "val2";
obj1.key3 = [1,3,5,7];
obj1.obj2 = obj2;
console.log(obj1);
console.log(obj1.key3[2])
console.log(obj1.obj2.key1);
for(key in obj1){
    console.log(key, typeof key, obj1[key])
}

function

// 호출 먼저 가능 단, 스크립트 단위로 컴파일되기때문에
// 호출과 선언이 다른 스크립트일 경우 선언이 먼저 되야함
var val = func1(); 
console.log(val); // return값 없으면 undefined

function func1() {
    console.log("func1 run...");
    return 1234; // 생략가능
}

var f = func1;
console.log(typeof f); //function
f(); // func1 run...

// f2(); 이건 안됨
var f2 = function(){
    console.log("run...");
};
f2(); // run...

(function(){
    console.log("rruunn...");
})(); // rruunn...

변수

// 오버로딩 안됨 마지막 걸로 덮어씌워짐
// 매개변수 유무는 상관없음
function func01(a, b) {
    console.log('2개짜리');
}
function func01(a) {
    console.log('1개짜리');
}
func01(5, 2); // 1개짜리 
func01(); // 1개짜리

// 매개변수가 없어도 받아 오긴함 arguments
function func02() {
    console.log(arguments);
    for(su of arguments){
        console.log(su); 
    }
}
func02(1,3,5,7); // 1 3 5 7

// 변수 라이프사이클
var a = 1111;
for(i = 0; i < 1; i++){
    var a = 2222; // 전역변수
}
function func03() {
    a = 2222; // 전역변수
    var a = 2222; // 지역변수
}
func03();
console.log('a',a);
function func01(){
    console.log('run...');
};
var arr1= [111, 'item2', func01];
for(ele of arr1){
    // console.log(typeof ele, ele);
    if(typeof ele == 'function'){
        ele();
    } else {
        console.log(ele);
    }
}

콜백함수

function func02() {
    console.log('callback');
}
var f = func02;
function func03(a){
    a();
}
func03(f); 
// 매개변수로 func02를 전달만했을 뿐
// 실행을 하는건 func03 의 역할
var arr1 = [4444, 1111, 3333, 2222];
console.log(arr1);
var f = function(/*a, b*/) {
    // return arguments[1] - arguments[0]; // 역순정렬
    // return a + b; // 정순정렬
    // return -1 // reverse

    // sort()의 구성
    // if(arguments.length != 0) {
    //     return arguments[0] + arguments[1];
    // } else {
    //     return arguments(); // 콜백함수 받을 경우 호출되도록
    // }
};
arr1.sort(f);
console.log(arr1);

// 콜백함수를 이용한 반복
var callback = function(a,b,c){
    console.log(a);
}
arr1.forEach(callback);

this

var obj1 = {"key1":"val1"};
obj1.key2 = "val2";
var f = function(a) {
    //메서드 - 객체가 가지고 있는 기능
    console.log(obj1==this, window==this);
    console.log(obj1.key2, this.key2);
};
obj1.key3=f;
obj1.key3(); // ture false val2 val2
f(); // false true val2 undefined

for(key in obj1){
    if(typeof obj1[key] == 'function'){
        obj1[key]();
    } else {
        console.log(key, obj1[key]);
    }
}

var a = 1111;
function func02(a){
    a = 2222; // 지역
    this.a = 2222; // 전역
}
func02();
console.log('a', a);

bean

function newInstance(){
    return new Object();
};
var arr = [];
var obj2 = newInstance();
var obj3 = newInstance();
arr.push(obj2);
arr.push(obj3);
arr.push(newInstance());

obj2.setKey1 = function(a) {
    this.key1 = a;
}
obj2.getKey1 = function() {
    return this.key1;
}
obj2.setKey1("item1");
console.log(obj2.getKey1());
console.log(obj2, obj3);
console.log(arr);

연산

var a, b, c ,d;
a = 3;
b = null;
d = function() {};
console.log(a + b); // 3
console.log(a * b); // 0
console.log(a + c); // NaN
console.log(a + d); // 문자열 연산됨
console.log(a * d); // NaN
console.log(a + true); // 4
console.log(a * true); // 3
console.log(a + false); // 3
console.log(a * false); // 0

// true false
// 숫자는 1, 0
// 문자열은 "...", ""
// 객체는 Object, undefined
var h = true && true;
console.log(h); // true

Closure

var a = {};
function func01() {
    var a = {"key1":"val1"}
    var c = function(val) {
        if(val){
            a.key1 = val; //setter
        } else {
            return a.key1; //getter
        }
    };
    return c;
}
var b = func01();
b(1234);
console.log(a, b());

bind call apply

var member = {
    firstName:"이",
    lastName:"순신"
}
// bind
var person =  {
    firstName:"홍",
    lastName:"길동",
    fullName: function(){
        return this.firstName + " " + this.lastName
    }
}
var fullName = person.fullName.bind(member);
// bind 만 실행은 안함
console.log(fullName)

// call
var person2 =  {
    fullName: function(){
        return this.firstName + " " + this.lastName
    }
}
var fullName2 = person2.fullName.call(member);
console.log(fullName2)

// apply
var person3 =  {
    fullName: function(a, b){
        return a + " " + b
    }
}
var fullName3 = person3.fullName.apply(member, ["aaa","bbb"]);
console.log(fullName3)

Date Number

var a = new Date();
console.log(a.getYear()+1900);
console.log(a.getMonth()+1);
console.log(a.getDate());
console.log(a.getHours());
console.log(a.getMinutes());

var a = "1000원";
a = Number.parseInt(a);
console.log(a + 100);
var b = "3.55달러";
b = Number.parseFloat(b);
console.log(b + 2.2);

console.log(Math.abs(-1234));
console.log(Math.random());
console.log(Math.floor(b)); // 내림
console.log(Math.round(b)); // 반올림
console.log(Math.ceil(b)); // 올림

event driven architecture

var a;
function callback() {
    console.log("call..");
    a = setTimeout(callback, 3000); // 재귀로 interval
}
// var a = setTimeout(callback, 3000) // 3초 뒤
setTimeout(callback);
setTimeout(function() { // 10초 뒤 멈춤
    clearInterval(a);
}, 10000);

BOM(Browser Object Model)

window

• history
• location
• screen
• navigator

window

alert("메세지");
confirm("확인?");
prompt("입력하시오", "초기값");
var a = open("http://google.com");
a.close();
innerWidth, innerHeight 해당값으로도 반응형가능
outerWidth, outerHeight 
console.log('aa');
console.error('aa');

location

location.href; // 주소확인
location.href="https://google.com"; // 주소 변경(이동)
location.protocol; // 'https:'
location.host;  
location.hostname; 
location.port; 
location.pathname; // 경로
location.search; // 파라미터 URL에서 ? 이후의 값
location.reload();
location.replace("https://m.naver.com"); // 주소 변경(이동) history X

history

history.length // 방문기록갯수
history.back() // 뒤로
history.forward() // 앞으로
history.go(-3) // 수만큼 이동

screen

화면의 사이즈 조회

navigator

객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체.

DOM(Document Object Model)

• document

// document.write("<h1>쓰기</h1>"); // 그냥쓰면 덮어씌움
// document.childNodes;
// var msg = document.createTextNode('수정된문자열');
// var h1 = document.childNodes[1].childNodes[2].childNodes[1];
// h1.removeChild(h1.childNodes[0]);
// h1.appendChild(msg);
var input = document.childNodes[1].childNodes[2].childNodes[7];
var ul = document.childNodes[1].childNodes[2].childNodes[5];
function add() {
    var li = document.createElement('li');
    var msg = document.createTextNode(input.value);
    li.appendChild(msg);
    ul.appendChild(li);
    input.value="";
}
// h1 = document.children[0].children[1].children[0].childNodes; // text노드제외
// h1 = document.firstElementChild.lastElementChild.firstElementChild.firstChild //index제외
// ul = document.firstElementChild.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling;
// ul.appendChild(ul.firstElementChild); // 맨위의 아이템 맨밑으로
// ul.removeChild(ul.firstElementChild); // 첫 아이템 삭제
var li = document.createElement('li');
li.appendChild(document.createTextNode('추가'));
// ul.prepend(li);
// ul.replaceChild(li, ul.firstElementChild);
var h1 = ul.previousElementSibling.previousElementSibling;
h1.style.color='red';
h1.style.backgroundColor='yellow';
h1.style.width='200px';