클린코드 자바스크립트

const person = {
  name: 'jang',
  age: '20'
}

person.name = 'choi'  // 가능, 재할당이 아닌 값만 바뀐 것이라서

typeof '문자열'     // 'string'
typeof true       // 'boolean'
typeof undefined  // 'undefined'
typeof 123        // 'number'
typeof Symbol()   // 'symbol'

function myFunction() {}
class MyClass {}

typeof myFunction  // 'function'
typeof MyClass     // 'function'

const str = new String('문자열')
typeof str  // 'object'
typeof null // 'object'

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const poco = new Person('poco', 99)
const p = {
  name: 'poco',
  age: 99
}
poco instanceof Person // true 
p instanceof Person // false

const arr = []
const func = function() {}

const date = new Date()

arr instanceof Array      // true
func instanceof Function // true
date instanceof Date      // true

// 프로토타입 체인을 타기 때문에 최상위에 있는 Object의 instance 도 된다. 
arr instanceof Object   // true
func instanceof Object // true
date instanceof Object      // true

!null  // true 
!!null // false 

null === false // false 
!null === true // true 

// null -> 숫자 연산시 0으로 취급 
null + 123 // 123

let varb; // 선언했지만 값은 정의되지 않고 할당 x 

typeof varb // 'undefined'

undefined + 10 // NaN

!undefined // true 

undefined == null // true
undefined === null // false
!undefined === !null // true

// == 
'1' == 1  // true
1 == true // true 

// === 사용하기 
'1' === 1  // false
1 === true // false

// ticketNum은 input element 
ticketNum.value == 0 // x 

Number(ticketNum.value) === 0
ticketNum.valueAsNumber === 0

// 암묵적 변환 
11 + ' 문자와 결합' // '11 문자와 결합'

!!'문자열' // true
!!''   // false 

parseInt('9.9999', 10) // 9 
// 두번째 파라미터를 지정하지 않으면 10진수가 기본값은 아니다. 
// 그래서 10진수를 원한다면 꼭 지정하는 게 중요 


// 명시적 변환 
String(11 + '문자와 결합')
Boolean('문자열')
Number('11')

isNaN // 느슨한 검사
Number.isNaN // 엄격한 검사

function genRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const MIN_NUMBER = 1 
const MAX_Number = 45 

genRandomNumber(MIN_NUMBER, MAX_NUMBER);

const MAX_AGE = 20

function isAdult(age) {
  // 최소값, 최대값 (포함되는지 vs 안되는지)
  // 이상, 초과 vs 이하, 미만 
  if (age >= 20) {

  }
}

// 상수
const MIN_IN_NUMBER = 1; // IN을 사용해서 포함여부를 확인할 수 있도록? 
const MAX_IN_NUMBER = 45

function reservationDate(beginDate, endDate) {
 // code ...
}

reservationDate('YYYY-MM-DD', 'YYYY-MM-DD')

const students = ['포코', '존', '현석'];
function getStudents(first, last) {
  // code...
}
getStudents(students[0],'현석')

function someFunc (someArg, someArg) {

}
genRandomNumber(1, 50) // 1부터 50까지 난수를 생성하나? 라고 추측할 수 있다.
getDates('2021-10-11', '2021-10-32') // 저 사이 날짜를 가져오는 구나 라고 추측이 가능 
genShuffleArray(1, 5) // 1부터 5까지 숫자를 랜덤으로?

// This JSX:
ReactDOM.render(
  <div id="msg">Hello World!</div>,
  mountNode
)

// is transformed to this JS:
ReactDOM.render(React.createElement('div', { id: 'msg' }, 'Hello World!'), mountNode)

const example = condition1 
  ? a === 0 ? 'zero' : 'positive'
  : 'negative'

const example = condition1 
  ? (a === 0 ? 'zero' : 'positive')
  : 'negative'

function alertMessage(isAdult) {
  isAdult
    ? alert('입장이 가능합니다.')
    : alert('입장이 불가능합니다.')
}

if (isAdult) {
  alert('입장이 가능합니다.')
} else {
  alert('입장이 불가능합니다.')
}

function printName(name) {
  // 안전한 코드를 만들기 위해 다음과 같이 if문을...
  if (name === undefined || name === null) {
    return '사람이 없네요'
  }
  return '안녕하세요 ' + name + '님'
}

// 하지만 falsy를 생각하면 다음과 같이 간단하다.
if (!name) {
  return '사람이 없네요'
}

// AND
true && true && '도달 O' // 도달 O

true && false && '도달 X' // false 

// OR
false || false || '도달 O' // 도달 O

true || true || '도달 X' // true

function fetchData() {

 //if (state.data) {
 //   return state.data
 //} else {
 //  return 'Fetching...'
 //}

 return state.data || 'Fetching...'
}

const x = 1;
if (x >= 0) {
  // true   
} else if (x > 0) {

} else {

}

// else if는 else 후에 if를 한 것과 같다는 사실을 잊지 말기 
if (x >= 0) {
 
} else {
  if (x > 0) {

    }
}

function getActiveUserName(user) {
  if (user.name) {
    return user.name
  }
  // else 처리 필요 없음 

  return '이름 없음'
}

function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user)
  } else {
    return '안녕하세요'
  }
}

function getHelloCustomer(user) {
  if (user.age < 20) {
    report(user)
  }
  return '안녕하세요'
}

function loginService(isLogin, user) {
  if (!isLogin) {
    if (checkToken()) {
      if (!user.nickName) {
        return registerUser(user)
      } else {
        refreshToken()
        return '로그인 성공'
      }
    } else {
      throw new Error("No Token")   
    }
  }
}

function loginService(isLogin, user) {
  // Early Return 
  if (isLogin) {
    return 
  }

  if(!checkToken()) {
    throw new Error("No Token") 
  }

  if (!user.nickName) {
    return registerUser(user)
  } 

  
  login()
}

function login() {
  refreshToken()
  return '로그인 성공'
}

// 숫자일 때만 실행하는 로직 
if (!isNaN(3)) {
  console.log('숫자입니다')
}

function isNumber(num) {
  return !Number.isNaN(num) && typeof num === 'number'
}

if (isNumber(3)) {
  console.log('숫자입니다')
}

function sum(x, y) {
  x = x || 1 
  y = y || 1

  return x + y
}

sum(100, 200)

function safeParseInt(number, radix) {
  return parseInt(number, radix || 10)
}

number-- // 보다
number = number -1 // 사용하기

function createElement(type, height, width) {
  const element = document.createElement(type || 'div')

  element.style.height = String(height || 10) + 'px'
  element.style.width = String(width || 10) + 'px'

  return element
}

createElement('div', 0, 0) // -> 10px 10px div가 생성
// 0을 전달하면 falsy 이기 대문에 or 연산에서 분리가 어렵다.

function createElement(type, height, width) {
  const element = document.createElement(type ?? 'div')

  element.style.height = String(height ?? 10) + 'px'
  element.style.width = String(width ?? 10) + 'px'

  return element
}

createElement('div', 0, 0) // -> 0px 0px div가 생성

// if (!(A || B)) {
// }

// if (!A && !B) {
// }

const arr = [1, 2, 3]

const obj = {
  0: 1,
  1: 2,
  2: 3
}
if (typeof arr === 'object') {}

if (arr in Array) {}

if (arr.length) {} // 문자열 프로퍼티에도 length가 있어서 `length`로 배열여부를 확인해선 안 된다.

const arr = '[1, 2, 3]'
Array.isArray(arr) // false

const arr = [1, 2, 3]
console.log(arr.length) 3 

arr.length = 10
console.log(arr.length) // 10
//arr -> [1, 2, 3, empty × 7]

// 0과 1이 무엇인지 바로 알기 어렵다. 
function operateTime(input, operators, is) {
  input[0].split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })

  input[1].split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })
}

// 다음과 같이 나누면 이해하기 쉽다. 
function operateTime(input, operators, is) {
  const [firstInput, secondInput] = inputs 
    
  firstInput.split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })

  secondInput.split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })
}

// 더 간단하게 하기 인자로 받을 때 부터 구조분해할당 
function operateTime([firstInput, secondInput], operators, is) {
  firstInput.split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })

  secondInput.split('').forEach((num) => {
    cy.get('.digit').contains(num).click()
  })
}
operateTime([1, 2], 1, 2)

function formatDate(targetDate) {
  const [date] = targetDate.toISOString().split('T')

  const [year, month, day] = date.split('-')
  
  return `${year}년 ${month}월 ${day}일`
}

function head(arr) {
  return arr[0] ?? ''
}

const arrayLikeObject = {
  0: 'HELLO',
  1: 'WORLD',
  length: 2
}

const arr = Array.from(arrayLikeObject) // ['HELLO', 'WORLD']
Array.isArray(arrayLikeObject) // false 
Array.isArray(arr) // true

const originonArray = ['123', '456', '789']

const newArray = originArray

originArray.push(10)
originArray.push(11)
originArray.push(12)
originArray.unshift(0)

const newArray = [...originArray]

const counterApp = combineReducers({
  counter,
  extra,
})

const firstName = 'poco'
const lastName = 'jang'

const person = {
  firstName,
  lastName,
  getFullName() {
    return this.firstName + ' ' + this.lastName 
  }
}

const [state, setState] = useState({
  id: '',
  password: '',
})

const handleChange = (e) => {
  setState({
    [e.target.name]: e.target.value // computed property name 
  })
}

return (
  <React.Fragment>
    <input value={state.id} onChange={handleChange} name="name" />
    <input value={state.password} onChange={handleChange} name="password" />
  </React.Fragment>
)

const noop = createAction('INCREMENT')

const reducer = handleActions(
  {
    [noop]: (state, action) => ({ // 메서드 
      counter: state.counter + action.payload,
    })
  },
  { counter: 0 },
)

function getUserType(type) {
  switch (key) {
    case 'ADMIN':
      return '관리자'
    case 'INSTRUCTOR':
      return '강사'
    case 'STUDENT':
      return '수강생'
    default:
      return '해당 없음'
  }
}

function getUserType(type) {
  const USER_TYPE = {
    ADMIN: '관리자',
    INSTRUCTOR: '강사',
    STUDENT: '수강생',
    UNDEFINED: '해당 없음'
  }

  return USER_TYPE[type] ?? USER_TYPE['UNDEFINED']
}

console.log(getUserType('Hello'))

function getUserType(type) {
  return (
    {
      ADMIN: '관리자',
      INSTRUCTOR: '강사',
      STUDENT: '수강생',
    }[type] ?? '해당 없음'
  )
}

console.log(getUserType('Hello'))

function Person(name, age, location) {
  this.name = name
  this.age = age
  this.location = location 
}

function Person({ name, age, location }) {
  this.name = name
  this.age = age
  this.location = location 
}

const poco = new Person({
  name: 'poco',
  age: 33,
  location: 'korea'
})

function Person(name, { age, location }) {
  this.name = name
  this.age = age 
  this.location = location 
}

const poco = new Person(name, {
  age: 33,
  location: 'korea'
})

const orders = ['First', 'Second', 'Third']
const st = orders[0]
const rd = orders[2] 
// 위 처럼 인덱스로 가져오는 대신
const [first, , third] = orders 
// 또는 
// 배열의 길이가 길면 아래와 같이 사용하는 것이 좋다. 
const { 0: st2, 2: rd2 }  = orders 
console.log(st2) // First
console.log(rd2) // Third

const STATUS = Object.freeze({
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  FAIL: 'FAIL',
})

STATUS.NEW_PROP = 'P2' // 추가되지 않는다.


// 동결 확인 
Object.isFrozen(STATUS.SUCCESS) // true

const STATUS = Object.freeze({
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  FAIL: 'FAIL',
  OPTIONS: {
    GREEN: 'GREEN',
    RED: 'RED',
  }
})

// 동결 확인 
Object.isFrozen(STATUS.OPTIONS) // false 

STATUS.OPTIONS.GREEN = 'G'  // 가능 
STATUS.OPTIONS.YELLOW = 'Y' // 가능 
delete STATUS.OPTIONS.RED   // 가능

class Car {
  constructor(name, brand) {
    this.name = name
    this.brand = brand
  }

  sayName() {
    return this.brand + '-' + this.name
  }
}

const casper = new Car('캐스퍼', '현대')

const person = {
  name: 'hhhh'
}

person.hasOwnProperty('age') // false 
person.hasOwnProperty('name') // true

const foo = {
  hasOwnProperty: function () {
    return 'hasOwnProperty'
  },
  bar: 'string'
}

foo.hasOwnProperty('bar') // hasOwnProperty

Object.prototype.hasOwnProperty.call(foo, 'bar') // true 

// 매번 적기 귀찮으니 함수로 호출하기 
function hasOwnProp(targetObj, targetProp) {
  return Object.prototype.hasOwnProperty.call(targetObj, targetProp)
}

const model = {
  isLogin: false,
  isValidToken: false,
}

function login() {
  model.isLogin = true 
  model.isValidToken = true 
}

function logout() {
  model.isLogin = false
  model.isValidToken = false 
}

// 객체에 대신 접근 
function setLogin(bool) {
  model.isLogin = bool
}
function setValidToken(bool) {
  model.isValidToken = bool
}

// 객체에 직접 접근x, 제공된 함수 사용하기 
function login() {
  setLogin(true)
  setValidToken(true)
}

// 함수
function func() {
  return this
}

// 객체의 메서드
const obj = {
  method() {
    return this
  }
}

// 생성자 함수 
// Class가 나와서 사용할 일이 잘 없다. 하지만 누군가는 사용하고 있으니 알아두기
function Func() {
  return this
}

function toggleDisplay(isToggle) {}

function sum(sum1, sum2) {}

function genRandomNumber(min, max) {}

function timer(start, stop, end) {}

function genSquare(top, right, bottom, left) {}

function createCar({ name, brand, color, type }) {
  return {
    name,
    brand, 
    color,
    type 
  }
}

function createCarousel({ margin = 0, center = false, navElement = 'div' } = {}) {

  return {
    margin,
    center,
    navElement
  }
}

console.log(createCarousel())

const required = argName => {
  throw new Error(`required is ${argName}`)
}

function createCarousel({
  margin = required('margin'),
  center = false,
  navElement = 'div'
} = {}) {
  // ... some code 
}

function sumTotal(...args) {
  return args.reduce(
    (acc, curr) => acc + curr
    )
}

function sumTotal(init, ...args) {
  console.log(init)
  return args.reduce(
    (acc, curr) => acc + curr
    )
}

function handleClick() {
  return setState(false)
}

function showAlert(message) {
  return alert(message)
}

const user = {
  name: 'Poco',
  getName: () => {
    return this.name
  }
}

class Parent {
  parentMethod() {
    console.log('parentMethod')
  }

  parentMethodArrow = () => {
    console.log('parentMethodArrow')
  }

  overrideMethod = () => {
    return 'Parent'
  }
}

class Child extends Parent {
  childMethod() {
    super.parentMethod()
  }

  overrideMethod() {
    return 'Child'
  }
}

const child1 = new Child().overrideMethod(); // Parent
// 부모의 메서드가 호출된다. 화살표가 아닌 일반 함수로 만들면 오버라이드 된다.

function register() {
  const isConfirm = confirm(
    '회원가입에 성공했습니다.'
  )

  if (isConfirm) {
    redirectUserInfoPage()
  }
}

function login() {
  const isConfirm = confirm(
    '로그인에 성공했습니다.'
  )

  if (isConfirm) {
    redirectIndexPage()
  }
}

function confirmModal(message, cbFunc) {
  const isConfirm = confirm(message)

  if(isConfirm && cbFunc) {
    cbFunc()
  }
}

function register() {
  cconfirmModal('회원가입에 성공했습니다.', redirectUserInfoPage)
}

function login() {
  cconfirmModal('로그인에 성공했습니다.', redirectIndexPage)
}

let num1 = 10
let num2 = 20

function impureSum1() {
  return num1 + num2
}

function impureSum2(newNum) {
  return num1 + newNum
}

function pureSum(num1, num2) {
  return num1 + num2
}

const obj = { one: 1 }

function changeObj(targetObj) {
  targetObj.one = 100

  return targetObj
}

changeObj(obj)
obj // { one: 100 } , 변경되어 있다! 비순수 함수

const obj = { one: 1 }

function changeObj(targetObj) {
  return {...targetObj, one: 100 }
}

changeObj(obj)
obj // { one: 1 } , 원래 객체의 값은 그대로, 순수 함수

function add(num1) {
  return function sum(num2) {
    return num1 + num2
  }
}

const addOne = add(1)(3) // 4
const addTwo = add(2)
addTwo(1) // 3

function add(num1) {
  return function (num2) {
    return function (calculateFn) {
      return calculateFn(num1, num2)
    }
  }
}

function sum(num1, num2) {
  return num1 + num2
}

function multiple(num1, num2) {
  return num1 * num2
}

const addOne = add(1)(2)
const sumAdd = addOne(sum) 
const sumMultiple = addOne(multiple)

function log(value) {
  return function (fn) {
    fn(value)
  }
}

const logFoo = log('foo')

logFoo((v) => console.log(v))
logFoo((v) => console.info(v))
logFoo((v) => console.error(v))
logFoo((v) => console.warn(v))

const arr = [1, 2, 3, 'A', 'B', 'C']

const isNumber = (value) => typeof value === 'number'
const isString = (value) => typeof value === 'string'

arr.filter(isNumber)
arr.filter(isString)

function isTypeOf(type) {
  return function(value) {
    return typeof value === type
  }
}

const isNumber = isTypeOf('number')
const isString = isTypeOf('string')

arr.filter(isNumber)
arr.filter(isString)

function fetcher(endpoint) {
  return function (url, options) {
    return fetch(endpoint + url, options)
      .then((res) => {
        if (res.ok) {
          return res.json()
        } else {
            throw new Error(res.error)
          }
        })
        .catch((err) => console.error(err))
    }
}

const naverApi = fetcher('http://~')
const daumApi = fetcher('http://~')

naverApi.fetch('/webtoon').then(res => res)
daumApi.fetch('/search').then(res => res)