Dust

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