*유튜버 코딩앙마의 "자바스크립트 중급 강좌 : 140분 완성" 강의를 보면서 정리한 자료입니다.
강의 보러가기!

변수

var: function scoped (함수 내에서 벗어나면 사용하지 못함)
let, const: block scoped (지역변수 같은 개념. if 또는 for 안에서 쓰였을 때 괄호 밖에서 못 씀)

객체 메소드(Object methods), 계산된 프로퍼티(Computed property)

  • Computed property (계산된 프로퍼티)

  • 객체 매소드

  1. object.assign() 객체복제
    const newUser = user 이렇게는 복제가 불가능하다. 객체가 복사되는게 아니라 개체값만 참조해서 들어가는 개념이다. 빈 객체는 초기값이고 이곳에 user에 있던 값이 들어오는 개념

여러개의 객체를 넣어줄 수도 있다

  1. object.keys() 키 배열 반환
  2. object.values() 값 배열 반환
  3. object.entries() 키/값 배열 반환 (배열 내에 배열로 보여줌)
  4. object.fromentries() 키/값 배열을 객체로 반환

심볼(Symbol)

  • property key: 문자형

  • symbol: 유일한 식별자를 만들 때 사용한다.
    유일성이 보장된다. 붙일때 설명을 붙여줄 수 있다. 설명을 똑같이 붙여줘도 다른 property가짐


객체에서 symbol값은 건너뛰고 찾는다. 특정개체에 원본 데이터를 건드리지 않고 추가하고 싶을 때 사용할 수 있다.

  • symbol.for() 전역심볼 : 이 매소드를 사용하면 하나를 생성한 뒤 키를 통해 같은 symbol을 공유!
    그렇게 때문에 여기서는 id === id2 가 true이다.

전역심볼 > symbol.keyFor(id1) // "id"
그냥 심볼 > id.description; // "id 입니다."

25:30 숫자, 수학 method (Number, Math)

  • 10진수 > 2진수/16진수
    toString() 괄호안에 2를 넣으면 2진법으로 표현. 16을 넣으면 16진법으로 표현한다.
    16진법은 10까지 숫자로 쓰고 11:a, 12:b, 13:c, 14:d, 15:e, 16:f 로 표현한다. 16진법이 쓰이게 된 배경은 이진법을 네자리씩 끊어서 네번 연속한 스트링을 하나로 묶어 표현할 수 있기 때문이다.

[Math]

  • Math.ceil() 올림
  • Math.floor() 내림
  • Math.round() 반올림
  • 소수점 n번자리에서 반올림: 100곱하고 반올림 후 100 나누기 / toFixed(n)
    toFixed 사용할 시 문자로 받아오기 때문에 다시 숫자로 바꿔줘야 함
  • NaN
    NaN == NaN //false
    NaN을 판별할 수 있는 건 isNaN() 밖에 없다 (즉, NaN인지 아닌지만 판별이 가능하다)

  • parseInt() 숫자(정수)로 반환하는데, 문자가 뒤에 섞여있으면 숫자만 반환. 대신 문자로 시작하면 안 먹힘. (하지만 그 문자가 16진법에 쓰이는 거라면 16진법으로 알아먹게 할수있음)

  • 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 제곱근

문자열 메소드(String methods)

  • 백틱의 장점!:
    값을 불러올 수 있고 여러 줄로 표현 할 수 있다.

  • length 문자열 길이 (배열에서도 똑같이 쓰임)
  • desc[2] 와 같이 문자열도 배열과 같이 숫자로 특정 위치에 접근할 수 있음. 하지만 배열과 다르게 한글짜만 바꾸는건 허용하지 않는다.
  • toUpperCase()
  • toLowerCase()
  • str.indexOf(text) (배열에서도 똑같이 쓰임)
    string 내에서 특정 text의 위치를 찾는 함수이다. 여기서 주의할 점은 text가 길어도 첫번째 letter의 위치만 알려준다.


또한, 이같은 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가 크다.)

40:02 배열 메소드1(Array methods)

  • push() 뒤에 삽입
  • pop() 뒤에 삭제
  • unshift() 앞에 삽입
  • shift() 앞에 삭제
  • splice(n,m) 특정 요소 지움

  • arr.splice(n,m,x): n자리 부터 m개 요소 지우고 (그의 자리에) x추가

  • arr.splice(n,m,x): 만약에 m이 0일때: 아무것도 지우지 않고 (n의 자리에) x추가

만약 여기서 arr.splice() 한 것을 result로 선언해주면 삭제된 요소를 반환한다:

  • arr.slice(n,m) n부터 m까지 반환 (m은 포함 안함) 문자열에서도 쓰임

  • arr.concat(arr1,arr2,....) 합쳐서 새배열 변환 (더하거나 하는게 아니고 그냥 뒤에 이어서 쭉 나열하는 개념)

- arr.forEach(fn) 배열반복>>이해가 안됨

  • arr.indexOf (문자열에서도 똑같이 쓰임)
    배열에 같은 요소가 여러개 나올 경우, 찾기 시작하는 위치를 지정할 수 있고 뒤에서부터 찾을 수도 있다.

  • 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가 나오는 모습

배열 메소드2 (sort, reduce)

  • arr.sort() 배열 재정렬. 배열 자체가 변경되니 주의
    인수로 정렬 로직을 담은 함수를 받음

오름차순: return a - b
내림차순: return b - a

이렇게 하나하나씩 신경쓰는게 까다로워서 실무에서는 Lodash 라고 하는 라이브러리를 많이 사용한다고 한다. 이걸 사용하면 _.sortBy(arr); 를 쓰면 기준에 따라 숫자던 문자던 배열해준다. 사이트 방문해서 꼭 알아볼 것!

  • arr.forEach() 배열의 요소들의 합을 구할 수 있음

  • arr.reduce() 를 사용해서 요소들의 합 구하기
    누산값이 0 > 1 > 3 > 6 > 10 > 15
    만약 뒤에 index값이 0이 100이다? >>> 답은 115가 될 것.

더 실용적인 예제: map/filter대신 reduce사용하기
reduce를 사용해서 age가 19 초과를 찾아서 빈배열에 이름을 하나씩 넣어주기

예제: 사람들의 나이 모두 더하기

예제: 이름이 세글자인 사람 모두 표시하기

여러가지 방법 중 상황에 알맞은 방법을 찾는 기술이 필요하다.

구조 분해 할당 (Destructuring assignment)

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 만드는 것

  • 배열 구조분해

  • 객체 구조분해

객체 구조 분해에서 기본값 설정해줄때:
순서를 바꿔도 상관없음 인식함. 그리고 설정해놓은 기본값이 있을때에는 만약에 객체 내에 undefined일때만 기본값이 나옴. (예를 들어 gender를 male이라고 기본값을 설정해놨는데 객체에 gender: female이 있으면 female로 나오지만 만약 gender정보가 없으면 male로 나옴)

나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

1:12:00쯤 부터 시작. 어려운 개념이라 여러번 복습하기

  • 함수 내 arguments

  • 나머지 매개변수: 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.
    단, 함수 정의에는 하나의 ...만 존재할 수 있습니다.
    그리고 반드시 함수 정의의 마지막 매개변수여야 합니다.
    나머지 매개변수 더 알아보기

여기에서 general한 의미의 argument의 개념부터 알아야 할 것 같다:
parameter: 함수를 구현하는 쪽과 함수를 사용하는 쪽을 매개하는 변수 (매개변수)
argument: 함수를 이용하는 사람이 매개변수에 집어넣는 값 (함수의 변수에 집어넣는 값)

  • 전개구문: 배열, 객체 가능

assign 기능 사용하지 않아도 되서 좋음. 그리고 복제해씩 때문에 복제한 구문의 내용을 바꿔도 기존 구문은 변하지 않는 것을 볼 수 있다.

예: 전개구문 사용하기 전

전개구문 사용 후

추가될 예정!>>

클로저(Closure) 5분만에 이해하기

setTimeout / setInterval

call, apply, bind

상속, 프로토타입(Prototype)

클래스(Class)

프로미스(Promise)

async, await

2:10:47 Generator

profile
꾸준하게 하는 법을 배우는 중입니다!

0개의 댓글