JavaScript Essentials

import { random } from './getRandom'
import _ from 'lodash'
import getType from './getType'
import * as R from './export_practice'
import myData from './myData.json'
import axios from 'axios'
 
// 산술 연산자(arithmetic operator) + - * / %
// 할당 연산자(assignment operator) =
// 논리 연산자(logical operator)
// 삼항 연산자(ternary operator) ? 
 
// var 변수는 let, const 변수와 다르게 블록 레벌의 범위가 아닌 함수 레벨 범위 내에서 유효하다.
 
function sum() {
  let a = 0
  for(let i = 0; i < arguments.length; i++)
    a += arguments[i]
  return a
}
 
// 함수의 결과가 반복적으로 사용될 때는 결과를 변수에 담아서 사용하는 것이 효율적이다.
 
// 호이스팅(Hoisting)
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
// 함수 호출을 먼저 한 후 뒤쪽에서 함수 선언을 해도 정상적으로 작동한다
 
 
// 타이머 함수 (전역 함수)
// setTimeout(함수, 시간): 일정 시간 후 함수 실행
// setInterval(함수, 시간): 시간 간격마다 함수 실행(반복적으로)
// clearTimeout(): 설정된 Timeout 함수를 종료
// clearInterval(): 설정된 Interval 함수를 종료
 
const timeoutTimer = setTimeout(() => {
  console.log('Success!')
}, 3000)
 
const intervalTimer = setInterval(() => {
  console.log('Repeat!')
}, 3000)
// setTimeout, setInterval 함수는 타이머를 리턴하는데,// 이 타이머를 리턴받아서 clearTimeout이나 clearInterval 함수의 인수로 넣어주면 된다
clearTimeout(timeoutTimer)
clearInterval(intervalTimer)
 
const h1El = document.querySelector('body h1')
h1El.addEventListener('click', () => {
  clearTimeout(timeoutTimer)
  //만약 h1 요소를 클릭하면 timer가 정지되도록 EventListener 추가
})
 
// const stopBtn = document.querySelector('.stopRepeat')
// stopBtn.addEventListener('click', () => {
//   clearInterval(intervalTimer)
//   // stop 버튼을 누르면 반복이 종료되도록 
// })
 
// 콜백(Callback)
// 함수의 인수로 사용되는 함수
 
// this
// 일반(Normal) 함수는 호출 위치에 따라 this 정의!
// 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의!
 
 
const heropy = {
  name: 'Heropy',
  normal: function () {
    console.log(this.name)
  },
  wrapper: function() {
    (() => {
      console.log(this.name)
    })()
  }
}
heropy.normal()
heropy.wrapper()
 
 
 
//String method
//indexOf() => 일치하는 값이 없으면 -1 반환
 
//number.toFixed()는 String 타입으로 반환
//Math.ceil(), Math.floor(), Math.round()
//Math.random()
 
 
 
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry', 'Blueberry']
 
//Array.map은 기존의 배열과 같은 수의 요소를 가지는 배열이 만들어진다.
//Array.filter는 기존의 배열보다 작거나 같은 수의 요소를 가지는 배열이 만들어진다.
 
const a = numbers.map(number => number < 3) //[true, true, false, false]
 
const b = numbers.filter(number => number < 3) //[1, 2]
 
//find, findIndex
 
const c = fruits.find(fruit => /^C/.test(fruit)) // 'Cherry'
// fruits.find(fruit => {
//   return /^C/.test(fruit)
// })
// 이거랑 같음
 
const d = fruits.findIndex(fruit => /^C/.test(fruit)) // 2
 
//includes
const e = numbers.includes(3) // true
 
const f = fruits.includes('Heropy') // false
 
//push(), unshift()
//얘네는 원본이 수정됨 주의!
 
numbers.push(5) // [1, 2, 3, 4, 5]
//numbers 배열 맨 뒤에 5를 추가함
 
numbers.unshift(0) // [0, 1, 2, 3, 4, 5]
//numbers 배열 맨 앞에 0을 추가함
 
//reverse()
//얘도 원본 수정됨 주의!
numbers.reverse() // [5, 4, 3, 2, 1, 0]
numbers.reverse() // [0, 1, 2, 3 ,4, 5]
 
fruits.reverse() // ['Blueberry', 'Cherry', 'Banana', 'Apple']
fruits.reverse()
 
//.splice() 삭제 + 끼워넣기
// 원본 수정됨 주의!
//splice(지우기 시작할 인덱스 번호, 지울 요소의 개수, 그 자리에 삽입할 데이터 ...)
 
numbers.splice(2, 1)
// 2번째 아이템부터 시작해서 1개의 아이템을 지워라
//Before : [0, 1, 2, 3, 4, 5]
//After : [0, 1, 3, 4, 5]
 
numbers.splice(2, 1, 99)
// 2번째 아이템부터 시작해서 1개의 아이템을 지우고 그 자리에 99를 끼워넣어라
//Before : [0, 1, 3, 4, 5]
//After : [0, 1, 99, 4, 5]
numbers.splice(2,1,2,3) // [0, 1, 2, 3, 4, 5]
 
fruits.splice(2, 0, 'Orange')
//0개를 지우고 Orange를 넣었으므로 삭제없이 끼워넣는 의미임
//Before : ['Apple', 'Banana', 'Cherry', 'Blueberry']
//After : ['Apple', 'Banana', 'Orange', 'Cherry', 'Blueberry']
 
 
 
//Object.assign
//자체적으로 제공되는 전역 객체인 Object에 정의된 정적 메소드
const userAge = {
  name: 'Heropy',
  age: 85
}
const userEmail = {
  name: 'Heropy',
  email: 'thesecon@gmail.com'
}
 
const target = Object.assign(userAge, userEmail)
console.log(target)
console.log(userAge)
console.log(target === userAge)
 
const obj1 = { k: 123 }
const obj2 = { k: 123 }
console.log(obj1)
console.log(obj2)
console.log(obj1 === obj2)
// 왜 false? 객체 데이터는 메모리 상에 저장되어 있고,
// 변수는 그 데이터의 주소를 참조를 하고 있기 때문에
// 비교를 하게 되면 참조하는 메모리 주소끼리 비교를 하게 되고, 그 주소값이 다르기 때문에 false가 나온다.
// 객체 내의 데이터를 비교하는 게 아님!!
 
// 그렇다면 두 개 이상의 객체를 기존의 객체 중 하나에 합치는 것이 아니라,// 새로운 객체를 만들어서 거기에 합치고 싶다면 어떻게?
 
const newObject = Object.assign({}, userAge, userEmail)
//이렇게 하면 기존의 객체를 손상시키지 않고 객체들을 합칠 수 있다.
 
const userTemp = Object.assign({}, userAge, userEmail)
 
 
//객체 데이터의 키들을 가져와서 배열을 반환
const keys = Object.keys(userTemp)
console.log(keys)
 
//특정 키에 해당하는 value만을 꺼낼 수 있다
console.log(userTemp['email'])
 
const values = keys.map(key => userTemp[key])
console.log(values)
 
const values_other_way = Object.values(userTemp)
console.log(values_other_way)
 
console.log('---------------------------------------------------')
 
// 구조 분해 할당 (Destructuring assignment)
// = 비구조화 할당
 
const { name: userName, age, email, address = 'Korea' } = userTemp
// 원하는 속성들만 꺼내어 변수로 만들어 사용할 수 있다
// E.g, user.address
// address 변수에는 'Korea'라는 기본 값을 지정해서 userTemp라는 객체 데이터에 address 속성이 없다면 기본 값이 지정된다.
// 꺼내온 속성을 담을 변수의 이름을 원하는 대로 지정하고 싶다면 콜론(:)기호를 통해 뒤에 명시해주면 된다
// userName === 'Heropy'
//console.log(name) 이렇게 하면 에러남
 
const [fruit1, fruit2, fruit3, fruit4, fruit5, fruit6] = fruits // Apple Banana Orange Cherry Blueberry undefined
// 배열 데이터도 구조 분해 할당이 가능하다
// 배열 데이터에는 key가 없기 때문에 순서대로 받아온다
 
 
 
// 전개 연산자 (Spread)
// fruits = ['Apple', 'Banana', 'Cherry', 'Orange', 'Blueberry']
console.log(...fruits) //Apple Banana Orange Cherry Blueberry
//... 기호를 사용하면 배열에 저장된 각 아이템들을 전개할 수 있다
 
function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))
// console.log(toObject(fruits[0], fruits[1], fruits[2])) 와 같다
 
function toObject2(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
// 매개 변수에서도 전개 연산자를 사용할 수 있다
// 남은 데이터를 배열의 형태로 받아서 c라는 매개 변수에 담음
console.log(toObject2(...fruits))
 
const same_as_toObject2 = (a, b, ...c) => ({a, b, c})
// 객체 데이터의 속성과 매개 변수의 이름이 같을 때에는 콜론(:) 뒷부분 생략 가능
console.log(same_as_toObject2(...fruits))
 
console.log('---------------------------------------------------')
 
// 데이터 불변성(Immutability)
// 원시 데이터: String, Number, Boolean, undefined, null
// 데이터 가변성
// 참조형 데이터: Object, Array, Function
 
 
// 얕은 복사(Shallow copy), 깊은 복사(Deep copy)
// 단순히 가리키는 주소값만 같게 만들면 얕은 복사
// 완전히 새로운 객체를 만들어서 내용만 복사하면 깊은 복사
 
// Object.assign({}, 복사할 객체)
// copy = {...복사할 객체}
 
// 그러나 이렇게 복사를 하는 경우에도 문제가 발생한다.
// 객체의 데이터로 배열 데이터를 가지고 있는 경우 배열 데이터 역시 참조형 데이터이기 때문에, 얕은 복사가 이루어진다.
 
 
// lodash (low dash) _
// 패키지를 이용한 깊은 복사
 
const user_to_copy = {
  name: 'Heropy',
  age: 85,
  emails: ['thesecon@gmail.com']
}
 
const copyUser = _.cloneDeep(user_to_copy) //Deep copy
console.log(copyUser === user_to_copy) // false
 
user_to_copy.age = 22
user_to_copy.emails.push('newmail@mail.com')
 
console.log(copyUser.emails === user_to_copy.emails) // false
 
// 복사할 참조형 데이터 내에 또 다른 참조형 데이터를 데이터로 가지고 있는 경우 lodash를 통해 깊은 복사를 하자
 
console.log('---------------------------------------------------')
 
 
 
// 가져오기, 내보내기
// 다른 파일로 데이터를 내보내는 통로는 Default export와 Named export 2가지가 있다
// export default로 작성한 함수는 Default export를 통해 내보내지게 되며 하나의 함수만 내보낼 수 있다.
// default 키워드를 빼고 작성한 함수는 반드시 함수의 이름을 가져야 하며 함수의 이름을 통해 import할 수 있다.
// 이 경우에는 import할 때 { } 안에 import할 함수의 이름들을 나열해주면 된다.
// import * as R from './불러올 데이터가 있는 파일명'
// 이렇게 * 기호를 사용하면 모든 내용의 데이터를 지칭하는 와일드카드로 사용할 수 있다.
 
 
const random_number = random()
const double_random_number = R.double(random_number)
 
 
// 중복 제거 _.uniq (lodash 패키지 사용)
 
const usersA =  [
  {userId: '1', name: 'Heropy'},
  {userId: '2', name: 'Neo'},
]
const usersB =  [
  {userId: '1', name: 'Heropy'},
  {userId: '3', name: 'Amy'},
]
const usersC = usersA.concat(usersB)
console.log('concat', usersC)
 
console.log('uniqBy', _.uniqBy(usersC, 'userId'))
// uniqBy는 하나의 배열 데이터에서 특정한 속성의 이름으로 고유화를 시켜주는 Method
 
const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)
// unionBy는 합치기 전에 여러 개의 배열 데이터를 먼저 적어주고 합칠 때 고유화를 시킬 속성의 이름을 작성
 
console.log('---------------------------------------------------')
 
// _.find (lodash 패키지 사용)
const users = [
  { userId: '1', name: 'Heropy' },
  { userId: '2', name: 'Neo' },
  { userId: '3', name: 'Amy' },
  { userId: '4', name: 'Evan' },
  { userId: '5', name: 'Lewis' },
]
 
const foundUser = _.find(users, { name: 'Amy' })
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
console.log(foundUser)
console.log('Amy\'s index: ', foundUserIndex)
 
// _.remove (lodash 패키지 사용)
_.remove(users, { name: 'Heropy' })
console.log('After remove', users)
 
console.log('---------------------------------------------------')
 
// JSON (JavaScript Object Notation)
// 자바스크립트의 객체 표기법
// JSON이라는 포맷은 정확히는 하나의 문자 데이터이지만 해석되는 와중에 import로 가져와지면 객체 데이터처럼 보여진다.
 
const user = {
  name: 'Heropy',
  age: 85,
  emails: [
    'thesecon@gmail.com',
    'neo@zilinks.com'
  ]
}
console.log('user', user)
 
const str = JSON.stringify(user)
// 객체 데이터를 JSON 포맷에 맞게 문자화
console.log('str', str)
console.log(typeof str)
 
// 하나의 문자 데이터인 JSON을 객체 데이터처럼 사용하기 위해 parse 사용
const obj = JSON.parse(str)
console.log('obj', obj)
 
console.log('---------------------------------------------------')
// localStroage, sessionStorage
// google에 local storage mdn 검색
// 문자 데이터로 저장하는 것을 권고
 
// JSON.stringify()를 사용해서 객체 데이터를 문자 데이터화 시켜줌
localStorage.setItem('user', JSON.stringify(user))
// 로컬 저장소에 저장된 user 데이터는 문자 데이터화 되어 있으므로
// JSON.parse()를 사용해서 객체 데이터화 시켜준다
console.log(JSON.parse(localStorage.getItem('user')))
 
console.log('---------------------------------------------------')
 
// 로컬 저장소에 저장된 데이터 수정
 
// 1. 데이터를 불러와서 수정한 후 기존의 키에 덮어쓰기 한다
const temp = localStorage.getItem('user')
const obj_temp = JSON.parse(temp)
obj_temp.age = 22
console.log(obj_temp)
localStorage.setItem('user', JSON.stringify(obj_temp))
 
localStorage.removeItem('user')
// 2. Lowdb (lodash 패키지 사용)
 
 
console.log('---------------------------------------------------')
function fetchMovies() {
  axios
  .get('https://www.omdbapi.com/?apikey=7035c60c&amp;s=frozen')
  .then(res => {
    console.log(res)
    const h1El = document.querySelector('h1')
    const imgEl = document.querySelector('img')
    h1El.textContent = res.data.Search[0].Title
    imgEl.src = res.data.Search[0].Poster
  })
}
fetchMovies()