20201015, 20201016 TIL

20201015 TIL

// for..of 배열을 만들 때 주로 사용 
const numbers = [10, 20, 30, 40, 50];

for (let number of numbers){
  console.log(number);
}

for (let i = 0; i < numbers.length; i++){
  console.log(numbers[i]);
}

const doggy = {
  name : '멍멍이',
  sound: '멍멍',
  age : 2
};

console.log(Object.keys(doggy));
console.log(Object.values(doggy)); // 객체의 value값들을 보여줌 
console.log(Object.keys(doggy)); // 객체의 key값들을 보여줌.

for (let key in doggy){
  console.log(key); // key값들이 다 나타나줌.
}

// key와 value를 한번에 보려면?
// Template Literal
for(let key in doggy){
  console.log(`${key} : ${doggy[key]}`);
}

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++){
  console.log(superheroes[i]);
}

function print(hero){
  console.log(hero);
}
superheroes.forEach(print)

// 이렇게 줄여서 쓰는 것도 가능하다. 
superheroes.forEach(function(hero){
  console.log(hero);
})

// 이렇게도 가능. 
superheroes.forEach(hero => {
  console.log(hero);
})

// map 함수
// 배열 안의 원소를 변환할 때 사용한다.

// 가령 숫자로 이루어진 배열이 있다고 가정해보자.
const array = [1, 2, 3, 4, 5, 6, 7, 8];

// --------------------------------------------------------------------
// 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들고 싶다면?
// const squared = [];

// 방법 1
// for (let i = 0; i < array.length; i++){
//   squared.push(array[i] * array[i]);
// }
// console.log(squared);

// 방법 2
// forEach로도 구현 가능.
// array.forEach((n) => {
//   squared.push(n * n);
// });
// console.log(squared);

// --------------------------------------------------------------------

// 방법 3
// map으로 구현
const square = (n) => n * n;
const squared = array.map(square);
console.log(squared);

// 이렇게도 줄일 수 있다.
const squared2 = array.map((n) => n * n);
console.log(squared2);

// --------------------------------------------------------------------

// 객체 배열 선언
const items = [
  {
    id: 1,
    text: 'hello'
  },
  {
    id: 2,
    text: 'bye'
  }
];

// 이 객체 배열들을 text로만 이뤄진 문자열 배열로 바꾸고 싶다면?
const texts = items.map((item) => item.text);
console.log(texts);

// --------------------------------------------------------------------
// 원하는 항목이 어디있는지 알아보는 함수
// indexOf
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);

// 다른 예시 (객체로 이뤄진 배열일 경우)
const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '배열 내장함수 배우기',
    done: false
  }
];

// 이 배열에서 id가 3인 것을 찾고 싶다면?
const index2 = todos.indexOf(3);
console.log(index2); // -1은 일치하는 것이 없음을 나타낸다.

// 따라서 id값이 3인것을 찾고 싶다면 findIndex()를 써야 한다.
const index3 = todos.findIndex((todo) => todo.id === 3);
console.log(index3);

// find()함수도 존재한다.
// 해당 원소를 그냥 가져온다.
const todo = todos.find((todo) => todo.id === 3);
console.log(todo);

// 조건을 넣을 수도 있다.
const todo2 = todos.find((todo) => todo.done === false);
console.log(todo2);


// indexOf, find, findIndex는 가장 첫번째로 찾은 항목만 알려준다. 
// indexOf : 특정 값이랑 일치하는 것을 찾을 때 
// findIndex : findIndex내부에 함수를 넣어 특정 값을 조건으로 찾아서 몇번째인지 찾아줌
// find : find는 위에처럼 찾은 값 자체를 반환한다. 

// filter
// 특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 것.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '배열 내장함수 배우기',
    done: false
  }
];

// 기존의 배열을 건드리지 않고 새로운 배열을 만들어낸다.
// const tasksNotDone = todos.filter((todo) => todo.done === false);
const tasksNotDone = todos.filter((todo) => !todo.done); // done값이 false인게 나타남.
console.log(tasksNotDone);

// --------------------------------------------------------------------

// splice
// 배열에서 특정 항목을 제거할 때 사용하는데
// 제거 과정에서 해당 원소가 몇번째인지 명시해주어야 한다.
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
console.log(index);

// 이때, splice()의 결과값은 제거해낸 배열들을 나타낸다.
const spliced = numbers.splice(index, 2); // index부터 몇개를 지우겠다. 2이라 하면 두개를 지우겠다는 것.
console.log(numbers);
console.log(spliced);

// --------------------------------------------------------------------
console.log('-----------------------------------------');
// slice
// splice는 배열을 잘라낼 때 사용한다.
// 다만 slice는 기존의 배열을 건드리지 않으며 패러미터에 넣는 값도 다르다.

const numbers2 = [10, 20, 30, 40];

const sliced = numbers2.slice(0, 2); // 몇번 인덱스부터 몇번 인덱스 전까지 자를지를 의미한다. 
console.log(sliced);
console.log(numbers2);

• 회식하고 뻗어서 16일에 글을 올리지 못했다.. 그래도 대표님이 정말 맛있는 고기를 사주셨다ㅎㅎ

20201016 TIL

// shift, pop, unshift, push

// shift
// 첫번째 원소를 배열에서 추출해준다.
const numbers = [10, 20, 30, 40];

const value = numbers.shift();
console.log(value);

// shift는 기존의 배열을 수정하게 된다. 그래서 기존 첫번째 원소인 10이 사라지게 된다. 
console.log(numbers);


// pop 
// 마지막 원소를 배열에서 추출해준다.
const numbers2 = [10, 20, 30, 40];
const value2 = numbers2.pop();
console.log(value2);
console.log(numbers2); 


// unshift
const numbers3 = [10, 20, 30, 40];
numbers3.unshift(5);
// numbers3 맨 앞부분에 요소가 추가된다.
console.log(numbers3);

// push(), pop() & unshift(), shift()가 짝을 이룬다. 
// 각각 첫번째 요소와 마지막 요소에 영향을 미친다. 
// 넷다 배열에 직접적으로 영향을 미친다. 

// --------------------------------------------------

// concat()
// 여러 배열을 하나의 배열로 합쳐준다. 
// 근데 concat은 기존의 배열을 건드리지 않는다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const concated = arr1.concat(arr2);
console.log(concated);


// es6의 spread연산자 
const concated2 = [...arr1, ...arr2];
console.log(concated2);


// join()
// 배열 안에 있는 값들을 문자열 형태로 합쳐줄 때 사용한다. 
const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 해당 배열을 쉼표 사이사이에 넣어서 하나의 문자열로 만들어줌. 

// 패러미터 안에는 separator임. 
console.log(array.join(" --- "));

// reduce()
// 주로 배열이 주어졌을 때 배열 안의 모든 값들을 사용하여 어떤 값을 연산할 때 사용한다. 
const numbers = [1, 2, 3, 4, 5];

// 모든 배열의 원소들을 합해서 총합을 구해보자. 
// 방법 1
let sum = 0;
numbers.forEach(n => {
  sum += n;
})

console.log(sum);

// 방법 2 (reduce함수 사용)
// accumulator 는 누적된 값을 의미함. 
// current는 처음에 1이 들어가고 그 다음에 차차 다음 원소가 들어간다. 
// 첫번째 패러미터에는 함수가 들어가는 것. 
const sum2 = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum2);

// index는 reduce에서 이 함수가 각 원소에 대하여 실행이 될텐데 
// 이때 index는 각 원소가 몇번째 아이템인지 알려준다. 그럼 0, 1, 2, 3, 4까지 실행될 것. 
// array는 함수를 실행하고 있는 자기 자신을 의미한다. 
const avg = numbers.reduce((accumulator, current, index, array) => {
  if(index === array.length - 1){
    // 현재 처리하고 있는 배열 원소가 맨 마지막꺼라면 ... (-1은 인덱스가 0부터 시작하기 때문)
    // 그래서 인덱스가 4라면..(마지막 원소라면) 
    return (accumulator + current) / array.length;
  }

  return accumulator + current;
}, 0);
console.log(avg);


// reduce()의 다른 예시 
const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];

// 각 알파벳이 몇개씩 있는지 세서 객체에 결과를 넣어줄 것.
const counts = alphabets.reduce((acc, current) => {
  // 여긴 코드블럭이다. 밑에 객체로 초기화시켜준 것과 헷갈리면 안된다. 
  if (acc[current]){
    // 만약 acc에 current가 존재한다면?
    acc[current] += 1;
  } else {
    acc[current] = 1;
  }
  return acc;


}, {}) // 비어있는 객체로 acc를 초기화하였다. 

console.log(counts);

// 프로토타입과 클래스 - 객체 생성자 

// 객체 생성자를 만들 땐 주로 대문자로 시작 
function Animal(type, name, sound){
  this.type = type;
  this.name = name;
  this.sound = sound;


  // this.say = function(){
  //   console.log(this.sound);
  // }
}

// 프로토타입 사용하기 
Animal.prototype.say = function(){
  console.log(this.sound);
}

const dog = new Animal('개', '멍멍이', '멍멍');

const cat = new Animal('고양이', '냐옹이', '냐옹');


dog.say();
cat.say();

// 값을 재사용하고싶다!
Animal.prototype.sharedValue = 1;
console.log(dog.sharedValue);
console.log(cat.sharedValue);

// 프로토타입의 역할이란..
// 객체 생성자로 뭔갈 만들었을 때 그걸 만든 객체들끼리 공유할 수 있는 어떠한 값이나 함수를 
// 자바스크립트의 객체 생성자로 만든 함수에 프로토타입으로 설정을 할 수 있다.  

// 프로토타입과 클래스 - 객체 생성자 

// 객체 생성자를 만들 땐 주로 대문자로 시작 
function Animal(type, name, sound){
  this.type = type;
  this.name = name;
  this.sound = sound;
}

// 프로토타입 사용하기 
Animal.prototype.say = function(){
  console.log(this.sound);
}

// Animal이 가지는 것을 재사용하여 Dog, Cat 객체생성자를 만들어 보자.

function Dog(name, sound){
  Animal.call(this, '개', name, sound);
}

function Cat(name, sound){
  Animal.call(this, '고양이', name, sound);
}

Dog.prototype = Animal.prototype;
Cat.prototype = Animal.prototype;


// Dog, Cat이라는 객체생성자 함수를 만들었다고 가정해보자. 
const dog = new Dog('멍멍이', '멍멍');
const cat = new Cat('냐옹이', '냐옹');


dog.say();
cat.say();

위의 코드를 class를 이용하여 다시 해보자.

// JS에서는 클래스라는 기능이 없었다.
// 클래스는 C++, C#, Java, PHP에는 있지만... 비슷한 작업을 구현하기 위해 항상 함수를 써왔었다.
// 근데 es6에서 class문법이 도입되었는데, 다른 언어에서의 class와 똑같은 것은 아니지만 여태 함수로 구현해온 것을
// 간략하고 알기 쉽게 구현할 수 있도록 해준다.

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }

  // say라는 함수를 클래스 내부에 구현하였는데 함수를 만들면 자동으로 prototype으로 등록이 된다.
  say() {
    console.log(this.sound);
  }
}

console.log(Animal.prototype.say); // 함수가 설정되어있음을 확인할 수 있다.

const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

// 그리고 class를 쓰면 상속할 때 더욱 쉽게 할 수 있다.

class Dog extends Animal {
  // 기존 animal에서 사용하는 constructor를 덮어 쓸 것.
  // animal이 가지는 constructor를 먼저 호출하고나서 자신이 해야할 일을 처리할 수 있다.
  constructor(name, sound) {
    super('개', name, sound);
  }
}

class Cat extends Animal{
  constructor(name, sound){
    super('고양이', name, sound);
  }
}


const dog2 = new Dog('멍멍이', '멍멍');
const cat2 = new Cat('고양이', '야옹');
const cat3 = new Cat('야오오오옹이', '야오오오오옹');

dog2.say();
cat2.say();
cat3.say();

인강들으면서 따라 친걸 그대로 올렸네 ㅜ
만들어가면서 공부해야 재밋지 공부공부공부하려니 재미가 없다...