Dust

let num = function(a){
  return a + 10;
}

기본 함수가 있을 때 화살표 함수는

let num = (a) => { return a + 10 };​

function을 없애고 좀 더 간단히 쓸 수 있음

더 간단히도 쓸 수 있음 값이 하나거나 코드가 한 줄 일 때

let num = a => a + 10;

여러개일 땐 중괄호를 써줘야함

예시!

let arr = [1,2,3,4];
arr.forEach((v) => {
    console.log(v + 10);
})
// 11, 12, 13, 14

this 값 재정의 x (바깥에 있던 this 값을 내부에서 그대로 사용함)

document.getElementById('button').addEventListener('click', function(e){
	this;
    // 여기서 this란 e.currentTarget
});



// arrow function으로 변경시
document.getElementById('button').addEventListener('click', (e) => {
	this;
    // 여기서 this란 window이기 때문에 e.currentTarget을 쓰는것이 좋음
});

// 위에서 this를 쓰면 여기서 this 쓰는것과 같음(arrow function이기때문)

arrow function object 안의 함수

let object = {
  num : () => {
    return this;
    // arrow function이기때문에 window 출력
  }
}

object.num();

헷갈리는 this를 알아보자..,

객체나 함수 안에서 this를 썼을 때

// this를 그냥 쓰거나 일반 함수에서 쓰면 window를 뜻함

let thisObject = {
    name: 'dust',
    test: function(){
        console.log('함수 내 this 테스트');
        // 메소드 안에서 this를 쓰면 thisObject를 뜻함(속해있는 object)
        console.log(this);
    },
    data : {
        test2: function(){
            // data를 뜻함(속해있는 object)
            console.log(this);
        }
    }
}

addEventListener 안에서 this를 썼을 때

modal.addEventListener('click', function(e){
    console.log('e.target: ',e.target);
    console.log('e.currentTarget: ',e.currentTarget);
    console.log('this: ',this);
    if(e.target == e.currentTarget){
        modal.classList.toggle('modal-open');
    }
})

e.currentTarget과 this는 같다(이벤트가 붙어있는 곳을 this)

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach(function(v){
            console.log(v + '먼지');
            // window
            console.log(this);
        })
    }
}
object.test();

화살표 함수 사용시

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach((v) => {
            console.log(v + '먼지');
            // 위에 있는 this 값을 물려씀, 그니까 object
            console.log(this);
        })
    }
}
object.test();

// html 태그 생성
// 첫번째 방법
const div = document.querySelector('#create');
const p = document.createElement('p');
div.appendChild(p);
p.innerText = '반가워';

// 두번째 방법(요즘엔 이렇게 많이 쓰인다고 함)
let div2 = `<p>안녕</p>`;
document.getElementById('create2').insertAdjacentHTML('beforeend', div2);

const width = window.innerWidth;
const height = window.innerHeight;
// 브라우저의 width, height 값

스크롤을 얼마나 했는지 확인

window.scrollY

일반 div박스나 다른 요소의 스크롤을 확인하고 싶을 때

const section = document.querySeletor('section');
let sectionHeight = section.scrollHeight; 
// 스크롤 포함 실제 높이, 페이지가 로드완료되야 정확함(body태그 밑에 써주는게 좋음)
let scroll = section.scrollTop;
// 하면 페이지 내 scroll이 있는 section 박스의 scroll이 어디인지 확인가능
// 위에서 얼마나 내렸는지 알려주지만 전체적으로 내린것이 아님
let 실제setion높이 = section.clientHeight;
// 실제 section의 높이값

원하는 위치로 강제 스크롤

window.scrollTo(x, y);
window.moveTo(x, y);

원하는 위치로 이동 후 설정한 x, y 좌표 말고 움직일 수 없음

현재 위치에서부터 어디까지 추가로 이동

위와 마찬가지로 움직일 수 없음

window.scrollBy(x, y);
window.moveBy(x, y);

function test(){
  return 1234;
  // return 밑에 있는 코드들은 실행되지 않음
}

let number = test();
// 값 확인해보고 싶으면 변수에 넣어서 확인 가능
console.log(number);
// 1234