22.10.04.Tue - 함수,배열,객체 3형제 압박감이 몰려온다.

오늘의 요약 = 무서운 형들이 압박해온다.

1.

함수

• 함수 유형
  • 익명 함수
  • 정의 함수 (재귀 호출 용도로 사용)
  • 람다 함수 (화살표 함수)
    • 특징
      • this가 없다. , arguments가 없다.
• 함수도 객체이다.
  • 하나의 특수한 형태( 동작 )의 자료이다.
  • 매개변수에서 함수를 받을 수 있고, 반환값으로 함수를 사용할 수도 있다.
  • 1급 객체

    ---

2.

JS 책

• 프론트엔드 개발자를 위한 자바스크립트 프로그래밍
• 토비의 스프링 3.1 세트
  • 2책의 아쉬운점: 버전이 낮다 == 오래된 == Classic
  • Lowlevel 부분도 다루며 = 깊숙하게

함수

• 매개 변수의 기본 값을 설정해 줄 수 있다.
  • function(매개변수 = 50){명령};
• 열거형 연산자
  • ... 매개변수2
  • 유사 배열(object)을 만들어 매개 변수에 넣어줄 수 있다.

This

• 같은객체 안에 있는 속성을 꺼내려면 this 를 사용해야한다.
• 사용하는 쪽(호출)에 의해서 this가 결정한다.
• 객체의 변수명을 this 로 대체한다.
• 어디에서 누가 메서드를 호출했는가에 의해서 this가 결정된다.
• 윈도우라는 최상위 객체 안에는 내가 만든 객체의 속성값이 저장되지 않아서
  불러도 호출되지 않는다.
• 주의 사항
  • 처음 객체1의 함수의 명령 속성값에 this.(속성값) 를 사용하고 객체1을 호출하면 this의 값은 = 객체1이다.
  • 하지만 객체1을 다른 변수에 담고 let 변수1 = 객체1
  • 그 변수의 함수를 호출하게 되면 변수1(); 인데
  • 이는 window.변수1()을 생략한 식이다.
  • 그러면 함수의 this가 호출하는 쪽으로 유동적으로 변한다.
  • 처음은 this == 객체1 인데,
  • 지금은 this == window 인것이다.
  • window라는 최상위 객체 박스에는 내가 만든 객체의 Data가 포함되지 않는다. (?)
  • 호출을 해도 컴퓨터는 이해할 수가 없는 것이다.

객체

• []를 사용하면 연산이 가능하기에 추천한다.
  • 속성명을 문자열로 만들어주기때문에
  • 문자열은 연산을 할 수 있다.
  • 그렇기에 유연하게 사용할 수 있다.

누가 호출했느냐에 따라서 this 가 결정된다.

---

3. 처리상 메모리(박스) 구조의 이해.박스의 범위와 구조의 이해

var

• var로 선언된 변수(함수 밖)는 모두 window객체의 멤버(속성중 하나)이다.

scope (범위)

변수의 범위(영역)

• let 는 전역(global)변수이다.
• 괄호안 let은 괄호라는 구역(지역)을 지정한다.
• 순차적으로 괄호의 명령을 다 처리하면, 괄호안 변수는 소멸한다.
• 전역
  • 구역에 따라 전역의 범위가 달라진다.
• let는 같은 장소에 같은 이름의 상자가 존재할 수 없다.

변수 선언

방법 (권장순)

1. let
   • 괄호안 전역
2. const
3. var
   • 지역에 따라 함수 or 전역의 변수가 된다. (함수,반복 문 적합)
4. 없음
   • box = 10
   • 지역에 상관 없이 선언이 되면 무조건 전역변수이다.(지역 무시)

전역 변수

• 반복문 i 는 전역변수 이다. 접두가 없는 변수 선언은 전역이기 때문이다. (변수 선언 4)
• 함수의 매개 변수는 접두 가 없는 변수 선언 이면 함수 지역 전체 상자이다.
  • 함수가 실행되지 않았으면 변수 i 는 없는 것과도 동일하다.

지역 변수

• 순차적 처리상 그 지역(범위)를 벗어나면 소멸한다.

메모리의 구조

메모리의 구조를 생각하고 그려서 파악할 줄 알아야한다.

반복문에 let 을 i 넣으면 반복문 영역에 들어가는데 ,
반복문 끝나면 let 은 사라진다.
그렇다고 let을 안쓰는게 아니다.

어떤 반복을 사용하느냐에 따라 변수의 유형이 let이 될지 var이 될지 달라진다.
for문

---

4.

ScopeChain

• data 구조간의 상관된 관계를 사슬로 묶여 있다 하여. ScopeChain(범위 사슬).

상황에 맞는 변수

• let 과 var의 적용 범위를 이해하고, 변수를 선택한다.
• 이해없는 변수를 선택하면, 오류가 나도 해결을 못한다.
• 문제를 모르니까.

---

5.

클로저

반환되는 함수가 소멸된 변수를 사용하기 때문에 소멸되지 않고 사용가능한 것.

• 함수는 일급객체이고 반환값으로 사용할 수 있다.
• 함수의 리턴값이 되는 함수안에 사용되는 var변수는 사라지지 않는다.
  • 함수 영역을 벗어나는 변수가 소멸되지 않고 사용할 수 있는 것. 클로저

return 반환

조기 리턴문

• 조기리턴문 사용하면 성능 향상 얻을 수 있다.
• 조건에 반대되는 식을 작성후 조건이 아닌 것을 먼저 찾는게, 성능 향상.
• 사용 안하면, 끝까지 검색하면서 처리함. 즉 낭비되는 시간이 많아진다.

리턴 생략시

• 맨 마지막에 return문이 존재하며,
• 1. Undefined 반환 -> 일반적인 경우
• 2. this를 반환 ->함수 호출이 아닌 생성(객체)일때.

Undefine 반환 예제

• return 이 생략 되었을때.
• 함수의 이름이 대문자로 시작 - 객체를 생성하기 위한 용도로 만들어진 함수
• this(객체)를 반환 예제 - new 호출연산자가 함께 사용되면
• new + 이름 : 빈 객체 만들어짐.

  함수 단일 책임원칙

• 함수의 기능에는 하나의 기능만 들어가게 해야한다.
• 한 문제에 하나만 책임을 져야한다.

  ---

6.

Object(객체)

• 사용자 정의 타입

• new 객체 생성 연산자.

• 여러개의 관련성있는 자료와 동작을 묶어서(사용자가 정의해서) 만들어 놓은 참조 사용자 정의 타입

• 메모리 상에 만들어진 자료

• 프로필 객체 예제

    let profile{
      name : 'bitgen' ,
      age  : 20 ,
      address: 'seoul',
      job : 'teacher' ,
    }// 한사람의 정보를 나타내고  있다. 메모리상에 어딘가에 만들어져 있다.
    console.log(profile.age) // 20 출력
  
    let two = new Object(); // 객체 생성자 
    console.log(two) // {} 출력
    two.name = 'doil';
    two.age = 25;
    two.add = 'seoul';
    two.job = 'co-worker';
    console.log(two.name)
  
    //5개의 서로 다른 사람 객체 만들고 싶다. -> 동일한 구조를 갖기 때문에 함수로 만드로 5번 호출
    class CreateManClass {
     constructor (age,name,address,job) {
          this.age = age;
          this.name = name;
          this.address = address;
          this.job = job; 
     }// 자료를 담고있는 속성을 생성자함수에 정의한다.
     

---

7.

객체이용 성적 처리 문제

• 머리 깡

---

8.

공통된 부분을 그룹화 하는게 중요하다.

---