Arrays APIs

// Q1. make a string out of an array
{
  const fruits = ['apple', 'banana', 'orange'];
  const result = fruits.join(',');
  console.log(result);
}

// Q2. make an array out of a string
{
  const fruits = '🍎, 🥝, 🍌, 🍒';
  const result = fruits.split(',');
  console.log(result);
  // const result = fruits.split(',', 2);
  // console.log(result);
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse();
  console.log(result);
  console.log(array);
}

// Q4. make new array without the first two elements
{
  // slice == 배열에서 원하는 부분만 return해서 받아오는 아이
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5);
  console.log(result);  //  [3, 4, 5]
  console.log(array);  //  [1, 2, 3, 4, 5]

  // splice == 배열 자체를 수정해주는 아이
  // const array = [1, 2, 3, 4, 5];
  // const result = array.splice(0, 2);
  // console.log(result);  // [1, 2] 
  // console.log(array);  //  [3, 4, 5]
}

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

// Q5. find a student with the score 90
{
  const result = students.find((student) => student.score === 90);
  console.log(result);
}

// Q6. make an array of enrolled students
{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map((student) => student.score);
  console.log(result);
}

// Q8. check if there is a student with the score lower than 50
{
  console.clear();
  const result = students.some((student) => student.score < 50);
  console.log(result);   // true

  const result2 = students.every((student) => student.score < 50);
  console.log(result2);   // false

  const result3 = !students.every((student) => student.score >= 50);
  console.log(result3);    // true
  console.log(!true)   // false
}
console.clear();
// Q9. compute students' average score
{
  const result = students.reduce((prev, curr) => prev.score + curr.score);
  console.log(result / students.length);   // 73.8
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  const result = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();
  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  const result = students
    .map((student) => student.score)
    .sort((a, b) => b - a)
    .join();
  console.log(result);
}

 

 

// start with strings, numbers and booleans
    // let age = 100;
    // let age2 = age;
    // console.log(age, age2);
    // age = 200;
    // console.log(age, age2);


    // let name = 'Wes';
    // let name2 = name;
    // console.log(name, name2);
    // name = 'wesley';
    // console.log(name, name2);


    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];


    // and we want to make a copy of it.
    const team = players;

    console.log(players, team);

    // You might think we can just do something like this:
    // not the same...with numbers, string, boolean
    team[3] = 'Lux';
    // 배열을 업데이트 하면 항상 reference 자체에 변화가 생긴다.
    
    
    // 오, 그냥 복사본을 만들고 싶습니다. How can do that?
    // reference와 배열의 사본을 만들 수 있는 몇 가지 방법이 있습니다.
    // however what happens when we update that array?

    // now here is the problem!

    // oh no - we have edited the original array too!

    // Why? It's because that is an array reference, not an array copy. They both point to the same array!

    // So, how do we fix this? We take a copy instead!
    // const team2 = players.slice();
    // console.log(team2);
    // const team3 = [].concat(players); 
    // console.log(team3);
    // team2[3] = 'Hyobum';
    // team3[3] = 'Hyobum';
    // console.log(team2);
    // console.log(team3);
    // console.log(players);
    // players[0] = 'David';
    // console.log(team2);
    // console.log(team3);
    // console.log(players);


    // 일반적으로 슬라이스가 하는 일은 2개와 3개를 요청하는 것입니다.
    // 그러면 원래 배열은 그대로 유지되지만 
    // 아무것도 전달하지 않으면 슬라이스는 사본의 역할을 할 수 있다.
    // players의 item에 변화를 주더라도 team2에는 아무런 변화가 없다.

    // 세번째 team은 배열을 가져 와서 기존 배열에 연결합니다.
    // 그러면 해당 players 배열의 모든 항목을 빈 배열에 team2와 똑같은 방식으로 작동합니다.

    // one way

    // or create a new array and concat the old one in

    // or use the new ES6 Spread
    // ES6의 Spread operator를 이용하는 방법
    const team4 = [...players];
    team4[3] = 'heee hawww';
    console.log(team4);

    // 스프레드가 하는 일은 iterable에서 항목을 제거하고 이 경우 포함에 넣는다.
    // team4의 item을 변경해도 players의 item들은 변하지 않고 그대로 있다.

    const team5 = Array.from(players)
    // Array.from() 을 이용하는 방법도 있다. 
    team5[3] = 'hahahahahahah';
    // players는 손대지 않은 반면 팀 5은 업데이트되었습니다.


    // now when we update it, the original one isn't changed

    // The same thing goes for objects, let's say we have a person object

    // with Objects
    const person = {
      name: 'Wes Bos',
      age: 80
    };
    // 여기에 사람 객체가 있고 
  
    
    // and think we make a copy:
    // const captain = person;
    // captain.number = 99;
    // 사본이 생기는 것이 아닌 reference를 참조함 => 원본이 변경되버림.
    // 따라서 대신에 Object.assign 을 사용하여 사본을 만들어야 합니다.

    // how do we take a copy instead?
    const cap2 = Object.assign({}, person, { number: 99, age: 12 });
    console.log(cap2);
    // Object.assign을 적고 그 후 전달하는 빈 객체로 시작합니다. => 첫 번째 인수
    // 이 빈 객체 옆에는(,) person 즉 복사하려는 객체를 적습니다. => 두번째 인수
    // 그 옆에는(,) 당신이 원하는 새로운 속성을 적습니다. => 세 번째 인수
    // cap2 라는 person의 reference를 변경하지 않는 object가 만들어졌습니다.
    // cap2 의 item들을 수정하거나 추가하여도 person 원본에는 아무런 변화가 없습니다.

    // We will hopefully soon see the object ...spread

    const cap3 = {...person};
    cap3.name = 'Hyobum';
    console.log(cap3);
    // 얕은 복사? 이것도 원본을 건들이지 않는 사본이 만들어진다. 
    // 하지만 주의해야 할 점이 있음. 그 내용은 밑에...
    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.

    const wes = {
      name: 'Wes',
      age: 100,
      social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
      }
    };

    console.clear()
    // console.log(wes);

    const dev = Object.assign({}, wes);
    // name은 사본의 형식으로 되는 데 반해...
    // social은 원본을 참조하게 된다.

    dev.social.twitter = '@coolman';
    console.log(dev.social);  // {twitter: "@coolman", facebook: "wesbos.developer"}
    console.log(wes.social);  // {twitter: "@coolman", facebook: "wesbos.developer"}

    // 원본의 reference가 그대로 수정되버리는 문제가 있다.
    // 단지 한 수준 깊은 곳에서 개체를 사용할 때 사용할 수 있지만
    // 한 수준 더 깊은 곳으로 가게 되면 원본 reference를 침해하는 문제가 발생합니다. 
    // Deep Cloning을 알게 되면 이러한 문제를 해결할 수 있다. -Team Jupeter


    // wesbos의 추천하진 않지만, 이러한 문제를 해결하는 방법 =>
    const dev2 = JSON.parse(JSON.stringify(wes));

    // 와 같은 방식으로 문제를 해결할 수 있습니다.
    // 이유 : json stringify를 취하기 때문. 
    // 객체를 전달하면 더 이상 문자열이 아닌 문자열로 반환됩니다. 
    // 객체를 사용하면 즉시 json.parse는 개체를 사용하지 않고
    // 전체 사본을 얻고 참조에 대해 전혀 변경이 안되게 하는 것입니다.
    // 이는 불쌍한 사람의 딥 클로닝.........
    // 이 외의 방법 한 두가지를 좀 더 공부하기를 바랍니다.

 

35. Object assign
      let student1 = {
        name: "Superman",
        study: "Javascript"
      }

      let student2 = {};

      Object.assign(student2, student1);

      console.log(student1.name);      // Superman
      console.log(student1.name);      // Superman 

      let student1 = {
        name: "Superman",
        study: {
          field: "JavaScript",
          year: 3 
        } 
      }

      let student2 = {
        name: "Ironman",
        study: {
          field: ""
        },
      };
      // console.log(student2.name);

      Object.assign(student2, student1); 

      // console.log(student1.name);  // Superman
      // console.log(student2.name);  // Superman

      student2.name = "Birdman";
      student2.study.field = "Haskell";

      // console.log(student1.name);  // Superman
      // console.log(student2.name);  // Birdman
      console.log(student2.study);  // { field: 'Haskell', year: 3 }
      console.log(student1.study);  //  { field: 'Haskell', year: 3 }
      console.log(student2.study.field);  // Hakell 
      console.log(student2.study.year);  // 3

      
      let student1 = {
        name: "Superman",
        study: "Javascript"
      }

      let student2 = {
        name: "Ironman",
        study: ""
      };
      console.log(student2.name);  // Ironman

      Object.assign(student2, student1);

      student2.name = "Birdman";

      console.log(student1.name);  // Superman
      console.log(student2.name);  // Birdman
      console.log(student2.study);  // Javascript 
    

      
     36. Object Deep Cloning
      let student1 = {
        name: "Superman",
        study: {
          field: "Javascript",
          year: 3 
        } 
      };

      let student2 = {
        name: "Ironman",
        study: {
          field: ""
        }
      };
      // console.log(student2.name);

      Object.assign(student2, student1);

      // console.log(student2.name);

      student2.name = "Birdman";
      student2.study.field = "Haskell";

      

      // console.log(student1.name);
      // console.log(student2.name);
      console.log(student2.study);  // {field: "Haskell", year: 3}
      console.log(student1.study);  // {field: "Haskell", year: 3}
      console.log(student1.name); // Superman 
      
      // Deep Cloning -> Object 속에 있는 Object도 복사할 때 완전히 새로운 Object가 만들어지게 하는..
    
- 출처: TEAM JUPETER