[TIL-109] 위코드 8일차: JS replit 27~33 "ES6 추가 기능", "DOM"

Javascript

 

 

화살표 함수

개념

arrow function은 function이라는 키워드 대신 => 를 사용하여 함수를 표현하는 방식이다. ES6에서 새로 나온 함수 표현법이다.

 

사용법

1. 함수명이 없는 함수 

//ES5
function() {}

//ES6
() => {}​

 

2. 함수명이 있는 함수

//ES5
//함수 선언식(Function Declaration)
function getName() {}
//함수 표현식(Function Expression)
const getName = function() {}

//ES6
const getName = () => {}​

 

화살표 함수에서 인자가 하나일 때는 소괄호를 생략할 수 있다.

• 예) const getName = (name) => { };

만약 함수에 실행 내용이 없고 return만 한다면 return 키워드와 중괄호를 생략할 수 있다. 이때, 화살표 오른쪽에는 반환될 "값"만 쓰여야 한다.

• 예) const hi = (first, family) => { return first + family };

 

오답노트(29번)

const moreThan100 = nums => {
   return nums.map( element => {
    if (element >= 100) {
      return true;
    } else {
      return false;
    }});
}

• 화살표 함수 안에서 map() 메서드를 사용하면서 콜백함수로 다시 화살표 함수를 사용하면서 인자가 뭔지, return 값이 뭔지 헷갈렸다.
• [코드 해석] nums라는 배열을 인자로 받는 moreThan100 함수는 nums 배열에 map 메서드를 사용해서 nums의 요소(element)가 100 이상이라면 true를, 미만이라면 false를 수정된 요소로 갖는 배열을 반환한다.
• [질문] 화살표 함수에서 실행할 때 어떤 코드를 실행할 필요 없이 바로 return 한다면, return 키워드를 생략해도 된다고 했는데 왜 저기서 첫번째 return을 지우면 에러가 나는가?
  • [해결] return을 생략할 땐 중괄호도 함께 생략하는데 return 키워드만 생략해서 에러가 났던 것이다. 

 

 

---

 

template literals

개념

ES6부터 따옴표로 감싸던 문자열을 백틱( ` : back tick )으로도 감쌀 수 있다. 백틱을 사용하면 그 안에 ${변수(표현식)} 형태로 변수를 넣을 수도 있다. 따옴표 안에서는 엔터(개행) 처리되지 않아서 특수문자의 하나인 "\n"를 사용했으나, 백틱 안에서는 엔터도 된다.

 

 

---

 

문자열 메서드

startsWith(), endsWith(), includes()

문자열에서 특정 문자열을 찾는 데 사용했던 indexOf 대신, ES6부터는 startsWith와 endsWith, includes 메서드를 사용할 수 있다. 포함 여부에 따라 true/false가 반환되므로 검색할 문자열의 위치가 필요하지 않은 경우 유용하다. includes 메서드에서는 검색 시작 위치를 두번째 인자로 추가할 수 있다. includes("찾을 문자", 검색 시작 위치)

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

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

 

repeat()

특정 문자열을 반복하고 싶을 때 repeat 함수를 사용할 수 있다. 문자열.repeat(반복 횟수);

 

참고 https://javascript.info/string 

Summary

• There are 3 types of quotes. Backticks allow a string to span multiple lines and embed expressions ${…}.
• Strings in JavaScript are encoded using UTF-16.
• We can use special characters like \n and insert letters by their Unicode using \u....
• To get a character, use: [].
• To get a substring, use: slice or substring.
• To lowercase/uppercase a string, use: toLowerCase/toUpperCase.
• To look for a substring, use: indexOf, or includes/startsWith/endsWith for simple checks.
• To compare strings according to the language, use: localeCompare, otherwise they are compared by character codes.

There are several other helpful methods in strings:

• str.trim() – removes (“trims”) spaces from the beginning and end of the string.
• str.repeat(n) – repeats the string n times.

 

replace()

문자열 내에서 특정 문자열을 찾아 원하는 문자열로 바꿔주는 치환 메서드. 문자열.replace("바뀔 문자열", "삽입될 문자열"); 첫번째로 찾은 문자열만 치환한다.

 

concat()

문자열 끝에 특정 문자열을 추가하는 메서드. 문자열.replace("추가할 문자열"); 결과는 문자열 + "추가할 문자열"과 같다.

 

 

---

 

객체 순회

개념

배열처럼 객체도 모든 키에 한번씩 접근해야하는 코드를 쓰기 위해 순회할 수 있다. 객체는 배열과 달리 순서가 없기 때문에 "순서가 보장되지 않은 순회"가 가능하다.

 

1. 객체 생성자 Object

객체 생성자 Object의 Object.keys() 메서드는 객체의 키들이 담긴 배열을 반환한다. 이 배열을 이용하여 for문을 사용하면 된다. Object.keys(객체명)

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

ES6에서 객체의 값으로 이루어진 배열을 반환하는 Object.values()와 객체의 키와 값의 쌍(배열의 형태)으로 이루어진 배열을 반환하는 Object.entries() 메소드가 추가되었다. Object.entries()의 각 요소는 길이가 2인 배열로 , 인덱스 [0]의 값은 키, 인덱스 [1]의 값은 해당 키에 대응하는 값이 들어있다.

 

2. for - in

for-in문은 ES6에서 추가된 문법으로, 배열과 객체를 순회하는 데 쓰는 for문이다. 

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

for (let i in arr)은 for(let i = 0; i < arr.length; i ++)과 같다. 따라서 인덱스 0부터 배열의 길이만큼 반복된다. 인덱스 값을 할당하고 반복문의 반복 횟수를 정하는 일을 자바스크립트가 자동으로 수행하는 것이다.

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

객체에서는 인덱스 대신 객체의 키를 변수에 할당받는다. 이 key를 이용하여 객체의 값에 접근하고 사용할 수 있다.

 

 

---

 

DOM

개념

DOM(Document Object Model)은 웹페이지의 HTML을 계층화시켜, 트리구조로 만든 객체 모델이다. 이 모델을 이용해서 자바스크립트에서 웹페이지에 접근하고 수정할 수 있다.

자바스크립트의 document라는 전역객체는 HTML 문서를 나타낸다. document 객체가 DOM트리의 root node에 접근하게 해줌으로써, 요소는 물론 요소의 속성에도 접근할 수 있다. 요소의 속성에 접근하면 클래스, 아이디, 스타일 등을 수정할 수 있다.

 

사용법

const thisIsButton = document.getElementsByClassName('login-btn')[0];

document.body.innerHTML = '내용 다 바꿈';

let newTag = document.createElement('p');
document.body.appendChild(newTag);

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

• getElementsByClassName("클래스명")[인덱스] : 해당 클래스를 가진 태그들이 배열로 반환된다. 따라서 원하는 요소의 인덱스 번호를 추가하여 한 개의 요소에 도달한다.
• innerHTML : 요소의 내용에 접근하여 변경할 수 있다.
• createElement("태그명") : document 어딘가에 요소를 생성할 수 있다.
• appendChild : 생성한 요소를 지목한 요소의 마지막 자식으로 붙여준다.
• 스타일의 property에 접근할 땐 속성명을 camelCase로 사용한다.

 

오답노트(32번)

//오답
document.h1.appendChild(newTag);
//정답
document.getElementsByTagName('h1')[0].appendChild(newTag);

• 문제 : 새로 생성한 태그가 appendChild를 했는데도 화면에 나타나지 않음.
• 과정 : body에는 삽입되는데 h1으로 하면 안 돼서 고민하다가 원인을 발견했다. 한참 헤맸네...
• 원인 : document.body.appendChild(newTag); 예시만 생각하고 h1을 body 자리에 그대로 넣었다. 그런데 body가 특수한 것이고, body 안의 요소에 접근할 때는 querySelector()나 getElementByTagName() 등을 사용해야 한다. 이 부분을 까먹고 있었다.

 

 

---

 

addEventListener

개념

어떤 요소에 대해 특정 이벤트가 일어나는 것을 감지하여, 그때 정해진 동작(콜백함수)을 수행하는 함수이다. 

 

사용법

//클릭 이벤트
const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() { } );

//키 이벤트
const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.code; 
});

thisIsPw.addEventListener('keydown', function(event) {
  if (event.code === 'Enter') {
     //로그인 함수로 이동
  }
});

이벤트가 일어날 요소를 먼저 지정하고, addEventListener()의 인자로 "이벤트"와 콜백함수를 전달한다. 예시의 마지막 addEventListener의 콜백함수는 event라는 인자를 받았는데, addEventListener의 콜백함수는 항상 event 관련 정보를 인자로 받을 수 있다.

 

키 이벤트

키보드의 입력에 따라 발생하는 이벤트들. 로그인할 때 엔터를 치면 자동으로 로그인 버튼이 눌러지는 기능(로그인이 실행됨) 등에 사용된다.

• keydown : 키보드를 눌렀을 때
• keyup : 키보드를 누르고 떼는 순간
• keypress : 키보드를 눌러 어떤 텍스트가 작성되는 순간