[DOM_3]Javascript과 DOM 심화(Event)

JS(Browser) 오늘 배울 내용

ES

• callback Function

  • funtion(){}

  • () => {}

  • this

• function

DOM(+BOM)

• HTML 요소들을 직접 만들기

• Event

 

 

FUNCTION

 // 1. default args
    function defaultArgs(a=1, b=2) {
      console.log(a + b)
      // return a + b
    }

    defaultArgs()                      3
    defaultArgs(20, 30)              30

 

 

    // 2. JS 함수의 인자 개수
    function wrongArgCount(a, b) {
      console.log(a, b)
    }

    wrongArgCount()                  undefined undefined
    wrongArgCount(1)                1 undefined
    wrongArgCount(1, 2, 3)          1 2

• JS는 인자개수를 신경쓰지 않는다.
• 인자의 갯수가 남아도 동작하고, 갯수가 넘어도 동작한다.

    function noArgs() {
      console.log('no args..')
    }

    noArgs(1, 2, 3, 4, 5, 6)            no args..

• 함수의 인자 개수가 없는 경우에, 6개의 인자를 넣는데도 오류가 안뜨고 그냥 함수가 실행된다.

 

 

    // 3. JS rest operator
    function restOperator1(...numbers) {
      console.log(numbers)
    }

    restOperator1(1, 2, 3, 4, 5)            [1, 2, 3, 4, 5]

 

 

    function restOperator2(a, b, ...numbers) {
      console.log(a, b, numbers)
    }

    restOperator2(1, 2, 3, 4, 5)            1 2 [3, 4, 5]

 

 

 

    // 4. JS spread operator
    function spreadOperator(a, b, c) {
      console.log(a, b, c)
    }

    let numbers = [1, 2, 3]
    spreadOperator(numbers[0], numbers[1], numbers[2])          1 2 3
    spreadOperator(...numbers)                                            1 2 3

    numbers = [1, 2, 3, 4]
    spreadOperator(...numbers)                                            1 2 3

 

 

 

    // 배열 합치기
    let newNumbers = [0, ...numbers, 5]

    console.log(newNumbers)                                    0 1 2 3 4 5

 

 

    // copy.copy

    newNumbers = numbers                      포인터만 넘겨진다(가리키는 것)
    newNumbers = [...numbers]                   1차원 카피만 지원

 

 

 

array에서 사용가능한 Helper Method

• map, forEach, filter 뒤에는 함수를 실행하는 함수() 가 아니라 함수 그 자체가 와야한다.
• 콜백함수란 인자로 넘어간 함수가 내가 지금 당장 실행하는게 아니라 다른 누군가가 때가 되면 실행되는 함수

1. forEach : 주어진 배열에 있는 각 요소에 대해 오름차순으로 한번씩 실행한다.

const image = [
	{ height: 10, width: 30 },
 	{ height: 20, width: 90 },
  	{ height: 32, width: 12 },
]
const area = [ ]

image.foreach(function(img){
	area.push(img.height * img.width)
})

area                [300. 1800, 384]

• forEach의 인자가 함수이다. =콜백함수(callbackfunction)
• 콜백함수 안에는 받을 매개변수도 포함되어 있다.
• forEach는 for문을 더 쉽게 쓰기가 가능하고 바로 값을 하나씩 area에 넣을 수 있다.

# 아래와 활용 할 수 있다.

const posts = [
	{id: 23, title: 'Daily JS News'},
    {id: 23, title: 'Code Rdfactor City'},
    {id: 23, title: 'The Brightest Rudy'},
]

posts.forEach(function(post){
	console.log(post)
    console.log(post.id)
    console.log(post.title)
})

 

 

let sum = 0

const newNumbers = [1, 2, 3]

nuwNumbers.forEach(function(number){

    sum += number

})

>sum

<6

정리) numbers의 각 요소를 number 자리에 넣고, 자머지는 알아서 하라는 뜻이다. 리턴이 없다.

 

+ let sum = 0

[1, 2, 3].forEach(function{})

이렇게 쓰면 undefined Error쓴다. 여기서는 첫째줄 뒤에 자동으로 ; 들어가지 않는다.

 

 

 

2. map : 내열 내의 요소에 대해 주어진 callback 함수를 실행하며, 그 함수의 return 값을 요소로 하는 새로운 배열을 만들어 준다. 이 때 리턴 값은 원본을 변화시키기 않는다.

const numbers = [1, 2, 3]
numbers.map(function(num){
	return num * 2
})                               [2, 4, 6]

numbers                          [1, 2, 3]


const double = numbers.map(function(num){
	return num * 2
})

double                            [2, 4, 6]

 

python의

list(map(int, ['1', '2', '3']) 은

JS의

['1', '2', '3'].map(Number) 과 같다.

 

콜백함수 실행 시 아래와 같이 사용하면 불편하다.

const numbers = [0, 9, 99]

function addOne(number) {

    return number + 1

}

const newNumber1 = number.map(addOne)

이렇게 하면 [1, 10, 100]이 출력 되긴 하는데 굳이 귀찮게 따로 분리할 필요가 있을까? 그래서 인자로서의 함수를 포함시켜 한번에 적자

 

const newNumber2 = [0, 9, 99].map(function(number) {

    return number + 1

})

정리) [0, 9, 99]를 순회하며, 각 요소를 (number) 자리에 넣는다. 그리고 리턴된 값을 새로운 배열에 넣고 다 돈 후에 마지막에 리턴을 한다.

 

 

제곱근을 구하여 새로운 배열을 만들기

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

 

 

배열 속 객체를 재구성하기

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

var reformattedArray = kvArray.map(function(obj){ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

 

 

인자를 받는 함수를 사용하여 숫자 배열 재구성 하기

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

 

 

string에 map을 사용해서 각 문자의 ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

string.charCodeAt(index)

- index에 해당하는 문자의 unicode 값을 리턴

 

 

querySelectorAll을 사용하여 수집된 객체들을 수회 처리하는 법

var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});

 

+

// 아래 라인을 보시면...
['1', '2', '3'].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [1, NaN, NaN] 입니다.

// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
// 배열의 값, 값의 인덱스, 그리고 배열
// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다.
// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.

// 위와 같지만 더 간단한 화살표 표현식
['1', '2', '3'].map(str => parseInt(str));

// 더 간단하게 해결할 수 있는 방법
['1', '2', '3'].map(Number); // [1, 2, 3]
// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

 

 

 

3. filter : callback 함수의 테스트를 통과하는 모든 요소를 모아서 새로운 배열로 반환한다.

#아래의 요소들 중에 야채만 고르고 싶다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

 

const products = [
	{name: 'cucumber', 'vegetable'},
	{name: 'banana', 'fruit'},
	{name: 'carrot', 'vegetable'},
]

const veget = products.filter(function(pord){
	return pord.type === 'vegetable'             //이 부분이 true인 요소만 반환한다
})

veget
< 야채인 것만 출력된다

 

const odds = [1, 2, 3].filter(function(number){

    return number % 2

})

정리) 각 요소를 number 자리에 넣고, 각 리턴이 true 인 요소들만 모아서 새로운 배열로 리턴한다.

 

 

 

작은 값 걸러내기

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

 

 

JSON에서 모효한 항목 거르기

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID); 
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries); 
// Number of Invalid Entries = 5

isNaN(value)

-  value 검사할 값을 입력

- 매개변수가 숫자가 아니면 true, 숫자이면 false를 반환

- 12.12 : 숫자니 false

- '12.12' :  따옴표로 감쌌지만, 숫자라 false

- 'Not a Number' 는 숫자가 아니라 true

- 5*7은 숫자이니 false를 반환

- '1*5' : 따옴표 안에 문자가 있으므로 숫자가 아닌 것으로 보고 true

 

 

 

배열 내용 검색

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

arry.prototype.indexOf

문자열의 위치를 반환한다.

var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

arr.indexOf(searchElement[, fromIndex])

arr - 배열

searchElement - 배열에서 찾을 요소

fromIndex - 검색을 시작 할 색인. 인덱스가 배열의 길이보다 크거나 같은 경우는 -1이 반환되고 배열이 검색되지 않음. 제공된 색인 값이 음수면 배열의 끝에서 부터 offset 값으로 사용되고 배열의 검색 순서는 앞에서 뒤로 검색된다. 계산 된 인덱스가 0보다 작으면 전체 배열이 검색된다. 인덱스가 발견되지않으면 -1이 리턴된다.

+ 엄격한 동등성(===)을 사용하여 비교한다

 

 

toLowerCase()

문자열을 소문 자로 반환한다. ex) string.toLowerCase()

 

toUpperCase()

문자열을 대문자로 반환한다. ex) string.toUpperCase()

 

 

 

 

4. reduce : 배열의 각 요소에 대해 callback 함수를 실행하고, 하나의 결과 값을 반환단다.

const tests = [90, 90, 80, 95, 79]

const sum = tests.reduce(function(total, test){
    return total + test
})                               // total은 tests의 첫번째 요소가 초기값이 되고 인덱스는 1부터 돈다.
sum                              434


tests.reduce(function(total, test){
	return total + test
}, 10000)                        // 이경우는 1000이 초기값으로 total로 들어간다.

MDN 정리)

arr.reduce(callback(acc, element, index, array), initialValue)

• initialValue 가 있으면 acc = initialValue
• initialValue 가 없으면 acc = arr[0]

 

 

 

5. find: 배열에서 콜백함수를 만족하는 첫번째 요소의 값을 반환하자. 만족하는 값이 없으면 undefined 이다.

 

 

 

6. some: 배열 안의 어떤 요소라도 판별함수(콜백에서 특정 조건을 만족)를 통과하는지 테스트 하는데 하나라도 통과하면 true를 리턴한다. 빈배열을 호출하면 false이다.

 

 

 

7. every: 배열 안의 모든 요소가 판별함수를 통과해야 true이다. 빈배열로 호출하면 true이다.

 

 

 

this

this는 무조건 어떤 object객체를 지칭한다.

1. method란 객체안에 정의된 함수이다.('.methodname()'으로 실행되는 함수)

2. function는 method가 아닌 모든 함수이다.

(원래는 function안에 method가 포함되지만, 이해를 위해 위의 2번과 같이 생각하자.)

 

function (){} 정의 할 때, this는 window가 뜬다.(99%)

this가 window가 아닌경우는 2가지 뿐이다.

1. method 안의 this

2. 생성자 함수 안의 this

 

const obj = {
    name: 'obj',
    method1: function(){
        console.log(this)
    },
    objInObj: {
        name: '010',
        oioMethod:function(){
            console.log(this)
        }
    },
    arr: [0,1,2],
    newArr: [],
    method2 () {
        this.arr.forEach(
            function(number) {
                console.log(this)
            }.bind(this)
        )
    }
}

• 첫번째와 두번째 this는 method 안에 있기 때문에 obj이다.
• 그러나 세번째인 forEach안의 this는 method가 아니라서 window를 기리킨다.
• 이때 뒤에 .bind(this)를 추가하면 obj를 가리킨다.

const obj = {

객체를 하나 만듬

 

name: 'obj'

문자열 넣음

 

method1 : function() {           =  method1 () {     (function 생략해도된다)

메서드넣음. 즉, 함수를 넣음. 함수가 value 자체임. 함수는 실행을 바로 하는게 아니다.

obj.method1()    => obj의 메서드를 실행(괄호) / 객체안에 정의된 함수.

 

첫번째 this는 obj가 나온다

obj.objInObj.ouoMethod 안의 this는 objInObj이다.

즉, method 안의 this는 해당 method가 정의된 객체이다.

 

method2에서는 arr라는 리스트와 newArr라는 빈리스트를 만든다. 

method2안의 this는 obj이다. 따라서 method 2 안에서 arr 접근하려면 this.arr이다.

 

그런데 forEach안에 this는 window가 나온다. 이 떄의 this는 method안의 this가 아니다. this가 포함된 함수는 .함수로 실행이 불가능하다. bind는 window까지 가지말고 바로 위의 obj가 this라고 알려주는거다.