Javascript

관련 내용 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

 

---

Javascript data type: String(' ', " ", ` `), Number, Boolean(True, False), undefined, null, Array([ ]), Object( {  })

1. String

const result = 'Hello world!'.indexOf('world') // -1 : 일치하는 값이 없음
console.log(result) // 6
// String.prototype.indexOf()

const str = '01234567'
console.log(str.length) // 8
// console.log('0123'.length)
console.log(str.indexOf('HERO') !== -1) // false
console.log(str.slice(0, 3)) //012
console.log(str.replace('4567', '-4567')) // 0123-4567
console.log(str.replace('4567', '')) // 0123

const mail = 'the@gmail.com'
console.log(mail.match(/.+(?=@)/)[0]) // the

const cha = '    Hello world    '
console.log(cha.trim()) //Hello world

2. Number 

const pi = 3.141592665368979
console.log(pi)

const str = pi.toFixed(2)
console.log(str)         // 3.14
console.log(typeof str)  // string

const integer = parseInt(str)  // 정수화
const float = parseFloat(str)  // 실수화
console.log(integer)
console.log(float)
console.log(typeof integer, typeof float)

// Math mdn
console.log('abs: ', Math.abs(-12))
console.log('min: ', Math.min(2,8))
console.log('max: ', Math.max(2,8))
console.log('ceil: ', Math.ceil(3.14))
console.log('floor: ', Math.floor(3.14))
console.log('round: ', Math.round(3.14))
console.log('random: ', Math.random())

3. 배열(Array)

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

console.log(numbers[1])
console.log(fruits[0])

//.length
console.log(numbers.length)
console.log(fruits.length)
console.log([1, 2].length)
console.log([].length)

//.concat() 원본 손상 없음
console.log(numbers.concat(fruits))  // [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']
console.log(numbers)
console.log(fruits)

//.forEach()
fruits.forEach((fruit, i) => {
  console.log(fruit, i)
})

//.map()
const a = fruits.forEach((fruit, i) => {
  console.log(`${fruit}-${i}`)
})
console.log(a)  // Apple-0 Banana-1 Cherry-2 undefined

const b = fruits.map((fruit, i) => ({
    id: i,
    name: fruit
}))
console.log(b)  // [{...}, {...}, {...}]


//.filter()
const a = numbers.map(number => number < 3)
console.log(a)  // [true, true, false, false]

const b = numbers.filter(number => number < 3)
console.log(b) // [1, 2]
console.log(numbers) // [1, 2, 3, 4]

// .find() .findIndex()
const a = fruits.find(fruit => /^C/.test(fruit))
console.log(a) // Cherry
const b = fruits.findIndex(fruit => /^C/.test(fruit))
console.log(b) // 2

.includes()
const a = numbers.includes(3)
console.log(a) // true

const b = fruits.includes('HERO')
console.log(b) // false


//.push() .unshift()
//원본이 수정됨

const numbers = [1, 2, 3, 4]
numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5]

numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4, 5]

//.reverse()
//원본이 수정됨
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.reverse()
fruits.reverse()

console.log(numbers)  // [4, 3, 2, 1]
console.log(fruits)   // ['Cherry', 'Banana', 'Apple']

//.splice() 
//원본이 수정됨, 삭제 + 삽입 가능
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.splice(2, 1)
console.log(numbers) // [1, 2, 4]

numbers.splice(2, 0, 3)
console.log(numbers) // [1, 2, 3, 4]

fruits.splice(2, 0, 'Orange')
console.log(fruits) // ['Apple', 'Banana','Orange', 'Cherry']

4. 객체(Object)

const userAge = {
  // key: value
  name: 'IRONMAN',
  age: 100
}
const userEmail = {
  name: 'IRONMAN',
  email: 'the@marvel.com'
}
const target = Object.assign(userAge, userEmail)
console.log(target)               // {name: "IRONMAN", age: 100, email: "the@marvel.com"}
console.log(userAge)              // {name: "IRONMAN", age: 100, email: "the@marvel.com"}
console.log(target === userAge)   // true

const a = { k: 123}
const b = { K: 123}
console.log(a === b)              // false

const user = {
  name: 'IRONMAN',
  age: 100,
  email: 'the@marvel.com'
}
const keys = Object.keys(user)
console.log(keys)
// ['name', 'age', 'email']

console.log(user['email']) // the@marvel.com

const values = keys.map(key => user[key])
console.log(values)   //  ["IRONMAN", 100, "the@marvel.com"]

---

구조 분해 할당

const user = {
  name: 'IRONMAN',
  age: 100,
  email: 'the@marvel.com',
  address: 'USA'
}
const {name: stark, age, email, address = 'Korea'} = user
// E.g, user.address

console.log(`사용자의 이름은 ${stark}입니다.`)            // 사용자의 이름은 IRONMAN입니다.
console.log(`${stark}의 나이는 ${age}살 입니다.`)        // IRONMAN의 나이는 100살 입니다.
console.log(`${stark}의 이메일 주소는 ${email}입니다.`)  // IRONMAN의 이메일 주소는 the@marvel.com입니다.
console.log(address)                                   // USA

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d)                                // Apple Banana Cherry undefined
const [, e] = fruits
console.log(e)    // Banana

---

전개 연산자

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
console.log(fruits)         //  ["Apple", "Banana", "Cherry"]
console.log(...fruits)      //  Apple Banana Cherry
// console.log('Apple', 'Banana', 'Cherry')

const toObject = (a, b, ...c)  => ({a,b,c})
console.log(toObject(...fruits)) // {a: "Apple", b: "Banana", c: Array(2)}

---

데이터 불변성

// 원시 데이터: String, Number, Boolean, undefined, null
// 참조형 데이터: Obhect, Array, Function
// 메모리 주소를 기준으로 판단

// 원시데이터
let a = 1
let b = 4
console.log(a, b, a === b)    // 1 4 false
b = a
console.log(a, b, a === b)    // 1 1 true
a = 7
console.log(a, b, a === b)    // 7 1 false
let c = 1
console.log(b, c, b === c)    // 1 1 true

// 참조형 데이터 -> 메모리의 참조 주소만 바라본다
let a = { K: 1}
let b = { K: 1}
console.log(a, b, a === b)   // {K: 1} {K: 1} false
a.k = 7
b = a
console.log(a, b, a === b)   // {K: 1, k: 7} {K: 1, k: 7} true
a.k =2
console.log(a, b, a === b)   // {K: 1, k: 2} {K: 1, k: 2} true
let c = b
console.log(a, b, c, a === c) // {K: 1, k: 2} {K: 1, k: 2} {K: 1, k: 2} true
a.k = 9
console.log(a, b, c, a === c) // {K: 1, k: 9} {K: 1, k: 9} {K: 1, k: 9} true

---

얕은 복사, 깊은 복사

// (깊은 복사용) import _ from 'lodash'
const user = {
  name: 'IRONMAN',
  age: 100,
  emails: ['the@marvel.com']
}
const copyUser = Object.assign({}, user)
// const copyUser = {...user}
// (깊은 복사용) const copyUser = _.cloneDeep(user)
console.log(copyUser === user)    // false

user.age = 22
console.log('user', user)         // user {name: "IRONMAN", age: 22, email: Array(1)}
console.log('copyUser', copyUser) // copyUser {name: "IRONMAN", age: 100, email: Array(1)}

console.log('-----')
console.log('-----')

user.emails.push('hurk@marvel.com')
console.log(user.emails === copyUser.emails) // true, (깊은 복사용) false
// console.log('user', user)                 // user {name: "IRONMAN", age: 22, emails: Array(2)}
                                             // (깊은 복사용) user {name: "IRONMAN", age: 22, emails: Array(2)}
// console.log('copyUser', copyUser)         // copyUser {name: "IRONMAN", age: 100, emails: Array(2)}
                                             // (깊은 복사용) copyUser {name: "IRONMAN", age: 100, emails: Array(1)}