Dust

let numbers = [10, 20, 3, 16, 45];
let max = min = numbers[0];

console.log(max);
console.log(min);

numbers.forEach(function(number){
    if(number > max){
        max = number;
    }
    if(number < min){
        min = number;
    }

});
console.log(max, min);

이렇게 작성하면 코드도 길고 가독성도 떨어지기 때문에

 Math.max, Math.min 메소드에 apply를 사용

let numbers = [10, 20, 3, 16, 45];
let max = Math.max.apply(null, numbers);
let min = Math.min.apply(null, numbers);

console.log(max, min);

const player : {
// player 객체 속성의 타입을 지정해줌
  name: string,
  age?: number
  // age의 값이 number일 수도, undefined일 수도 있음
} = {
  name: 'dust'
}

여러명의 player 객체를 만들고 싶을 때

type Player = {
// player 객체 속성의 type 지정
  name: string,
  age?: number
}

const PlayerDust : Player = {
      // player type으로 지정했기 때문에 굳이 player를 써줄 필요 없음
                  // Player 타입이라고 지정
  name: 'dust'
}

const Minji : player = {
  name: 'minji'
  age: 10
}

return type 값 지정하기

function playerMaker(name:string){
// type 지정 -> string 값으로 반환함
  return {
    name: name, // 이렇게해도 되지만
    // name 만 써줘도 됨 
  }
}


// 밑에 playMaker 내에 age 값을 추가하기 위해 dust.age = 10 할 경우 오류 남
// playerMaker에는 age에 대한 내용이 없기 때문


function playerMaker(name:string) : Player {
  return {
    name
  }
}

type이 string 인 name 값이 들어간 object를 return 하는 함수

const dust = playerMaker();
// name 값을 입력해주지 않았기 때문에 빨간줄로 오류 표시

const dust = playerMaker('dust');
// 오류x

화살표 함수로 변환

const playerMaker = (name:string) : Player => ({name})

지원되는 브라우저

chrome, edge, Firefox, opera, safari, samsung internet, IE.. 

드래그 시 색상 및 css 적용 가능

예시

::-webkit-selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}
::-moz-selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}
::selection{
    background: #fcc419;
    color: white;
    text-shadow: 1px 1px 2px #222;
}

- text-weight 는 적용x

- ::-mox-selection, ::selection 처럼 클래스명 연속 사용했을 때 적용 안됨

forEach

for문 사용

const array = [ '강아지', '고양이', '토끼', '햄스터'];

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

forEach문 사용

const array = [ '강아지', '고양이', '토끼', '햄스터'];

array.forEach(ani => {
  console.log(ani);
};

map

제곱일경우 forEach 예시

const array = [1, 2, 3, 4, 5, 6, 7];

const squared = [];

array.forEach(number => {
  squared.push( number * number );
});

map 사용

const array = [1, 2, 3, 4, 5, 6, 7];

const square = n => n * n;
//             n => 1 * 1;
//             n => 2 * 2;
//             n => 3 * 3;  ... 

const squared = array.map(square);
console.log(squared);



// 또는 이런식으로 작성 가능
const squared = array.map(n => n * n);

- 변화를 주는 함수를 전달(변화함수)

- 배열을 순회하면서 element의 값을 변경하여 새로운 배열을 만듬

- return 되는 값을 배열로 만듬

indexOf

const array = [ '강아지', '고양이', '토끼', '햄스터'];

const index = array.indexOf('햄스터');
console.log(index);
// 3

원하는 값을 찾아 몇 번째 원소인지 반환

findIndex

const todos = [
  {
    id: 1,
    name: 'text1'
  },
  {
    id: 2,
    name: 'text2'
  },
  {
    id: 3,
    name: 'text3'
  },
  {
    id: 4,
    name: 'text4'
  },
  {
    id: 5,
    name: 'text5'
  }
];

const index = todos.findIndex(todo => todo.id === 4);
console.log(index);
// 3

id 값이 4인 객체가 몇 번째인지 찾아야 할 경우

find

const todo = todos.find(todo => todos.id === 4);
console.log(index);

// { id: 4, text: 'text4' }

id 값이 4인 객체 값을 반환

참고

https://learnjs.vlpt.us/basics/09-array-functions.html#map

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState('');
  const onChange = (e) => { 
    setText(e.target.value);
    // 입력할 때 마다 setText의 값 변경
  };
  const onReset = () => {
    setText('');
    // 값 초기화
  };
  return(
    <div>
      <input placeholder="값을 입력하세요." onChange={onChange} value={text} />
      <!-- 값이 변경될 때 마다 text의 값을 불러옴 -->
      <button onClick={onReset}>초기화</button>
      <!-- 클릭시 값 초기화 -->
      <div> 값 : </div>
    </div>
  )
};

input 여러개일 때

import React, { useState } from 'react';

const InputTest() => {

  const [text, setText] = useState({
    name: '',
    nickname: ''
  });
  
  const { name, nickname } = inputs; 
  // 비구조화 할당으로 값 추출
  
  const onChange = (e) => { 
    const { value, name } = e.target;
    // e.target 에서 name, value 값 추출 
    // 객체 수정 -->
    setInputs({
      ...inputs, // input 객체 복사 
      [name]: value // name 키를 가진 value로 설정 
    });
  };
  
  const onReset = () => {
    setText({
      name: '',
      nickname: '',
    });
  };
  return(
    <div>
      <input placeholder="이름" onChange={onChange} value={name} />
      <input placeholder="닉네임" onChange={onChange} value={nickname} />
      
      <button onClick={onReset}>초기화</button>
      
      <div> 값 : </div>
    </div>
  )
};