자바스크립트 공부

0.들어가면서

알고리즘 공부 겸 개발시 기본기를 다지기 위해 도서관에서 책을 하나 선정하고 공부하기로 했다.(javascript 200제를 선택) 하면서 알게된 점, 헷갈리는 거, 알아야 할 점들을 블로그에 하나하나 기록하면서 공부해야겠다.

1. 템플릿 문자열

const cart = {name: "옷", price: 2000};
`cart에 &{cart.price}원짜리 ${cart.name}이 있다`

`` 안에 &{}를 써서 객체 접근.

4. Object.keys & Object.values

const info = {name:"태은", age:3};
const keys_arr = Object.keys(info) //json 키들의 배열 생성
const values_arr = Object.values(info) //json 밸류의 배열 생성

5. 비구조화 할당

리액트에서의 용법

const {a} = this.state
const {b} = this.props

6. 함수 arguments 객체

function sum() {
  let count = 0;
  for(let i=0;i<arguments.length;i++){
    count+=arguments[i];
}
  
sum(1,2,3)

result : 6
arguments 객체는 함수 parameter를 배열로서 전달한다.

7. 함수 Default Parameter

function drawChart(width = 200, height = width/2){
  return width * height;
}

drawChart();

result : 20000

8. typeof

let a = 5;
let s = "태은";
typeof a === "number";
typeof s === "string";

9. Number.isNaN

자료형을 Number()을 통해 변환할 때 NaN 예외처리시 사용할 것.

10. forEach() & trim() : 모든 배열요소 공백없애기

function = sentences => {
  const filtered = [];
  sentences.forEach(s => {
    filtered.push(s.trim());
  });
  return filtered;
}

11. substrig vs substr

문자열.substring(시작 index, 종료 index)
문자열.substr(시작 index, 길이)

12. 문자열 관련 메소드

1. 합치기 (.concat(str))
2. 특정 위치 문자 찾기 (.charAt(2))
3. 특정 문자 위치 찾기 (.indexOf("e"))
4. 특정 문자 위치 찾기 뒤 (.lastIndexOf("f"))
5. 대소문자 변환 (.toLowerCase(), .toUpperCase())
6. 문자열을 나눠서 배열로 저장 (.split(","))

13. 배열 관련 메소드

1. 합치기 (.concat(arr))
2. 배열 뒤에 추가 (.push("a"))
3. 배열 앞에 추가 (.unshift("b"))
4. 배열 마지막 요소 추출 (.pop())
5. 배열 앞 요소 추출 (.shift())
6. 배열 특정위치 요소 추출 (.slice(시작 index, 끝 index))
7. 배열을 병합하여 문자열로 변환 (.join(". "))
8. 배열 특정요소 수정 (.splice(시작 index, 삭제할 요소 개수, 추가할 요소들...))

14. filter

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

const filteredTwo = arr.filter(a => {
  return a%2 === 0;
});

console.log(filteredTwo);

result : [2,4,6]

16. map

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

const arr2 = arr.map(a => {
  return a*2;
});

console.log(arr2);

result : [2,4,6,8,10,12]

17. reduce

const result = arr.reduce((누적값, 현재 요소 값, /*현재인덱스*/) => {
  return 누적으로 반환되는 값
}, 초기값);

console.log(result);

사용법

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

const result = arr.reduce((acc, el) => {
  return acc+el;
}, 0);

console.log(result);

result : 21

const arr = [1, [2,3], [4,5,6], ["배열", "나열하기"], "javascript"];

const result = arr.reduce((acc, el) => {
  return acc.concat(el);
}, []);

console.log(result);

result : [1, 2, 3, 4, 5, 6, "배열", "나열하기", "javascript"]

18. Math객체

1. 랜덤
   Math.floor(Math.random() * (max-min+1) + min);
2. 반올림 (Math.round(n))
3. 올림 (Math.ceil(n))
4. 내림 (Math.floor(n))
5. 최소값, 최대값 (Math.min(a,b), Math.max(a,b))
6. 배열의 최소값, 최대값 (Math.min.apply(null, num))

19. JSON

1. JSON -> 문자열
   JSON.stringify(a)
2. 문자열 -> JSON
   JSON.parse(str)

20. sort()

[ 1, 10, 101, 20 ].sort() // [1, 10, 101, 20] 문자로 인식
[ 1, 10, 101, 20 ].sort((a,b) => a-b) // [1, 10, 20, 101] 숫자로 인식

21. 정규표현식,map,set, 이벤트...

보류!