[드림코딩] 유투브 드림코딩 보면서 자바스크립트 기초 다시 한번 훑기~!

** 이 포스팅은 유투버 드림코딩 님이 올려주신 자바스크립트 기초강의를 보며 필기한 내용! 

[본 포스팅 내용은 모두 아래 유투브 링크에 있다]

https://www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 

-  charAt(0)

 

참조형이 가리키고 있는 주소는 잠겨있지만, 각 프로퍼티가 가리키고 있는 데이터들은 열려있음

 

- mutable : 변할 수 있는, immutable: 불변하는

 

 

console.log( ` elie\'s `)

- \' 이렇게 백슬레쉬(\)넣어줘야함 

- 새로 줄바꿈 :  \n

- 탭키 : \t

 

 

 

- x = x + y   ->   x+=y

 

 

 or (|| ) 연산자는 하나라도 true가 나오면 거기서 멈춘다 '난 하나만 true가 나오면 true거든! '

 

 

- false : '' , null ,undefined, 0

 

- !(not 연산자) : 값을 반대로 바꿔주는 것

 

 

 

== (는 lose 비교) -> type을 비교하지 않는다.

 

 

 

0은 false라고 인지하지만, 0이 boolean타입은 아니므로 0===false 는 false가 나오고

''는 false라고 인지하지만 ''가 boolean타입은 아니므로 false가 뜬다.

null과 undefined도 다른 타입이라서 ===라고 하면 false 가 뜬다.

 

 

 

 

 

- if( 이 괄호가 true일때 만 true)

 

 

 

 

 

 

 

 

 

 

- while 문 

while(이 괄호 안의 식이 false가 될때까지 돌기)

 

 

 

-do ~ while

 

 

 

 

 

- break : 루프를 완전히 끝냄 // continue : 이번 것만 넘어감

 

 

object는 Ref 로 전달이 된다!!!!

 

 

 

 

 

 

 

- arrow function은 이름이 없는 무기명 함수이다.

 

 

 

 

 

 

- class는 붕어빵틀이고(속성이나 메소드가 들어갈 수 있다), 이 클래스를 통해 무언갈 찍어내면 걔가 옵줵트임

 

 

 

 

 

 

 

- overriding !!!!! : class에서 extends 해왔지만, 거기서 특정 함수는 변경하고 싶을때 이런 식으로 새로 수정하는걸 overriding이라고 한다!!!!!!!!!!1

그냥 override 해서 상속받은 함수를 위처럼 변경하면, 원래 기존 부모의 메소드는 실행이 안되는데,

만약 부모 클래스의 함수도 쓰고 싶으면 super을 붙여서도 불러올 수 있다!!!

 

 

 

 

 

자바스크립트에서 만든 모든 object는 자바스크립트의 Object를 상속했다!!!

 

 

-object는 key와 value의 집합체이다!!

 

 

 

 

 

 

 

 

 

 

 

 

 

- 토끼 ( 눈이있다, 뛴다, 귀가있다 ) , 당근( 비타민c, 주황색, 채소다)  => 당근과 토끼는 옵줵

동일한 토끼들, 동일한 당근들이 들어있는 게 => 자료구조

 

 

 

 

 

 

 

 

 

 

 

 

forEach는 배열의 값들 마다 내가 정한 함수를 출력해주는구나!!

 

 

 

 

 

 

 

 

 

 

 

 

- splice : 꼬아서 잇다

 

 

 

- concat. : 배열 두개를 합칠 수 있음

fruits 배열에 fruits2를 이은것

 

-includes : 해당 값이 있는지 찾는 것 = >결과값: true 아님 false

 

 

 

 

>> 배열 api

1) Join : 배열에 있는 모든 아이들을 더해서 string으로 만들어줌

const arr1 = ['a','b','c']

const result = arr1.join()

// result : a,b,c 라고 나옴

 

join('구분자를 넣을 수 있는데')

만약, 

arr1.join( '|' )

이런 식으로 내가 원하는 구분자를 넣으면

a | b | c

이렇게 반환이 된다.

 

 

2) 주어진 string을 배열로 만들어주기 : split

arr1.split

 

split(구분자(string이거나 regexp로 받음),리턴받을 배열 사이즈도 지정가능?)

 

arr1.split(',')

라고 해도 되고

arr1.split(',' , 길이 어디까지 전달받을지 지정해도됌)

arr1,split(',' , 1)

 

3) 배열안의 아이템 순서를 거꾸로 만들어줌 : reverse

arr1.reverse();

=> 실제로 arr1 자체가 뒤집어져버림(원본도 뒤집혀짐)

 

4) slice : 배열의 특정 부분을 리턴하는 아이

slice ( 배열 시작 인덱스, 어디까지 자를건지)

어디까지 자를건지는 : exclusive함 ( 배제함)

 

** splice는 배열 자체를 수정하는 아이고, slice는 배열에서 원하는 부분만 받아오고싶을때 사용

 

5) find ( 콜백함수 ( value,  인덱스)  {   } );

이 콜백함수는 boolean을 리턴함

find 함수는 True인 배열의 요소를 리턴한다.

 

 

6) filter : true인 아이들만 모아서 전달해줌

const result = arr1.filter( (x ) => x.속성 ) ; console.log( result ) ;

x.속성이 true인 것만 리턴해줌

 

7) map : 배열 안의 요소 한가지 한가지를 다른 것으로 변환해주는 것을 말함

map에 지정된 콜백함수를 이용해, 각각의 값들이 콜백함수를 거쳐 나온 값으로 변환해준다고

 

 

8) some : 어떤 조건을 만족하는 애가 잇는지 없는지 (결과값 : 불린)

some은 배열에서 해당 조건을 건 게 하나라도 만족하는 애가 있으면 true를 리턴하고

every를 쓰면 모든 녀석이 해당 조건을 만족해야 true를 리턴한다.

 

9) reduce : 콜백함수나 initialValue를 전달하게 된다.

배열에 있는 모든 요소들이 호출되고, '누적'된 값을 전달한다.

콜백함수는 return을 해주어야 한다.

 

curr에는 배열에 있는 값들아 하나하나씩 순차적으로 전달이 되는데, 

prev는 저 콜백함수에 return으로 넘겨주었던 값이 들어가있다.

( prev 에는 이전에 콜백함수에서 리턴된 값이 전달되어지고 , curr는 배열의 다음 넘들이 계속 들어옴)

 

이렇게 initial value를 따로 지정해주는 순간 , 시작을 0부터 하게 된다.

 

curr.score 점수를 이렇게 할당하면

prev에 계속 들어오는 curr.score 점수들이 쌓이겠지(합이 될거임)

 

** reduceRight : 배열의 뒤에서부터 시작되어짐

 

평균점수 구하기 !

 

 

 

10 ) map (2)

map을 이용하면, 새로운 배열이 Return되고 여기에

string으로 만들어주는 join을 사용해주기

 

🌼 이거 완전 신기해 

1. map을 사용하여 콜백함수로 student.score만 담긴 새 배열을 생성하고

2. 새로 생성된 그 배열 [45,80,90,66,88] 에 filter 걸어서 콜백함수 --> 해당 값들이 50 이상인것만

3. join()을 이용하여 string으로 변환!

 

 

 

 

11) sort : sort ( (a , b) => a - b ) )

a,b를 전달받게 되는데 a - b를 했을때 값이 -면 a가 앞으로 가게 정렬할거야 

 

** 만약, 점수가 큰 것이 앞으로 가게 하고 싶다면? (내림차순으로 하고 싶다면?)

sort ( (a,b) => b - a   ) 라고 하면 된다.