수업일지 38일차 (23/11/13)

---

 

수업내용 정리 (VSCode - JS)

 

1. Json

  <script>
    const user = {
      name: 'kim',
      age: 30,
      emails: ['thekim@gmail.com', 'neo@naver.com']
    }
    console.log(user)

    // const str=JSON.stringify(user)
    // console.log('str', str);
    // console.log(typeof str);
    // const obj=JSON.parse(str)
    // console.log('obj', obj);
    //개발자도구 application
    //로컬스토리지- 사이트에 종속된 반영구 데이터 저장소
    //세션스토리지- 페이지 닫으면 사라지는 데이터 저장소
    //setItem은 값을 문자로 저장해야 한다.
    //localStorage.setItem('user',user) //user객체를 문자화해야 한다.
    localStorage.setItem('user', JSON.stringify(user))
    //console.log(localStorage.getItem('user'))
    console.log('jsObj:', JSON.parse(localStorage.getItem('user')))
    //localStorage.removeItem('user') 
    //localStorage 데이터 수정
    const str = localStorage.getItem('user')
    const obj = JSON.parse(str)
    obj.age = 22
    console.log(obj);
    localStorage.setItem('user', JSON.stringify(obj))
  </script>

 

 

2. 구조 분해 할당

  <script>
    //구조 분해 할당(Destructuring assignment)
    //비구조화 할당
    const user = {
      name: 'kim',
      age: 30,
      email: 'thekim@gmail.com'
    }
    //let name=user.name
    //let age=user.age
    //let email=user.email   불편함..

    //속성이 많을 때 필요한것만 순서상관없이 추출시 유리
    //address속성값이 없다면 'Korea'가 기본값이 된다.
    const {
      age,
      name: irum,
      address = 'Korea'
    } = user
    console.log(age)
    console.log(name)
    //위를 구조분해할당 없이 추출해서 age, name변수에 저장해 볼것
    console.log(`사용자의 이름은 ${irum}입니다`);
    console.log(`${irum}의 나이는 ${age}세입니다`);
    console.log(`${irum}의 이메일은 ${user.mail}입니다`);
    console.log(address);

    showNameAgeInfo(user)

    function showNameAgeInfo({
      name,
      age
    }) {
      console.log(`name=${name},  age=${age}`);
    }

    const fruits = ['Apple', 'Banana', 'Cherry']
    //fruits가 배열이므로 []로 구조분해할것
    //const [a,b,c,d='Mango']=fruits  //순서대로 추출함 
    //console.log(a,b,c,d)  //Apple Banana Cherry undefined
    // const [,b]=fruits  //두번째요소 Banana만 추출함 
    // console.log(b)  //Banana
    const [, , b] = fruits //세번째요소 Cherry만 추출함 
    console.log(b) //Cherry
  </script>

 

 

3. 전개 연산자

  <script>
    //전개 연산자(Spread)
    const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
    console.log(fruits)
    console.log(...fruits)
    //console.log('Apple','Banana', 'Cherry')와 동일하게 호출
    //c(last매개변수)는 ['Cherry','Orange'] 인자를 받는다                             
    // function toObject(a,b,...c){  
    //   return{
    //     //a: a, b: b, c: c
    //     a, b, c   //키,값변수가 같으면 1번만 명시해도 됨 
    //   }
    // }
    const toObject = (a, b, ...c) => ({
      a,
      b,
      c
    })
    console.log(toObject(...fruits)); //호출 인자가 많을 때 유리함
    //console.log(toObject(fruits[0],fruits[1],fruits[2],fruits[3])); 와 동일하게 호출
  </script>

 

 

4. 불변성

  <script>
    //데이터 불변성(Immutability)
    //원시 데이터 : String, Number, Boolean, undefined, null
    //(값이 같으면 같은 참조값을 갖는다.)
    //(결국, 원시 데이터는 참조값보다는 상수처럼 이해하면 된다.)
    //참조형 데이터: Object, Array, Function
    //(참조형은 불변성이 없다.)
    //(결국, 참조형의 새로운 객체는 새로운 참조값을 갖는다. )
    //----------------------------------------------
    //1번지:      2번지:      3번지:      4번지:
    //----------------------------------------------
    // let a=1
    // let b=4
    // console.log(a,b, a===b)
    // b=a  //참조값이 복사된다.
    // console.log(a,b, a===b)
    // b=7  //7의 참조값이 복사된다. 
    // console.log(a,b, a===b)
    // let c=1
    // console.log(a,b, b===c)
    let a = {
      k: 1
    }
    let b = {
      k: 1
    }
    console.log(a, b, a === b)
    a.k = 7
    b = a //객체값복사가 아니라 참조값이 복사된다.(주의)
    console.log(a, b, a === b)
    a.k = 2 //b객체의 k속성값도 2로 변경되니 주의하자.
    console.log(a, b, a === b)
    let c = b
    console.log(a, b, c, a === c)
    a.k = 9
    console.log(a, b, c, a === c)
  </script>

 

 

5. 얕은 복사와 깊은 복사

  <script>
    //얕은 복사(Shallow copy), 깊은 복사(Deep copy)
    const user = {
      name: "kim",
      age: 40,
      emails: ['thekim@gmail.com']
    }
    //const copyUser =user  //얕은복사
    //const copyUser =Object.assign({}, user)  //깊은복사
    let copyUser = {
      ...user
    } //전개연산자 활용 깊은복사같지만 emails는 얕은복사가 된다.
    let copyUser = {
      name: user.name,
      age: user.age,
      email: user.emails
    }
    console.log(copyUser)
    console.log(copyUser === user) //false 깊은 복사
    console.log(copyUser.email === user.emails) //true 그러나 emails는 얕은복사

    user.age = 22
    console.log('user', user)
    console.log('copyUser', copyUser)
    console.log('-------------');
    console.log('-------------');
    user.emails.push('neo@naver.com')
    console.log(user.emails, copyUser.emails); //얕은복사이므로 같은요소값이 출력됨
    console.log('user', user);
    console.log('copyUser', copyUser);
    //deep copy는 lodash 라이브러리의 cloneDeep()를 이용해서 쉽게 할수 있지만
    //실력을 위해 직접구현해 보자 
    copyUser = {}
    deepCopy(user, copyUser)
    console.log('deepCopy call after')
    console.log(user.emails === copyUser.emails); //깊은복사가 되어 false
    user.emails.push('xxx@naver.com')
    console.log('user', user); //['thekim@gmail.com','neo@naver.com','xxx@naver.com']
    console.log('copyUser', copyUser); //['thekim@gmail.com','neo@naver.com']

    function deepCopy(source, target) {
      target.name = source.name
      target.age = source.age
      target.emails = []
      //문제> source.emails 배열의 값을 순차적으로 target.emails배열로 복사하시오
      for (let email of source.emails) {
        target.emails.push(email)
      }
      //source.emails.forEach(email => target.emails.push(email));
      //target.emails.push(...source.emails)
    }
  </script>

 

---

• 37일차는 오후에 조퇴를 하는 바람에 일지가 없다.

 

---