TIL

코딩 테스트 13일차 문제풀이, 코드리뷰 완료

코드리뷰 발표 내용

영어는 싫어요 문제
링크 : https://school.programmers.co.kr/learn/courses/30/lessons/120894

// 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요.

function mreplace( replacements, str) {
  let result = str;
  for( let [x,y] of replacements)
    result =result.replace(x,y); //replace 메서드를 사용해서 정규식을 통해 찾은 값 'x'를 'y' 값으로 교체하고 result에 추가한다.
  return result;
}

function solution(numbers) {
   return parseInt(mreplace([[/one/g, "1"], // 이때 변경된 값이 문자데이터이기 때문에 parseInt를 사용하여 숫자로 변경함!
  [/two/g, "2"],
  [/three/g, "3"],
  [/four/g,"4"],
  [/five/g,"5"],
  [/six/g,"6"],
  [/seven/g,"7"],
  [/eight/g,"8"],
  [/nine/g,"9"],
  [/zero/g,"0"]],numbers));
}

// [/단어/g]
문자열에서 단어를 찾아라. 단, 한번만 찾고 끝내지 말고 문자열 전체를 탐색할것. 플래그 문자 g가 있으면 문자열 전체를 탐색한다는 뜻이다. 

relpace(x,y) -> x 값을 y로 변경하는 메서드

Clone Coding

row Cards section 구현 완료

사각형으로 이루어진 card로 구성된 row cards section 구현 완료.

• row-cards 클래스 내부에 2개의 row-cards__listdiv를 만들어서 내부에 헤더와 내용을 추가함
• 각각의 클래스는 flex 속성을 사용해서 정렬하였고, 각각의 아이템에 flex:1을 적용해서 최대 너비로 늘어나게끔 설정함

커밋 링크:https://github.com/jyc-coder/clone-coding/commit/05de87a23a916cb48f23b8126c613fa13d7d7aad

Javascript

함수

반환 및 종료

return 키워드로 함수 안에서 밖으로 데이터를 반환한다.

function hamburger(){
return '햄버거'
}

console.log(hamburger()) // '햄버거'

return은 함수를 종료시키기 때문에 그 이하 명령은 실행되지 않는다.

function hamburger(){
	return '햄버거' //
  console.log('감자튀김') // 동작하지 않는다.
}

return 키워드를 사용하지 않거나 반환데이터를 쓰지 않으면, undefined가 반환된다.

function hamburger(){
}

function cheeseburger(){
	return
}

console.log(hamburger()) // undefined
console.log(cheeseburger()) // undefined

매개변수 패턴

기본값

function hamburger(a, b = 'burger') {
  return a + b
}

console.log(hamburger('cheese')) // cheeseburger

구조 분해 할당

const user = {
  name: 'jyc',
  age: 28,
  // email: 'jyc4648@gmail.com'
}

function getName({ name }) {
  return name
}
function getEmail({ email = '이메일이 없습니다.' }) {
  return email
}
// 객체 구조분해 할당으로 user의 name 값과 email 값을 리턴함


console.log(getName(user)) // 'jyc'
console.log(getEmail(user)) // '이메일이 없습니다.'

const fruits = ['Apple', 'Banana', 'Cherry']
const numbers = [1, 2, 3, 4, 5, 6, 7]

function getSecondItem([,b]) {
  return b
}
// 배열 구조분해를 통해서 2번째 요소를 리턴해라

console.log(getSecondItem(fruits)) // 'Banana'
console.log(getSecondItem(numbers)) // 2

나머지 매개변수

function sum(...rest) {
  console.log(rest) // [1, 2, 3, 4, 5, 6, 7, 8]
  return rest.reduce((acc, cur) => acc + cur)
}
// 입력한 숫자들을 전부 배열로 변경해서 reduce 메서드가 호출됨

const res = sum(1, 2, 3, 4, 5, 6, 7, 8)
console.log(res) // 36

arguments 객체

function sum() {
  let res = 0
  for (const item of arguments) {
    res += item
  }
  return res
}

const res = sum(1, 2, 3, 4, 5, 6, 7, 8)
console.log(res) // 36

엥 나는 arguments 선언 안했는데?

arguments는 함수에 전달된 인수에 해당하는 Array 형태의 객체이다.

화살표 함수

화살표 함수는 기본적으로 익명으로 표현식이다.

나름대로 제한점이 존재한다

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없음.
• new.target키워드가 없음.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없음.
• 생성자(Constructor)로 사용할 수 없음.
• yield를 화살표 함수 내부에서 사용할 수 없음.

//함수 표현
const sum = function(a,b){
  return a + b
}


// 화살표 함수
const sum = (a,b) => a+b

const a = () => {} // 매개변수가 없을때 
const b = x => {} // 매개변수가 1개만있으면 소괄호 제거 가능
const c = (x,y) => {} // 매개변수가 없거나 2개 이사은 소괄호 생략안됨
const d = x => {return x * x} // 중괄호가 있으면 무조건 return문구가 들어있어야함
const e = x = > x*x // 함수가 return 으로 시작된다면 {}, return 생략 가능함
const f = x => { // 함수가 return 부터 시작하지 않으면 중괄호 생략 안됨
	console.log(x*x)
  return x * x
}

const g = () => {return {a:1}}
const h =() => ({a:1}) // 객체 데이터는 {}기호를 사용하기 때문에 소괄호로 묶어야함

const i = () => {return[1,2,3]}
const j = () => [1,2,3] // 둘다 똑같음

즉시 실행함수(IIFE)

함수 정의와 동시에 바로 실행하는 문법

const a = "치즈버거"

// 함수 정의

const giveMeBurger = () => {
	console.log(a)
}

giveMeBurger() // '치즈버거'


// 함수를 정의함과 동시에 바로 실행
(function() {
	console.log('치즈버거')
})


// 사용 가능한 패턴 
;(() => {})() // (F)()
;(function () {})() // (F)()
;(function () { })() // (F())
;!(function () {})() // !F()
;+(function () {})() // +F()

콜백(callback)

함수의 인수로 사용되는 함수
ex) addEventListener

const a = (callback) => {
  callback()
  console.log('A')
}
const b = () => {
  console.log('B')
}

a(b) // 여기있는 b가 콜백함수

function sum(a, b, callback) {
  // 1초 후 실행
  setTimeout(() => {
    callback(a + b)
  }, 1000)
}
sum(3, 7, function(value) {
  console.log(value) // 10
})

//sum이라는 함수의 인수로 다른 함수를 사용했다. 

//loadImage
<div class="container">
  <h1>Loading...</h1>
</div>

const loadImage = (url, cb) => {
  const imgEl = document.createElement('img')
  imgEl.src = url
  imgEl.addEventListener('load', () => {
    setTimeout(() => {
      cb(imgEl)
    }, 1000)
  })
}

const containerEl = document.querySelector('.container')
loadImage('https://www.gstatic.com/webp/gallery/4.jpg', imgEl => {
  containerEl.innerHTML = ''
  containerEl.append(imgEl)
})

재귀

하나의 함수에서 자기 자신을 다시 호출해서 실행하는 방법

const userA = { name: 'A', parent: null }
const userB = { name: 'B', parent: userA }
const userC = { name: 'C', parent: userB }
const userD = { name: 'D', parent: userC }

const getRootUser = user => {
  if (user.parent) // parent 값이 있니? {
    return getRootUser(user.parent) // 있으면 user.parent값을 인수로 다시 함수를 호출한다.
  }
  return user
}

console.log(getRootUser(userD)) // userA가 출력된다. 

호출 스케줄링

일정한 시간이 지난 후에 원하는 함수를 호출하는 것

const hello = () => {
  console.log('Hello~')
}

setInterval(hello,3000) // 3초마다 hello 호출
const btnEl = document.querySelector('h1')

btnEl.addEventListener('click', () => {
console.log('Clear!')
})