step 1

얕은 복사

전개 연산자 {... 객체} 혹은 Object.assign({}, 객체) 을 활용하면 새로 메모리를 만들어서 사용하기 때문에 

기존 객체를 수정해도 참조되고 있는 객체의 데이터는 변하지 않는다.

하지만 해당 객체 안의 배열은 기존의 객체를 참조하고 있어서 참조 데이터 안의 참조 데이터가 존재한다면 그 안 까지는 적용되지 않는다.

// 얕은 복사(Shallow copy), 깊은 복사 (Deep copy)
const user = {
  name: 'happy',
  age: 33,
  email: ['happy@naver.com'] 
}
const copyUser = user
console.log(copyUser === user)

// 바라보고 있는 쪽의 데이터가 변하면 참조하고있는 데이터 또한 변한다.
user.age = 22
console.log('user', user)
console.log('copyUser', copyUser)

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

//  얕은 복사
//  {}: 대상 객체, user: 참조 객체 (새로운 메모리주소가 할당 된다)
// const copyUser2 = Object.assign({}, user)
//  전개 연산자를 이용해서 사용 가능
const copyUser2 = {...user}
console.log(copyUser2 === user)
// 기존의 데이터가 변해도 참조하고 있는 데이터는 변하지 않는다.
user.age = 99
console.log('user', user)
console.log('copyUser2', copyUser2)

console.log('----------')
console.log('----------')
// email은 배열 형태이기 때문에 기존의 메모리를 그대로 바라보고 있다.
user.email.push('hi@naver.com')
console.log(user.email === copyUser2.email)
console.log('user.email', user.email)
console.log('copyUser2.email', copyUser2.email)

깊은 복사 (JS로만 구성하기에는 어렵기 때문에 lodash를 활용하여 학습)

참조형 데이터 안의 참조형 데이터가 있다면 깊은 복사를 사용하는 것을 권장

터미널에서 lodash 설치

명령어: npm i lodash

확인

JS 파일에 lodash 사용(import): import _ from 'lodash'

import _ from 'lodash'

// lodash 사용
import _ from 'lodash'

// 깊은 복사
const copyUser3 = _.cloneDeep(user)
console.log(copyUser3 === user)
// 기존의 데이터가 변해도 참조하고 있는 데이터는 변하지 않는다.
user.age = 99
console.log('user', user)
console.log('copyUser3', copyUser3)
user.email.push('hello@naver.com')
console.log(user.email === copyUser2.email)
console.log('user.email', user.email)
// 참조데이터안의 참조데이터 또한 새로 메모리가 생성되어 함께 변하지 않는다.
console.log('copyUser3.email', copyUser3.email)

lodash 문서(검색: lodash)

참고 사이트

https://lodash.com/

원시 데이터는 기존에 메모리가 생성되었다면

나중에 같은 값의 메모리를 선언했다면 새로 메모리를 할당하지 않고 기존의 메모리를 이용한다.

즉. 생긴것이 같으면 같은 메모리를 사용

// 데이터 불변성(Immutablility)
// 원시 데이터: String, Number, Boolean, undefined, null
// 참조형 데이터: Object, Array, Function
let a = 1;
let b = 4
console.log(a, b, a === b)

b = a 
// 같은 메모리 주소를 바라보기 때문에 true
console.log(a, b, a === b)

a = 7
console.log(a, b, a === b)

let c = 1
// 기존의 1이라는 메모리를 바라보기 때문에 true
console.log(b, c, b === c)

참조 데이터는 불변성이 없다. 즉, 선언을 하면 메모리가 항상 새로 생성 된다.

같은 메모리 주소를 바라보게 되면 원래 메모리 주소의 데이터가 변하면 참조하고 있는 데이터들도 모두 변한다.

생김새가 같더라고 false가 나올 수 있다.

let a = { k: 1}
let b = { k: 1}
console.log(a, b, a === b)
a.k = 7
b = a
// b 는 a의 메모리 주소를 바라보게 되기 때문에 true
console.log(a, b, a === b)
a.k = 2
// a의 데이터를 수정해도 b는 a의 메모리를 바라보기 때문에 true (값이 자동으로 b 또한 변한다.)
console.log(a, b, a === b)
let c = b
console.log(a, b, c, a === c)

참조형 데이터는 = 기호를 사용하지 않고 복사라는 기능을 사용하는 것을 권장한다.

전개연산자: 배열데이터를 문자형태로 바꿔서 출력해주는 기능

문법: (... 배열이름)

// 전개 연산자 (spread)
const fruits = ['Apple', 'Banana', 'Cherry']
// 배열 데이터 출력됨
console.log(fruits)
// 문자 데이터 형태로 출력됨
console.log(...fruits)
// console.log('Apple', 'Banana', 'Cherry')

// 배열데이터를 문자형으로 추출하여 객체데이터로 값을 넣어주는 함수 예제
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
  }
}

축약형(key, value 명칭이 같기 때문에 한번만 써도 된다.)

function toObject2(a, b, ...c) {
  return {
    a,
    b,
    c
  }
}

화살표 함수로 변환

const toObject2 = (a, b, ...c) => ({a, b, c})

결과 값은 모두 동일

구조 분해 할당: 배열, 객체데이터를 선언하고 그 배열에서 원하는 데이터를 뽑아서 선언하여 사용할 수 있는 방법

장점: 배열의 데이터 많은 경우, 그 중 필요한 데이터만 뽑아서 쓰는게 가능하다.

각 타입에 맞게 괄호를 입력해야 한다.(객체 데이터: { }, 배열: [ ])

객체데이터는 이름으로 추출하지만

배열데이터의 경우 순서대로 추출해야한다.

// 구조 분해 할당 (Destructuring assignment)
// 비구조화 할당
const user = {
  name: 'happy',
  age: 43,
  email: 'happy@naver.com'
}

// 배열의 원하는 데이터만 뽑아서 선언 할 수있다.
// const {name, age, email, address } = user

// 기본값 설정가능(기존값이 있을경우 재지정 불가) address='korea'
// 데이터 명칭을 사용자가 바꿔서 사용할 수 있음 name: happy
const {name: happy, age, email, address='korea' } = user

console.log(`사용자의 이름은 ${name} 입니다.`)
console.log(`${name}의 나이는 ${age}입니다`)
console.log(`${happy}의 이메일 주소는 ${user.email}입니다`)
console.log(address)



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

순서대로 추출하기 때문에 이전 데이터가 존재한다면 공백으로 주고 쉼표(,) 를 앞에다가 붙여준다.

const fruits = ['Apple', 'Banana', 'Cherry']
// const [a, b, c, d] = fruits
// console.log(a, b, c, d)
// 원하는 데이터만 추출하는 방법
const [, b] = fruits
console.log(b)

참고(검색: object mdn)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object.assign(): 대상 객체로 속성을 복사

원본이 바뀌는 문법: const target = Object.assign(A, B)

원본이 유지되는 문법: const target = Object.assign({}, A, B)

// Object 예제
const userAge = {
  // Key: value
  name: 'happy',
  age: 48
}

const userEmail = {
  name: 'happy',
  email: 'happy@naver.com'
}
// 원본을 유지하는 방법
const target = Object.assign({}, userAge, userEmail)
console.log(target)
console.log(userAge)
// 같은 메모리를 바라보기 때문에 true 반환
console.log(target === userAge)


// 정적메소드: 복사 기능
const target2 = Object.assign(userAge, userEmail)
console.log(target2)
console.log(userAge)
// 같은 메모리를 바라보기 때문에 true 반환
console.log(target2 === userAge)


const a = { k: 123}
const b = { k: 123}
// 메모리 주소가 다르기 때문에 false 반환
console.log(a === b)

Object.keys(): 지정된 객체의 고유 한 열거 가능한 속성 이름 배열을 반환 하며 일반 루프와 동일한 순서로 반복

const user = {
  name: 'happy',
  age: 90,
  email: 'happy@navver.com'
}

const keys = Object.keys(user)
console.log(keys)
// ['name', 'age', 'email']

// 인덱싱 방식
console.log(user['email'])

// key라는 매개변수이름은 변경할 수 있음
// key에 해당하는 값들만 추출해서 배열데이터로 만들수있음
const values = keys.map(key => user[key])
console.log(values)

.filter(): 지정한 배열안의 데이터를 필터링하여 조건에 맞는 데이터를 반환한다

//  .filter()
//  지정한 배열안의 데이터를 필터링하여 조건에 맞는 데이터를 반환한다
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = numbers.map(number => {
  // true, false 반환
  return number < 3
})
console.log(a)

const b = numbers.filter(number => {
  // 3보다 작은 데이터만 반환하여 새로운 배열에 입력
  return number < 3
})
console.log(b)

화살표 함수 최적화 코드로 변환

// 화살표 함수 최적화 변환
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = numbers.map(number => number < 3 )
console.log(a)

const b = numbers.filter(number => number < 3 )
console.log(b)

.find(): 조건에 해당하는 배열 데이터를 찾아준다(찾은 후 뒤에 데이터는 무시하고 종료된다. 맨처음 한가지만 찾아준다,)

// .find() .findIndex()
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry', 'Boat']

const a = fruits.find(fruit => {
  // 대문자 B로 시작하는 데이터를 반환
  // 찾은 후 종료됨
  return /^B/.test(fruit)
})
console.log(a)

.findIndex: 조건에 해당하는 배열 데이터의 위치 값을 찾아준다(찾은 후 뒤에 데이터는 무시하고 종료된다. 맨처음 한가지만 찾아준다,)

const b = fruits.findIndex(fruit => {
  // 대문자 B로 시작하는 데이터를 반환
  // 찾은 후 종료됨
  return /^B/.test(fruit)
})
console.log(b)

간소화 표현

// 간소화 표현
const a = fruits.find(fruit => /^B/.test(fruit))
console.log(a)

// 찾아진 데이터의 위치값을 반환
const b = fruits.findIndex(fruit => /^B/.test(fruit))
console.log(b)

.includes(): 배열데이터에 해당 데이터가 포함되어있는지 boolean 데이터로 반환

// .includes()
// 배열데이터에 해당 데이터가 포함되어있는지 boolean 데이터로 반환
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry', 'Boat']

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

const b = fruits.includes('happy')
console.log(b)

push() .unshift(): 원본 수정됨  주의!

push(): 가장 마지막에 데이터를 추가 한다.

unshift(): 가장 앞에 데이터를 추가 한다.

// push() .unshift()
// 원본 수정됨  주의!
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry', 'Boat']

numbers.push(5)
console.log(numbers)

numbers.unshift(0)
console.log(numbers)

.reverse(): 원본 수정됨 주의!, 배열 데이터 순서를 거꾸로 변환한다.

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

numbers.reverse()
fruits.reverse()

console.log(numbers)
console.log(fruits)

.splice(n1, n2):  원본 수정됨 주의!, 인덱스 번호 n1에 해당하는 데이터 n2가지를 제거

// .splice()
// 원본 수정됨 주의!
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry', 'Boat']

// 인덱스 번호 2번에 데이터 1가지를 제거
numbers.splice(2, 1)
console.log(numbers)

.splice(n1, n2, n3):  원본 수정됨 주의!, 인덱스 번호 n1에 해당하는 데이터 n2가지를 제거하고 n3을 추가 한다

// 2번째 데이터의 999를 추가(그 뒤는 밀림 처리)
numbers.splice(2, 0, 999)
console.log(numbers)

참조 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array