[TIL] object, reference, ES6, DOM

오늘은 열심히 자바스크립트 공부를 했다.
오늘은 되게 정말 모르는데 중요하다고는 하다던데 근데 모르는 것들을 많이 배운 것 같음?

---

객체의 프로퍼티명

let difficult = {
  'my name': 'boong',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

스페이스, 특수문자($제외)가 있는 프로퍼티명은 ‘’따옴표가 필요

---

객체와 reference

문자형 string의 경우

const a = '안녕';
const b = '안녕';
console.log(a === b);
// true

a와 b는 같은 문자를 담고 있으니 true로 도출됨

const a = '안녕';
const b = a;

위와 같은 경우, a와 b는 같은 문자열을 담고 있는 다른 변수가 됨 복제

객체의 경우

const hiObj = { 
  name: '안녕' 
};

const helloObj = {
  name: '안녕'
};

console.log('객체비교 =>', hiObj === helloObj);

// 객체비교 ==> false

객체를 변수에 할당할 때, 변수는 객체를 담고 있는 것이 아닌, 객체가 담긴 어느 메모리의 reference를 저장하는 것!

1. 두 객체를 따로따로 만들었으니 두 개의 다른 reference가 생겨남.
2. 이 reference 들은 주소가 서로 다르니 비교연산자엔 false가 나옴

const hiObj = { 
  name: '안녕' 
};

const helloObj = hiObj;

객체의 경우 복제가 되지 않고, hiObj가 참조하고 있는 값을 그대로 helloObj도 참조하게 됨
= 두 변수가 같은 것을 바라보고 있다는 뜻

---

✨ arrow function

실행 내용 딱히 없이 return만 하는 함수라면 return과 중괄호 생략 가능

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

💖 언제 생략 가능한건지 헷갈렸는데 이제 기억하자!

arrow function이 많이 사용되는 경우 : callback 함수로 사용할 때

callback 함수
= 인자로 전달되는 함수

---

익명함수 = 일회용 함수

(function () {
    // block 
})();

끝에 바로 호출해주는 ()를 넣는다

---

string method (ES6)

startsWith()

해당 값으로 시작하면 true 반환

endsWith()

해당 값으로 끝나면 true 반환

includes()

해당 값을 포함하면 true 반환

const email = 'yealee.kim87@gmail.com';

console.log(email.startsWith('ye')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('@gmail')); // true

repeat()

'#'.repeat(3);

// Output : ###

---

변수로 객체의 키를 접근하기

객체의 키값으로 변수를 쓸 수도 있다 → [] 사용

const information = {
  name: '김개발'
}

const verb = 'developes'
const project = 'facebook'

information[verb] = project // [A]

information 객체에 verb라는 키 + project라는 값을 추가함

console.log(information)
// { name: '김개발', developes: 'facebook' }

---

DOM

웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델

Javascript는 DOM으로 HTML에 접근한다 ➡️ DOM은 중간다리!

.appendChild()

.createElement
요소 만들기

.appendchild()
요소를 만든 후에 어딘가의 element에 append시키는 함수
(요소의 뒤쪽에 붙여줌)

listContent.innerHTML = "목록이다";
  list.appendChild(listContent);
  listWrap.appendChild(list);

  document.body.appendChild(listWrap);