21.12.01(수)

FE : HTML / CSS / JS(AJAX) / React / (SASS) / (jQuery) / SEO // github // 웹팩 // 정규표현식
BE : JS / tailwind or bootstrap / Node / DB / github / Server / HTTP

백엔드에 노드가 속함.
HTML/CSS / (SASS) / JS / (jQuery) / React + Node(한번쯤 경험 좋음)

+)

#실시간 아니고 new Date() 했을 때 시간.

배열을 만드는 여러가지 방법
let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일2 = new Array(5);
let 과일3 = new Array('사과', '수박', '복숭아', '딸기', '바나나');

배열은 호출로 바꿀 수 있지만, 다른 것(문자열_)은 안된다. !

알고리즘 문제

'01001'.replace(/0/g, ' ').replace(/1/g, '#')

string으로 더해진다.

for in // for of

in : sample 안의 요소 인덱스
of : sample 안의 요소

// 숫자 타입
0 + ''         // -> "0"
-0 + ''        // -> "0"
1 + ''         // -> "1"
-1 + ''        // -> "-1"
NaN + ''       // -> "NaN"
Infinity + ''  // -> "Infinity"
-Infinity + '' // -> "-Infinity"

// 불리언 타입
true + ''  // -> "true"
false + '' // -> "false"

// null 타입
null + '' // -> "null"

// undefined 타입
undefined + '' // -> "undefined"

// 심벌 타입
(Symbol()) + '' // -> TypeError: Cannot convert a Symbol value to a string

// 객체 타입
({}) + ''           // -> "[object Object]"
Math + ''           // -> "[object Math]"
[] + ''             // -> ""
[10, 20] + ''       // -> "10,20"
(function(){}) + '' // -> "function(){}"
Array + ''          // -> "function Array() { [native code] }"

산술연산자 (+) 문자가 숫자보다 우선시 됨
암시적으로 js엔진이 자동으로 데이터 타입을 변환시켜줌

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

(전교점수[0][0][0] + 전교점수[0][0][1] + 전교점수[0][0][2] + 전교점수[0][0][3] + 전교점수[0][0][4]) / 5
30
let 총합 = 0;
for(let i=0; i < 5; i++){
총합 += 전교점수[0][0][i];
}
총합
150
(전교점수[0][1][0] + 전교점수[0][1][1] + 전교점수[0][1][2] + 전교점수[0][1][3] + 전교점수[0][1][4]) / 5
40
let 총합2 = 0;
for(let i=0; i < 5; i++){
총합2 += 전교점수[0][1][i];
}
총합2
200

과일.push('a'); : 맨 뒤에 집어넣는다.
unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

슬라이스는 -1(배열마지막 적용가능)

but 과일[-1] = undefined 아직 안됨!

• splice(앞 인덱스 번호, 개수)
  splice(1,3,'apple'); 1부터 3이 잘라진 곳에 apple이 들어가기도 한다.

  

• 변수명.concat(b변수명);
  

• 사전식 정렬
  아스키 순서라서 정렬이 제대로 되지 않습니다. 숫자 같은 경우에는 그래서 오름차순은, 내림차순은 따로 명시해줘야합니다.

• reverse
  순서가 바뀜 =역순

1. sort는 사전식 정렬이다.
2. reverse는 역 정렬이 아니라 역순이다.
3. sort(정렬하고) + reverse (정렬한 걸 거꾸로) => 역정렬
   reverse => 역순 (그냥 거꾸로..)

asc / desc 오름차순 / 내림차순
data.sort((a, b) => a - b) // 오름차순
data.sort((a, b) => b - a) // 내림차순

data =[22,25,11,20,30,10,111]

• key : value
  호출할 때 [key] : value
  (대괄호)
  personname name을 변수로 인식
  person.name (o) person이란 멤버안에서 찾는다. 멤버연산자.
  한가지 방법만 생각하기. person['name']

  
  -- Object.keys(person) Object.values(person)식으로 가능.
  
  배열안에 배열로 key와 value값을 넣어준다.
  반복문 안에 좋음 .
  

• 한꺼번에 반복문으로 출력할 때 좋다.
  

-unpacking 묶여있는 것을 풀어내는것.
-console.log(Object.getOwnPropertyDescriptor(person, 'name'));

// value: '이호준',
// writable: true, // 변경 가능 여부, 기본값 false
// enumerable: true, // 열거(for) 가능 여부, 기본값 false
// configurable: true // 재정의 가능 여부, 기본값 false

함수

함수 선언(function declaration)방식을 이용하면 만들 수 있다.
함수를 사용하는 이유
1. 재사용성
2. 아키텍처 파악하기 쉽다
3. 유지보수 ..등

위 함수에는 매개변수가 없는데, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분해준다. 이어서 함수를 구성하는 코드의 모임인 함수 본문(body)을 중괄호로 감싸 붙여준다.

외부변수

함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다.
수정도 할 수 있다.

• 캡슐화 :
• 추상화 :

전역 변수 : 함수 외부에 선언된 변수

파선아실 = 함수를 '파'라미터로 '선'언하고 '아'규먼트로 '실'행한다!

• 매개 변수(parameter)
  임의의 데이터를 함수 안에 전달할 수 있다.
  매개변수는 인수(argument)라고 불리기도 한다.
  (*) (**) 로 표시한 줄에서 함수를 호출하면, 함수에 전달된 인자는 지역변수 from과 text에 복사된다. 그 후 함수는 지역변수에 복사된 값을 사용한다.

  전역 변수 from이 있고, 이 변수를 함수에 전달
  함수가 from을 변경하였지만, 변경 사항은 외부 변수 from에 반영되지 않았다. 함수는 언제나 복사된 값을 사용하기 때문.

  

  return 이란? 반환값

  함수 호출자리에 return 값 나온다.
  종료할 때 쓴다.
  return 은 함수 내 어디서든 사용할 수 있다.

  
  변수명에 함수 선언하면 -> let h

  

  ES6함수

let a = 100;
let b = 200;

{a, b}
200
let c = {a, b}
undefined
c
{a: 100, b: 200}
let c = {
    'a':100,
    'b':200
}
undefined
c
{a: 100, b: 200}
{100, 200}
200
let 오브 = {
    a,
    b
}
undefined
오브
{a: 100, b: 200}
![](https://velog.velcdn.com/images%2Fyellow_ing%2Fpost%2F9b67755c-eda3-4f44-928f-876c4494da55%2Fimage.png)

var는 함수 스코프안에서 지역변수 취급 ...
javascript >> head 일부 + html 로드 한 다음 받아야하기에 body에 넣기.

호이스팅(Hoisting): 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

• 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

• 런타임 이전에 함수 객체가 생성이 되므로 함수가 정의되기 전에 함수를 호출할 수 있다. 미리 함수 호출해도 가능, 클로저 상황에 많이 사용

• 함수 표현식으로 선언된 함수는 함수 호이스팅 발생

• JavaScript는 초기화를 제외한 선언만 호이스팅, 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면 사용하는 시점의 변수는 기본 초기화 상태

(var 선언 시 undefined, 그 외에는 초기화하지 않음 => 따라서 초기화 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.)

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

다음 예제는 선언 없이 초기화만 존재. 따라서 호이스팅도 없고, 변수를 읽으려는 시도에서 예외발생

console.log(num); // ReferenceError 예외 발생
num = 6; // 초기화

콜백함수: 특정함수에 인자로 전달되어, 특정함수가 어떤 조건에 의해 호출하는 함수

• 사용하는 이유: 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다.
• 비동기적 ? : 소중한 싱글 스레드의 멈춤을 방지한다. 즉 블록킹을 방지하여 싱글스레드를 논블록킹으로 동작하게 한다.
• 비동기적 테크닉 사용하는 경우
  • 1. 사용자 이벤트 처리 : 브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능
       따라서 화면 이벤트를 관리 담당에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 call back함수에 전달하게 된다.
  • 2. 네트워크 응답 처리 : 화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없음.
       이런 서버에 대한 응답 처리
  • 3. 파일을 읽고 쓰는 파일 시스템 작업
  • 4. 의도적 시간 지연 기능(알람)

기명함수 : 이름이 있는 함수 /익명함수 차이?

• 기명함수는 호이스팅에 영향을 받고 익명 함수는 호이스팅에 영향을 받지 않는다.
• 기명 함수 표현식
  1. 이름을 사용해 함수 표현식 내부에서 자기 자신을 참조할 수 있다.
  2. 기명 함수 표현식 외부에선 그 이름을 사용할 수 없다.
  익명함수 : 이름이 없는 함수
  function hello() {}
  기명함수 : 함수의 선언

화살표 함수

• 심플함을 요구할 때, + 화살표 함수만 이용가능할 때
  

console.dir(add20)

함수이름짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것.
따라서 함수의 이름은 대개 동사. 함수 이름은 가능한 한 간결하고 명확해야 한다.
함수가 어떤 동작을 하는지 설명할 수 있어야 한다. 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.
따라서 함수의 이름은 대개 동사. 함수 이름은 가능한 한 간결하고 명확
함수가 어떤 동작을 하는지 설명할 수 있어야 한다.

함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여 함수 이름을 만드는게 관습 .

배열이란? 번호(index)와 대응하는 데이터들로 이루어진 자료구조.
디버깅이란? 컴퓨터의 프로그램 개발 단계 중에 발생하는 시스템의 논리 오류나 비정상적인 연산을 찾아내고, 그 원인을 밝히고 수정하는 작업과정을 뜻함
console.log > 압도적으로 이용빈도가 높은 디버깅 방법. Js console.log인수로 설정한 값은 디버거 콘솔로 표시하는 함수