JavaScript 핵심요약

Front-End/Javascript

JavaScript 핵심요약

챔🐻 2024. 1. 25. 12:05

1.2 출력과 입력

출력

window : 브라우저

document : 브라우저에 로딩된 html

window.alert(출력할 내용) : 브라우저의 경고창에 출력

console.log(출력할 내용) : 브라우저의 콘솔에 출력

document.write()
- 기존 내용을 다 삭제하고 입력한다.
- 문서를 아예 새로 만들 때만 사용. 함부로 사용하면 안됨. 거의 사용할 일 X

innerHTML

$0
<h1>Hello</h1>
$0.innerHTML
'Hello'
$0.innerHTML = 'World';
'World'
$0.innerHTML = '<span>Hi</span>' // h1 태그 inner에 span 태그 삽입
'<span>Hi</span>'

textContent
```
$0.textContent = '<span>Hi</span>' // $0(h1태그)의 내용을 <span>Hi</span>로 바꾼다.
'<span>Hi</span>'
```
- innerHTML과 textContent의 차이
  textContent는 innerHTML과 달리 태그를 문자열로 인식한다.

입력

window.confrim(메시지)
확인창 입력 예 → true, 아니오 → false

window.prompt(”제목”, “내용”)
입력한 내용 문자열로 반환

1.3 자료형(Data Types)

typeof 연산자로 변수나 리터럴의 타입 확인 가능
객체의 typeof → obejct
+) 객체의 타입 확인 시 instanceof 연산자 사용
```
typeof 1 // 'number'
typeof 'abc' // 'string'
typeof [] // 'object'
typeof function() {} // 'function'
```

true로 평가되는 값 : false가 아닌 값 전부
false로 평가되는 값 : 0, -0, “”, null, false, NaN, undefined
※ !! 연산의 결과가 false라면, false로 평가되는 값이다.
```
!!1 // true
!!0 // false
!! [] // true 빈 배열
!! {} // true 빈 객체
!!'0' // false일 것 같지만 true이다.
```

null VS undefined
null은 참조변수에 넣는 것. 참조형임 undefined은 ???(참조가될지 기본이 될지 모름)
대부분 undefined다.

1.5 호이스팅(hoisting)

변수나 함수의 선언이 해당 범위(scope)에서 최상단으로 옮겨지는 것

num = 6;
console.log(num); // 6
console.log(num2); // undefined

var num; // OK
var num2 = 10;
console.log(num2); // 10

catName("Chloe");

function catName(name) {
    console.log("cat's name = " + name);
}

→

var num; // OK
var num2; // var num2 = 10; -> var num2 얘만 올라간다.

function catName(name) {
    console.log("cat's name = " + name);
}

num = 6;
console.log(num); // 6
console.log(num2); // undefined

num2 = 10;
console.log(num2); // 10

catName("Chloe");

1.6 변수의 범위(scope)

JS에서의 변수의 종류

전역 : 지역 변수가 아닌 것

지역 : 함수 내부

<변수의 종류>

ES5 : var

ES6 : let(변수), const(상수) ⇒ 이거 사용하기

전역 변수

전역 변수는 window(브라우저)의 속성임

선언하지 않고 쓰면 전역 변수가 된다.

var x = 10; // 전역변수 x 선언
var x = 5; // 중복 선언 가능. 마지막 선언만 유효
x = 3; // var x = 3;과 동일 전역변수 - 어떤 Scope에서든지 쓸 수 있음
ㄴ
console.log(x); // 3
console.log(window.x); // 3

지역 변수

function sum(a, b) {
    var result = 0; // 지역변수
    gResult = 0; // 전역변수 window.gResult = 0;

		// var i;는 자기 scope의 최상단으로 올라감
    for (var i = 0; i < arguments.length; i++) { 
        gResult += arguments[i];
    }
    console.log(i); // OK
}

sum(3, 5);
// console.log(result); // 에러
console.log(gResult); // 8
console.log(window.gResult); // 8

문자열

JS와 JAVA와의 갭

나머지는 실전에서 필요할 때 채워나가기 오래 붙잡고 있는 것은 좋지 않다. 핵심만 알고 넘어가면 된다.

1.7 형변환(Type conversion)

숫자로 변환 : Number(), parseInt(), parseFloat(), *1

Number()

var x = Number(true); // true -> 1
var x = Number("true") // "true" -> NaN
var x = Number("123") // "123" -> 123
var x = Number("123px") // "123px" -> NaN

parseInt()

Number()보다는 parseInt()를 쓰는 게 안전하고 실제로 많이 사용한다.

var x = parseInt(true); // true -> NaN
var x = parseInt("true") // "true" -> NaN
var x = parseInt("123") // "123" -> 123
var x = parseInt("123px3") // "123px3" -> 123 parseInt는 해석할 수 없으면 거기서 끝낸다.

parseFloat()

var x = parseFloat("-1e3") // -1000
var x = parseFloat("1"); // 1

*1 (String → Number)
```
var x = "22" * 1; 
typeof x // 'number'
```

문자로 변환 : String(), toString()

var num = 22;
var x = String(num); // '22'
var x = num + ""; // '22' 이거 사용할 것
var x = num.toString(); // '22'
var x = (123).toString(); // '123' 객체가 아니기 때문에 ()로 묶어줘야 한다. 일시적인 객체화

boolean으로 변환 : Boolean(), !!

var num = 123;
var x = Boolean(num); // true
var x = Boolean(0);  // false
var x = Boolean("0") // true
var x = !!123;       // true 이거 쓰기

2.2 toExponential(), toFixed(), toPrecision()

지정된 소수점 자리수에서 반올림 결과를 문자열로 반환

x.toExponential(2); // '9.66e+0'
x.toExponential(4); // '9.6560e+0'
x.toExponential(6); // '9.656000e+0'

var x = 9.656;
x.toFixed(0); // 10
x.toFixed(2); // 9.66
x.toFixed(4); // '9.6560'
x.toFixed(6); // '9.656000'

var x = 9.656; 
// 정밀도?
x.toPrecision(); // '9.656'
x.toPrecision(2); // '9.7'
x.toPrecision(4); // '9.656'
x.toPrecision(6); // '9.65600'

3. 배열

Java와 달리 배열의 크기는 동적으로 변경가능하다.

배열 생성

arr = []; // 빈 배열 생성. 아래와 같은 의미. 똑같으니 굳이 아래처럼 쓸 필요 X
arr = new Array();
arr = new Array(10); // 크기를 지정해야 할 때는 사용하기도 한다.

객체 생성

obj = {}; // 빈 객체 생성. 아래와 같은 의미. 똑같으니 굳이 아래처럼 쓰지말고 obj = {};로 생성하자.
obj = new Object();

하나의 배열에 여러 타입의 값을 저장할 수 있다.

var arr = [1, 2, 3, 4, 5];
arr[6] = 100;
arr // [1, 2, 3, 4, 5, empty, 100]
arr[5] // undefined
arr.length // 7

for (var i = 0; i < arr.length; i++) console.log(arr[i]); // 1 2 3 4 5 undefined 100
for (i in arr) console.log(arr[i]); // 1 2 3 4 5 100 / undefined는 출력 안 함

배열도 객체이며, new 연산자로 생성할 수 있다.

var arr = new Array(1, 2, 3, 4, 5); // var arr = [1, 2, 3, 4, 5];
var arr = new Array(40); // 40개의 undefined 요소들이 저장된 배열

배열의 length 변경 가능

arr = []; // 빈 배열
arr[0] = 1;
arr[1] = 2;
arr // [1, 2]

arr.length; // 2
arr[1] = 30; // 기존 값이 있으면 update(변경), 없으면 추가

arr.length = 10; // length 변경 가능 but 실제 공간이 늘어나는 건 아님 [1, 30, empty × 8]
arr.length = 1; // [1]

map() - 변환, flat()

arr = [1, 2, 3, 4, 5];
arr.map(e => e * 10); // [10, 20, 30, 40, 50]
arr[2] // 3 스트림의 특징 : 원본 변경 X

arr[2] = [1, 2]; // [1, 2, Array(2), 4, 5]
arr = arr.flat(); // [1, 2, 1, 2, 4, 5]
arr = arr.map(e => e * 10); // [10, 20, 10, 20, 40, 50]

arr.filter(e => e > 20) // [40, 50]
arr.find(e => e > 40) // 50 java의 findfirst와 같다.

find(), filter() - 특정 조건에 맞는 요소 찾기, 일치하는 요소 찾기

var ages = [10, 20, 30, 40, 50];

function checkAdult(age) {
    return age >= 18;
}

// 주어진 콜백 함수를 만족하는 배열의 첫 번째 요소 반환
ages.find(checkAdult); // 20 / 순차 검색

// 주어진 콜백 함수를 만족하는 모든 요소로 새로운 배열을 생성, ages 배열에서 18 이상인 모든 요소를 찾는다.
ages.filter(checkAdult) // 20, 30, 40, 50

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.indexOf("Apple"); // 2
fruits.indexOf("Apple", 4); // -1 / 두 번째 인수는 검색을 시작할 인덱스 지정

배열의 모든 요소 출력 : toString(), join()


fruits.toString(); // 'Banana,Orange,Apple,Mango'
fruits.join(" - "); // 'Banana - Orange - Apple - Mango'

요소의 추가와 삭제

push(), pop() : 배열의 오른쪽에 요소 추가/삭제

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // x = 5 배열의 마지막에 요소를 추가
var x = fruits.pop() // x = "Kiwi" 배열의 마지막 요소를 꺼냄 LIFO

unshift(), shift() : 배열의 왼쪽에 요소 추가/삭제

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.unshift("Lemon"); // 5 / 첫 번째 요소 앞에 추가
var x = fruits.shift(); // 'Lemon' / 첫 번째 요소를 제거

splice(), delete

splice(start, [deleteCount], [item1, item2, ...])
start : 배열에서 변경을 시작할 인덱스
deleteCount : 시작 인덱스에서 제거할 요소의 수
item1, item2, ... : 배열에 추가할 요소

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.splice(1, 1, "222"); // 두 번째 요소 "Orange"를 "222"로 대체
// ['Banana', '222', 'Apple', 'Mango']

fruits.splice(1, 0, "111"); // 두 번째 요소에 "111"을 삽입
// ['Banana', '111', '222', 'Mango']

delete fruits[1]; // 삭제에 성공하면 true반환. 없는 요소를 삭제해도 항상 true를 반환.
// ['Banana', undefined, '222', 'Mango']

정렬하기, 뒤집기, 채우기, 합치기

sort(), reverse(), fill() - 정렬하기, 뒤집기, 채우기

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // ['Apple', 'Banana', 'Mango', 'Orange'] 정렬하기(사전순 정렬)
fruits.reverse(); // ['Orange', 'Mango', 'Banana', 'Apple'] 순서 거꾸로 뒤집기

var arr = [40, 100, 1, 5, 25, 10];
arr.sort(); // [1, 10, 100, 25, 40, 5] 사전순 정렬

arr.sort(function(a, b) {
            return a - b;
        }
); // [1, 5, 10, 25, 40, 100] 오름차순 정렬
arr.sort((a, b) => a - b); // 람다식 / 정렬 기준인 Comparator를 준다.

arr.sort(
    function() {
        Math.random() - 0.5;
    }
); // [1, 10, 100, 25, 40, 5] shuffle
arr.sort(() => Math.random() - 0.5) // 람다식 / 정렬기준이 일정하지 않으니 계속 바뀜 => 섞인다.

fruits.fill("Kiwi"); // 배열의 모든 요소를 Kiwi로 채운다.

배열 합치기 : concat()

var bigArr = arr1.concat(arr2); // ['Banana', 'Orange', 'Apple', 'Mango', 40, 5, 25, 100, 1, 10]
arr.concat(["Oct", "Nov", "Dec"]); // [40, 5, 25, 100, 1, 10, 'Oct', 'Nov', 'Dec']
var bigArr = arr.concat(arr2, arr3); // 세 개의 배열을 하나로 병합

arr = [22, 20, 10, 7, 5, 3, 1];
newArr = arr.concat([99, 98], ['aaa', 'bbb'])
// [22, 20, 10, 7, 5, 3, 1, 99, 98, 'aaa', 'bbb']

3.4 다차원 배열

다차원 배열은 배열 안에 배열을 넣어서 구현

// 2차원 배열(4 * 5)
var arr2D = [
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
    [1, 2, 3, 4, 5],
];

// 2차원 배열 arr2D의 모든 요소를 콘솔에 출력
for (var i = 0; i < arr2D.length; i++) {
	for (var j = 0; j < arr2D[i].length; j++) {
	  console.log(arr2D[i][j]);
	}
}

// 배열 arr2안에 배열을 넣어서 2차원 배열을 구성
var arr2 = [];

// 5 X 5 배열
for (var x = 0; x < 5; x++)
    arr2[x] = new Array(5); // 길이가 5인 배열을 배열 arr2에 저장

5. 함수

5.2 함수의 오버로딩

arguments 객체를 이용하면, 자바의 오버로딩을 구현할 수 있다.

function subArr(arr, start, end) {
    if (arguments.length == 1) {
        return arr;
    } else if (arguments.length == 2) {
        return subArr(arr, start, arr.length);
    } else if (arguments.length == 3) {
        return arr.slice(start, end);
    }
}

var arr = [0,1,2,3,4,5,6,7];
subArr(arr); // [0, 1, 2, 3, 4, 5, 6, 7]
subArr(arr, 3); // [3, 4, 5, 6, 7]
subArr(arr, 3, 5); // [3, 4]

5.3 함수 - 유효성 검사와 매개변수 초기화

호출 시 인자가 생략될 수 있으므로 if문으로 확인 후 기본값을 넣어주자.
undefined == null → true
undefined === null → false
```
function myFunction(x, y) {
    if (y === undefined)
        y = 0;
}
```

널 체크할 때는 undefined인지 먼저 확인하자.(undefined는 null이 아님)

if (myObj != null && typeof myObj !== "undefined") // 에러
if (typeof myObj !== "undefined" && myObj != null) // OK

// ES6 문법
function add(a = 0, b = 0) {
    // ES5문법 old 방식
    // var a = a || 0; a가 true로 판단되는 값이면 a, false면 0
    // var a = a && 0
    var sum = 0;

    console.log("a = " + a);
    console.log("b = " + b); 

    for (i = 0; i < arguments.length; i++)
        sum += arguments[i];

    return sum;
}

add(undefined, 5);
// a = 0
// b = 0

5.4 함수 - 클로저

코어 자바스크립트
```
var outer = function() {
    var a =1;
    var inner = function() {
        console.log(++a);
    };
    inner();
};
outer();
```
```
var outer = function() {
    var a = 1;
    var inner = function() {
        return ++a;
    }
    return inner();
};
outer(); // 2
outer(); // 2
outer(); // 2
```
```
var outer = function() {
    var a = 1;
    var inner = function() {
        return ++a;
    }
    return inner;
};
var outer2 = outer();
outer2(); // 2
outer2(); // 3
outer2(); // 4
```
- 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함하지 않는다.
  예제1, 2 → 가비지 컬렉팅 대상에 포함
  예제3 → 제외(외부 함수의 지역변수가 가비지 컬렉팅되지 않음, 지역변수를 참조하는 내부 함수가 외부로 전달된 경우에만 유일하게 가비지 컬렉팅되지 않는다.)
- 클로저
  어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

back

전역변수로 선언하면 변수 이름이 충돌될 수 있고, 외부에서 접근 못하게 값을 보호할 필요가 있음

var cnt = 0; // 전역변수라서 변수 이름 충돌 가능성이 있다. 외부에서 접근 가능. 값 보호 필요

function increseCnt() {
    cnt++;
}

increseCnt();
increseCnt();
increseCnt();
console.log(cnt);

지역변수로 선언하면, 변수가 보호되긴 하지만 매번 0으로 초기화됨

function increseCnt() {
    var cnt = 0; // 지역변수. 범위(스코프)는 좁아졌으나 매번 0으로 초기화됨
    cnt++;
}

increseCnt();
increseCnt();
increseCnt();
console.log(cnt); // 에러

변수를 지역 변수로하고, 내부 함수로 변경. 내부 함수라서 외부에서 호출 불가.

function closure() {
    var cnt = 0;

    function increseCnt() { // 내부에서만 사용 가능하다. 외부에서 사용하려면 함수를 return 해주면 된다.
        cnt++;
        console.log(cnt);
    }

    increseCnt();
}

closure();
// increseCnt(); // 에러

내부 함수를 반환하여, 외부에서 호출할 수 있도록 변경

function closure() {
    var cnt = 0;

    return function increseCnt() { // 이름 생략 가능
        cnt++;
        console.log(cnt);
    };
}

var increseCnt = closure(); // 함수를 반환한다.
increseCnt(); // 1
increseCnt(); // 2
increseCnt(); // 3

콜백 함수가 외부 변수를 사용하면 의도와 다른 결과를 얻는다.

for (var i = 0; i < 3; i++) { // var를 let으로 바꾸면 간단히 해결됨
		/* setTimeout : 주어진 함수를 특정 시간 후에 실행하도록 예약한다.(지연 시간 : 밀리초단위)
		   0 밀리초 후에 'console.log(i)'를 3번 실행하는 예약을 한다.
		   i를 읽어오는 시점이 for문을 다 돈 시점이기  때문에 3이 출력되는 것이다. */
    setTimeout(function() {console.log(i);}, 0);
}

이럴 때, 콜백 함수를 클로저로 변경하면 올바른 결과를 얻는다.

for (var i = 0; i < 3; i++) {
		/* 위에서의 문제점을 해결하려면 function으로 한 번 감싸야 한다.
       호출하는 시점에 i값이 x에 복사된다. */
		(function(x) { setTimeout(function() {console.log(x);}, 0) }) (i);
}

다른 방법으로는 배열과 forEach()를 사용하는 것이 있다.

[0, 1, 2].forEach(function(i) {
    setTimeout(function() {console.log(i);}, 0);
});

전역변수로 선언하면 변수 이름이 충돌될 수 있고, 외부에서 접근 못하게 값을 보호할 필요가 있음

var cnt = 0; // 전역변수라서 변수 이름 충돌 가능성이 있다. 외부에서 접근 가능. 값 보호 필요

var increseCnt = function() {
		console.log(++cnt);
}

increseCnt();
increseCnt();
increseCnt();
console.log(cnt);

지역변수로 선언하면, 변수가 보호되긴 하지만 매번 0으로 초기화됨

var increseCnt = function() {
    var cnt = 0; // 지역변수. 범위(스코프)는 좁아졌으나 매번 0으로 초기화됨
		console.log(++cnt);
}

increseCnt(); // 1
increseCnt(); // 1
increseCnt(); // 1
console.log(cnt); // 에러

변수를 지역 변수로하고, 내부 함수로 변경. 내부 함수라서 외부에서 호출 불가.

function closure() {
    var cnt = 0;

    var increseCnt = function() { // 내부에서만 사용 가능하다. 외부에서 사용하려면 함수를 return 해주면 된다.
        console.log(++cnt);
    }
    increseCnt();
}
closure(); // 1
// increseCnt(); // 에러

function closure() {
    var cnt = 0;

    var increseCnt = function() { // 내부에서만 사용 가능하다. 외부에서 사용하려면 함수를 return 해주면 된다.
        console.log(++cnt);
    }
    return increseCnt();
}
closure(); // 1

내부 함수를 반환하여, 외부에서 호출할 수 있도록 변경

function closure() {
    var cnt = 0;

    var increseCnt = function() {
        console.log(++cnt);
    }
    return increseCnt; // 함수 return
}

var increseCnt = closure(); // 함수를 반환한다.
increseCnt(); // 1
increseCnt(); // 2
increseCnt(); // 3

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함하지 않는다.
예제1, 2 → 가비지 컬렉팅 대상에 포함
예제3 → 제외(외부 함수의 지역변수가 가비지 컬렉팅되지 않음, 지역변수를 참조하는 내부 함수가 외부로 전달된 경우에만 유일하게 가비지 컬렉팅되지 않는다.)

클로저
어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

콜백 함수가 외부 변수를 사용하면 의도와 다른 결과를 얻는다.

for (var i = 0; i < 3; i++) { // var를 let으로 바꾸면 간단히 해결됨
		/* setTimeout : 주어진 함수를 특정 시간 후에 실행하도록 예약한다.(지연 시간 : 밀리초단위)
		   0 밀리초 후에 'console.log(i)'를 3번 실행하는 예약을 한다.
		   i를 읽어오는 시점이 for문을 다 돈 시점이기  때문에 3이 출력되는 것이다. */
    setTimeout(function() {console.log(i);}, 0);
}

이럴 때, 콜백 함수를 클로저로 변경하면 올바른 결과를 얻는다.

for (var i = 0; i < 3; i++) {
		/* 위에서의 문제점을 해결하려면 function으로 한 번 감싸야 한다.
       호출하는 시점에 i값이 x에 복사된다. */
		(function(x) { setTimeout(function() {console.log(x);}, 0) }) (i);
}

다른 방법으로는 배열과 forEach()를 사용하는 것이 있다.

[0, 1, 2].forEach(function(i) {
    setTimeout(function() {console.log(i);}, 0);
});

클로저는 자바에서의 게터 세터와 동일 일종의 코딩 패턴? 함수 안에 넣으면 값이 잘못될 일이 없음

4/19(수)

6. 객체

6.1 객체의 생성방법

빈 객체를 생성한 후, 멤버(속성, 함수)를 추가

// var person = new Object();과 동일 -> 굳이? var person = {}; 으로 생성하기
var person = {}; // 빈 객체 생성

// 객체에 속성 추가
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

객체의 생성과 동시에 멤버를 추가

let myObject = {
    firstName : "John",
    lastName : "Doe",
    fullName : function() { // key : value 쌍으로 저장한다. function도 저장 가능
        return this.firstName + " " + this.lastName;
    }
};

6.2 생성자로 객체 생성하기

생성자를 정의하면 객체를 편리하게 생성할 수 있다.

function Person(name, age) { // 생성자 Person 선언. 생성자의 첫 글자는 대문자로
    this.name = name; // 여기서 this는 (앞으로 생성될) 객체 자신을 의미
    this.age = age;
}

var obj = new Person("david", 10);
var obj2 = new Person("wendy", 20);

obj.toString = function() {
    return this.name + this.age; // this를  꼭 붙여야함
}

obj.toString(); // 'david10'
obj2.toString(); // '[object Object]' // JS는 객체 공유X 다 개별임 그래서 프로토타입씀

6.3 객체의 속성(멤버) 삭제하기 - delete

delete 연산자로 객체의 속성을 삭제할 수 있다.(물려받은 속성은 삭제불가)

var obj = {}; // 빈 객체

// 속성을 추가
obj.name = 'david';
obj.age = 10;

// toString()추가 - 자바의 오버라이딩
obj.toString = function() {
    return this.name + ", " + this.age;
}

obj.toString(); // 'david, 10'
delete obj.name; // 객체 obj에서 속성 name을 삭제
obj; // {age: 10, toString: ƒ}

6.4 instanceof와 typeof

instanceof를 통해 객체가 어떤 생성자에 의해 생성되었는지 확인 가능

function도 object이다.

var obj = new Object();
var p = new Person("david", 10);
var s = new String(); // var str = 'abc'로 쓰기
var f = new Function(); // var f = function() {}; 와 동일

typeof obj // 'object'
typeof p   // 'object'
typeof s   // 'object'
typeof f   // 'function'

obj instanceof Object // true
p instanceof Object // true
s instanceof Object // true
f instanceof Object // true

obj instanceof String // false
p instanceof Person // true
s instanceof String // true
f instanceof Function // true

----

typeof new Object() // 'object'
typeof new Person("david", 10)   // 'object'
typeof new String()   // 'object'
typeof new Function()   // 'function'

str = 'abc';
strObj = new String('aaa');

typeof str; // 'string'
typeof strObj; // 'object'

str instanceof String    // false 객체가 아니기 때문에 
strObj instanceof String // true

6.5 같은 타입의 객체라도 함수를 공유안함.

같은 생성자로 생성한 객체라도 서로 다른 함수를 가질 수 있다.

이렇게 공유가안 되는 문제를 prototype이라는 공유 객체를 통해서 해결.

obj.getName = function() {
    return this.name;
}

obj.getName(); // 'david'
obj2.getName(); // 에러. obj2에는 getName()이 없음

for (var prop in obj)
    console.log(obj[prop]); // 속성이 3개 Person {name: 'david', age: 10, getName: ƒ}

for (var prop in obj2)
    console.log(obj[prop]); // 속성이 2개 Person {name: 'wendy', age: 20}

this

객체 자신 ← 대부분 이거임

window(브라우저)

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let p1 = Person('ccc', 20);
// new를 쓰면 새로운 객체가 만들어지고 주소가 반환되는데 new를 안 쓰면 객체가 안 만들어짐
let p2 = Person('ccc', 20); 
// 객체가 없으면 window이기 때문에 window에 name과 age가 추가됨
window.name; // '방채민'
window.age; // 22

6.6 prototype, proto, constructor

객체는 자신을 생성한 생성자의 prototype에 대한 참조인 __proto__와 constructor 속성을 자동으로 물려받는다.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Object.prototype === obj.__proto__; // true

var p = new Person("david", 10);
Person.prototype === p.__proto__ // true

var s = new String();
String.prototype === s.__proto__ // true

var f = new Function();
Function.prototype === f.__proto__ // true

obj.constructor == Object; // true
p.constructor == Person; // true

6.7 생성자의 prototype을 이용한 공유 함수

prototype = 공유객체

생성자의 prototype에 함수를 추가하면 객체간 함수 공유 가능
자바스크립트에서의 객체는 동일한 생성자를 사용해서 생성해도 모든 걸 개별적으로 가지고 있다. 객체마다 메서드를 일일히 집어넣을 수 없기 때문에 공통적으로 사용할 수 있는 객체가 필요해 프로토타입을 사용하는 것이다. static 처럼 공유하게 하고 싶은 걸 prototype에 넣으면 된다.
1. 모든 객체는 멤버에 __proto__를 가지고 있다.
1. 모든 함수는 멤버에 prototype을 가지고 있다.
멤버를 찾는데 객체에 없으면 공유 객체를 뒤진다. 공유 객체에도 없으면 Object를 뒤짐
Person 객체 → Person.prototype(공유 객체) → Object
```
function Person(name, age) {
    this.name = name;
    this.age = age;
}

var obj = new Person("david", 10);
var obj2 = new Person("wendy", 20);

// 생성자의 prototype에 함수 getName()을 추가. 이제는 p1 p2가 다 공유한다.
Person.prototype.getName = function() {
    return this.name;
}
// 위와 동일
obj.__proto__.getName = function() {
    return this.name;
}

obj.getName(); // 'david'
obj2.getName(); // 'wendy'
```

p.constructor; // p의 생성자. constructor 호출 시 생성자가 나온다.
ƒ Person(name, age) {
    this.name = name;
    this.age = age;
}

p.__proto__ == Person.prototype; // true

6.8 객체를 의미하는 this

this는 기본적으로 함수를 호출하는 객체를 의미. 상황에 따라 달라짐.

전역 범위에서 this는 window(브라우저)를 가리킨다.

alert("abc");
this.alert("abc");   // this는 window를 의미
window.alert("abc");
console.log(this);   // window 객체를 의미

// 새로운 객체 생성
var p = new Person("Tom", 33); // Person {name: 'Tom', age: 33}
// 새로운 객체가 생성되지 않음
var p2 = Person("Tim", 22); // undefined

p2;        // undefined
this.name; // 'Tim'
this.age;  // 2

var p3 = {};
var p4 = new Object();

// call과 apply는 문법만 다를뿐 동일하다.
Person.call(p3, "Sebin", 11); // {name: 'Sebin', age: 11}
Person.apply(p3, ["Yebin", 9]); // {name: 'Yebin', age: 9}ㅇ

evnet 함수 내에서의 this는 이벤트가 발생한 요소(element)를 가리킨다.
단, 이벤트 함수를 람다식으로 작성할 시 this는 전역 객체 window를 가리킨다.
```
h1.onclick = () => alert(this); // this = window
h1.onclick = function() {
    alert(this); // h1
}
```

6.9 call(), apply()로 this의 대상 변경

call(), apply(), bind()를 사용하면 this가 가리키는 대상을 변경할 수 있다.

이미 생성되어있는 객체에게 적용할 때 call, apply를 사용한다.

function Person(name, age) {
    this.name = name;
    this.age = age;
		console.log("[" + this.name + ", " + this.age + "]");
}

var p = new Person("Tom", 33); // 새로운 객체 생성
var p2 = Person("Tim", 22); // 새로운 객체가 생성되지 않음

Person.call(p3, "Sebin", 11); // p3 = new Person("Sebin", 11);와 동일한 의미
Person.apply(p4, ["방채민", 22]]);

6.10 중첩된 함수에서의 this

함수가 중첩되면 this의 의미가 달라진다.

객체의 프로퍼티 함수 내에서의 this는 그 객체를 가리킨다. but 두 번 이상 중첩으로 넘어가면 전역 객체(window)를 가리킨다.

var myObj = {
    func1 : function() {
        console.log(this); // myObj 객체의 프로퍼티 함수 내에서의 this는 그 객체를 가리킴
        var func2 = function() {
            console.log(this); // window
            var func3 = function() {
                console.log(this); // window
            } ();
        } ();
    }
}

myObj.func1();

<해결방법>

this = this ← 별도의 변수에 저장한다.

bind()

람다식

별도의 변수에 this의 값을 저장해 해결하는 방법

var myObj2 = {
    myFunc : function() { // myObj2의 멤버 key : myFunc value : function
        var that = this; // this가 멀쩡할 때 변수에 저장한다.
        var myFunc2 = function() {
            console.log("that : " + that); // that은 myObj
            console.log("this : " + this); // this는 window
        } ();
    }
}

6.11 HTML과 jQuery에서의 this

this는 기본적으로 함수를 호출하는 객체를 의미. 상황에 따라 달라짐

<body>
<!-- this는 <h1>을 가리킨다. -->
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

<!-- this는 <span>을 가리킴 -->
<span onmouseover="this.style.color='red'"
        onmouseout = "this.style.color='blue'">
    Mouse over me!
</span>

// this는 <p>를 가리킴
$("p").click(function(){
    $(this).slideUp();
});

6.12 객체의 속성에 접근 제한하기

생성자의 변수를 지역 변수로 선언하여 접근을 제한, 대신 getter를 제공

function Person(name, age) {
    this.name = name; // 여기서 this는 p1
    this.age = age;
}
--------------------------------
let p1 = new Person("방채민", 44);
p1.name; // '방채민'

js는 접근제어자가 없기 때문에 iv → lv로 변경해서 보호한다.

function Person(name, age) {
    // this.name = name;
    // this.age = age;
    var name = name; // 지역변수로 선언
    var age = age; // 지역변수로 선언

    this.getName = function() {
        return name;
    }

    this.getAge = function() {
        return age;
    }
}
--------------------------------
var p2 = new Person("방채민", 22);
p2.getName(); // '방채민'
p2.getAge();  // 22

p.name; // 에러. 지역변수에 접근할 수 없음
p.age;  // 에러. 지역변수에 접근할 수 없음

6.13 두 객체간의 상속관계 맺어주기

Person 객체와 Manager 객체를 조상 자손 관계로 맺어주는 방법

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Manager(dept, name, age) {
    Person.call(this, name, age); // 조상의 생성자를 호출
		this.dept = dept;
}

var m = new Manager('Sales', 'adsf', 12);
m.age; // 12
m instanceof Person // false

// Manager.prototype = Person.prototype; // 잘못된 방법
Manager.prototype.__proto__ = Person.prototype; // 부모 자식 상속 관계 맺어주기

7.1 DOM

= (Document Object Model)

브라우저는 HTML 문서를 읽어서 DOM을 구성한다.
```
<!DOCTYPE html>
<html lang="en">
<head>
	<title>My title</title>
</head>
<body>
	<a href="">My link</a>
	<h1>My header</h1>
</body>
```
브라우저가 HTML을 읽어서 하나하나 객체를 생성해 계층구조로 만든다. → 이게 돔트리
DOM = html읽어서 객체를 만들어 객체들간의 관계를 그린 것

CSSOM
디자인(css) 관련된 트리

Render Tree = DOM + CSSOM

(data뼈대) + (디자인)

브라우저가 Rener Tree를 보고 영역을 잡는다.

레이아웃

페인트

좌표, 사이즈 계산

DOM에서 요소(element) 찾기

document.getElementById(id) // id로 찾기
document.getElementByTagName(name) // Tag로 찾기
document.getElementByClassName(name) // class로 찾기
document.getElementsByName(name) // name으로 찾기
document.querySelectorAll("셀렉터") // CSS selector로 찾기
[참고] document.querySelector("셀렉터") // 한 개만 반환

DOM에서 요소(element) 변경하기

element.innerHTML = "새로운 내용";
element.style.CSS속성 = 값;     // CSS 속성 변경
element.setAttribute(속성, 값); // element.속성 = 값;
var attr = element.getAttribute("속성"); // 속성 읽어오기

<h1 id="click" onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

const h1 = document.getElementById('click');
h1.innerHTML = '방채민';
h1.style.color = 'blue';
h1.setAttribute(name, 'nametest');
h1.getAttribute('id'); // 'click'

실습1 - window.onload

: html 리소스가 모두 로드되었을 때 발생되는 이벤트

window.onload = function() {
    var h1Tag = document.getElementById('header0'); // id가 header0인 요소를 가져온다.
    var h1Tags = document.querySelectorAll('h1');

    h1Tag.innerHTML += '- first';

    for (i = 0; i < h1Tags.length; i++) {
        h1Tags[i].innerHTML += '-' + i;
        h1Tags[i].style.border = '2px solid red'; // 테두리 2px, 빨간색으로
        h1Tags[i].style.color = 'orange'; // 글자색을 orange
        h1Tags[i].style.backgroundColor = 'yellow';
    }
}

실습2 - createElement, createTextNode

: 노드 직접 생성

직접 요소 생성

text로 생성(문자열)
→ 2번으로 생성하는 거에 익숙해지는 게 좋음

var h1 = document.createElement('h1'); // 노드를 직접 생성 h1 태그 생성
var txtNode = document.createTextNode('Hello');

h1.appendChild(txtNode); // h1태그에 text node를 추가
document.body.appendChild(h1); // h1태그를 body 태그에 추가

// 위의 4줄이 아래 1줄과 동일
// document.body.innerHTML = '<h1>Hello</h1>';

실습3 : 사용자 정의 속성

사용자 정의 속성은 setAttribute(), getAttribute()로 읽고 쓰기를 해야 한다.

window.onload = function() {
    var img = document.createElement('img');

    img.setAttribute('src', '../jokebear.png'); // img.src = "cat.jpg"
    img.setAttribute('width', 300);             // img.width = 300;
    img.setAttribute('height', 200);            // img.height = 200;
    img.setAttribute('id', 'img');

    // 사용자 정의 속성은 setAttribute(), getAttribute()로 읽고 쓰기를 해야 한다.
    img.setAttribute('data-prop', 100); // img.data-prop = 100;는 불가

    document.body.appendChild(img); // 노드를 DOM에 연결
}

DOM에서 요소(element) 순회하기(navigation)

firstChild, fistElementChild : 첫 번째 자식 노드에 접근
lastChild, lastElementChild : 마지막 자식 노드에 접근
nextSibling, nextElementSibling : 내 다음 형제 노드에 접근 가능
previousSibling, previousElementSibling : 내 이전 형제 노드에 접근 가능
parentNode : 요소의 부모 노드

7.2 이벤트(event)

HTML의 요소에 어떤 일이 발생하는 것이 ‘HTML이벤트(event)’이다.

<자주 쓰이는 이벤트들>

이벤트(속성)	설명
onload	브라우저가 HTML 페이지의 로딩을 마쳤을 때
onclick	사용자가 HTML 요소를 클릭했을 때
onmouseover	마우스가 HTML 요소의 위에 올라갔을 때
onmouseout	마우스가 HTML 요소의 위에서 밖으로 벗어났을 때
onkeydown	사용자가 키보드를 눌렀을 때
onchange	HTML 요소가 변경되었을 때

이벤트 모델

이벤트가 발생 시, 수행될 작업을 작성하는 것을 ‘이벤트 처리’라고 한다.

문서 객체(document object)에 이벤트 처리를 연결하는 방법(이벤트 모델)

<DOM Level 0> - old

기본 이벤트 모델(고전 이벤트 모델)

인라인 이벤트 모델

h1.onclick = function() {} // 1개만 대입 가능

<DOM Level 2> - new

표준 이벤트 모델

IE 이벤트 모델

addEventListener() // 여러개 등록 가능

기본 이벤트 모델

문서 객체(document object)의 이벤트 속성에 이벤트 처리 함수를 연결

연결을 제거할 때는 이벤트 속성에 null을 저장

window.onload = function() {
    var header = document.getElementById('d');

    // header.onclick = click;
    header.onclick = function() {
        alert("방채민2");
    }
    // header.onclick = null; // 연결된 이벤트 처리 함수를 제거
}

function click() {
    alert("방채민");
    console.log("방채민");
}ㄴ

예외가 발생되면 catch 블럭으로 들어오고 예외의 대한 정보를 출력하는 것처럼
클릭 시 클릭 이벤트가 발생하고 e에는 이벤트에 대한 정보가 들어있다. 이 정보들을 이용해서 코딩 가능하다.

<h1 id="header">Click me!!!</h1>

$0.onclick; // null

$0.onclick = function(e) { // e에는 이벤트에 대한 정보가 들어있다. 
    console.log(e); 
    console.log(e.srcElement); // 이벤트 소스(제일 중요) 어디서 이벤트가 발생했는지 알 수 있다. target이랑 비슷함
    console.log(e.target);
    console.log(e.pointerType); // mouse
}

$0.onclick = function(e) {
    e.srcElement.innerHTML = 'Chaemin'; // h1이 Chaemin으로 바뀐다.
}

dir($0); // $0 = h1 태그

on으로 시작하는 게 다 이벤트 속성임. 내리다보면 onclick이 null이 아닌 것을 알 수 있다.

이벤트의 초기값은 null이다. 연결된 함수가 없어서 아무런 동작이 없는 것이지 이벤트는 항상 일어나고 있다. 여기서 연결된 함수를 이벤트 핸들러(이벤트가 발생하면 처리하는 애)라고 한다.

인라인 이벤트 모델

태그에 직접 이벤트 속성을 지정(this는 태그 자신을 의미)
이 방식은 잘 사용하지 않음 (포인터, mouseover 제외하고는..)
```
<h1 id="header" onclick="alert(this);">Click me!!!</h1>
// function() { alert(this); } function() {} 생략된 것
```

Uploaded by N2T