Dust

var name = '김';
var num = 20;
var title = `안녕하세요 ${name} 입니다`;

function fn(문자들, 변수1, 변수2){
  console.log(문자들);
  console.log(변수1, 변수2);
}

fn`안녕하세요 ${name} 입니다 ${num}`
// 문자(텍스트)를 배열로 만들어 반환함
// 문자들 출력시
// ["안녕하세요", " 입니다"];
// 변수 출력시 ${name} , ${num} 안의 값 출력
// 김, 20

글자의 순서를 변경하고 싶을 때

ex) ["안녕하세요", "입니다"]  를 ["입니다", "안녕하세요"] 로 변경

function fn(문자들, 변수1, 변수2){
  console.log(문자들[1], 문자들[0]);
}
// 입니다, 안녕하세요

코딩애플

Template literals / tagged literals 연습문제 다시 공부

let arr = ['hello', 'world'];
console.log(arr);

let arr = ['hello', 'world'];
console.log(...arr);

var text = 'hello';
console.log(text);

let text = 'hello';
console.log(...text);
// 문자 해체
// console.log('h', 'e', 'l', 'l', 'o');

활용!

- arr복사 , 합치기 할 때 유용함

- Deep copy(복사한 array, object에서 독립적인 값)

var a = [1,2,3];
var b = [4,5];

var c = [...a, ...b];
console.log(c);
// [1,2,3,4,5];

shallow copy(참조에 의한 할당으로 같은 데이터(주소)를 가짐

var a = [1,2,3];
var b = a;
// a의 값을 그대로 복사

a[3] = 4;
// a 값의 3번째 index의 4 값을 추가하게 되면
// b는 a를 그대로 복사했기 때문에 추가하지 않아도 3번째 index에 4가 추가됨
// a와 b 모두 [1,2,3,4];

Deep copy(값만 복사해서 사용 / 다른 주소를 가짐)

var a = [1,2,3]; 
var b = [...a];

a[3] = 4;

// a는 [1,2,3,4];
// b는 [1,2,3];  a에서 독립적인 값을 가질 수 있음

object 복사도 같음

var o1 = { 
  a: 1,
  b: 2
};

var o2 = {
  ...o1,
  // 복사
  c: 3
}

console.log(o2);
// { a: 1, b: 2, c: 3 }

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);