*유튜버 코딩앙마의 "자바스크립트 중급 강좌 : 140분 완성" 강의를 보면서 정리한 자료입니다.
강의 보러가기!
var: function scoped (함수 내에서 벗어나면 사용하지 못함)
let, const: block scoped (지역변수 같은 개념. if 또는 for 안에서 쓰였을 때 괄호 밖에서 못 씀)
Computed property (계산된 프로퍼티)
객체 매소드
여러개의 객체를 넣어줄 수도 있다
객체에서 symbol값은 건너뛰고 찾는다. 특정개체에 원본 데이터를 건드리지 않고 추가하고 싶을 때 사용할 수 있다.
전역심볼 > symbol.keyFor(id1) // "id"
그냥 심볼 > id.description; // "id 입니다."
[Math]
parseFloat() 소수점 살려서 숫자로 보여줌
Math.random() 0-1까지 랜덤 숫자.
1-100까지 임의의 숫자뽑기: Math.floor(Math.random()*100)+1
여기서 1을 더하는 이유는 랜덤 숫자가 0.002244 뭐이런식으로 나와서 버림했을 때 0이 될 수 있기 때문이다.
Math.max() 최대
Math.min() 최소
Math.abs() 절대값
Math.pow(n,m) 제곱 (n의 m승)
Math.sqrt() square root 제곱근
또한, 이같은 if절에서 hi의 index는 0. if절 조건에서 0은 false이므로 > -1 과 같이 적어줘야 한다.
indexOf를 사용해서 해당 문자가 문자열에 있는지 없는지 확인하는 법: 만약 있다면 인덱스 값이 -1보다 크다 라고 설정해준다.
[문자열 자르기 3가지 방법]
str.slice (n,m) (배열에서도 똑같이 쓰임)
n은 시작점. m은 없으면 끝가지, 양수면 그 숫자까지 (포함은 안함) 음수면 끝부터 셈
str.substring(n,m)
slice와 아주 유사. n과 m 바꿔도 동작. 음수는 0으로 인식.
str.substr(n,m)
n부터(음수가능) m개를 가져온다
str.trim() 앞뒤 공백 삭제
repeat()
문자열도 비교가 가능하다. (a보다 c가 크다.)
만약 여기서 arr.splice() 한 것을 result로 선언해주면 삭제된 요소를 반환한다:
arr.slice(n,m) n부터 m까지 반환 (m은 포함 안함) 문자열에서도 쓰임
arr.concat(arr1,arr2,....) 합쳐서 새배열 변환 (더하거나 하는게 아니고 그냥 뒤에 이어서 쭉 나열하는 개념)
- arr.forEach(fn) 배열반복>>이해가 안됨
arr.includes() 포함하는지 확인 (true/false)
arr.find(fn) / arr.findIndex(fn) 포함하는지 찾는 함수인건 동일하지만 복잡한 연산이 가능하도록 뒤에 함수가 들어올 수 있음
단, 첫번째 true값 반환하고 끝이고 만약 없으면 undefined (findIndex는 -1 반환)
아래 함수에서 return값은 2
arr.filter(fn) find와 같은 역할하는데 전체를 돌려서 찾으면 배열로 만들어 다 표시해준다.
위 예에서 filter로 바꾸면 return값은 [2,4,6]
arr.reverse() 역순 재정렬
arr.map(fn) 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환
객체매소드: 객체복제 Object.assign 를 써서 기존 객체에 추가로 isAdult를 삽입시켜 준 것.
arr.join() 객체 내 요소 합칠때
arr.join("-")와 같이 특수문제 넣거나 white space 넣으면 그걸 중간에 포함하고 합침
Array.isArray() 객체인지 아닌지 확인
typeof를 쓰면 배열과 객체를 구분할 수 없다 (object로 나옴)
Array.isArray() 에 배열을 넣었더니 true가 나오는 모습
오름차순: return a - b
내림차순: return b - a
이렇게 하나하나씩 신경쓰는게 까다로워서 실무에서는 Lodash 라고 하는 라이브러리를 많이 사용한다고 한다. 이걸 사용하면 _.sortBy(arr); 를 쓰면 기준에 따라 숫자던 문자던 배열해준다. 사이트 방문해서 꼭 알아볼 것!
더 실용적인 예제: map/filter대신 reduce사용하기
reduce를 사용해서 age가 19 초과를 찾아서 빈배열에 이름을 하나씩 넣어주기
예제: 사람들의 나이 모두 더하기
예제: 이름이 세글자인 사람 모두 표시하기
여러가지 방법 중 상황에 알맞은 방법을 찾는 기술이 필요하다.
배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 만드는 것
객체 구조 분해에서 기본값 설정해줄때:
순서를 바꿔도 상관없음 인식함. 그리고 설정해놓은 기본값이 있을때에는 만약에 객체 내에 undefined일때만 기본값이 나옴. (예를 들어 gender를 male이라고 기본값을 설정해놨는데 객체에 gender: female이 있으면 female로 나오지만 만약 gender정보가 없으면 male로 나옴)
1:12:00쯤 부터 시작. 어려운 개념이라 여러번 복습하기
여기에서 general한 의미의 argument의 개념부터 알아야 할 것 같다:
parameter: 함수를 구현하는 쪽과 함수를 사용하는 쪽을 매개하는 변수 (매개변수)
argument: 함수를 이용하는 사람이 매개변수에 집어넣는 값 (함수의 변수에 집어넣는 값)
assign 기능 사용하지 않아도 되서 좋음. 그리고 복제해씩 때문에 복제한 구문의 내용을 바꿔도 기존 구문은 변하지 않는 것을 볼 수 있다.
예: 전개구문 사용하기 전
전개구문 사용 후