[본 캠프 12일차] 걷기반 3회차 실습 + 개인과제 그로스 + 3주차 강의 마무리

걷기반 3주차 실습

 

1. 배열의 마지막 요소인 '목살' 을 제거한 후, '삼겹살' 을 추가해주세요.

let shoppingList = ['우유', '계란', '아이스크림', '목살'];
// 여기에 코드를 작성하세요.
shoppingList.pop();
shoppingList.push('삼겹살');
console.log(shoppingList);

// 출력 : [ '우유', '계란', '아이스크림', '삼겹살' ]

 

2. '걷기반 튜터님'만 출력되도록 해주세요.

• 배열 메서드인 forEach 와 조건문을 활용하여 완성해주세요.
• forEach 메서드를 사용해 배열을 순회하세요.
• '걷기반 튜터님'만 콘솔에 출력되도록 조건문을 사용하세요. -> 논리합연산자(||)를 활용해보세요.

let tutorNames = ['최원장', '김르탄', '윤창식', '박가현', '김병연', '내배캠'];

tutorNames.forEach(tutor => {

    if() {

        console.log(tutor);

    }

});

 

3. 멘토링 상태를 확인할 수 있는 isMentoring 속성을 추가한 newTutors 를 만들어주세요.

• 배열 메서드인 `map` 을 사용하여 완성해주세요
• `isMentoring` 속성이 추가된 새로운 객체 배열을 만듭니다.(값은 `true`로 설정해주세요.)
• 반환값이 있는 `map` 을 통해 `newTutors` 변수에 담아서 출력해주세요.

let tutors = [
  {
    name: "최원장",
    time: "9to6",
  },
  {
    name: "윤창식",
    time: "9to6",
  },
  {
    name: "박가현",
    time: "9to6",
  },
  {
    name: "김병연",
    time: "9to6",
  },
];
// 여기에 코드를 작성하세요.
// 멘토링 상태를 확인할 수 있는 불리언 타입의 isMentoring 속성을 추가합니다.
const newTutors = tutors.map(function (teacher) {
  const newTeacher = {
    name: teacher.name,
    time: teacher.time,
    isMentoring: true,
  };
  return newTeacher;
});
console.log(newTutors);

 

4. 아이스 전용 커피 데이터를 만들어주세요.

• 배열 메서드인 `filter` 를 사용하여 완성해주세요.
• `icedOnly` 속성이 `true` 인 커피 배열을 만듭니다.
• 반환값이 있는 `filter` 를 통해 `icedOnly` 변수에 담아서 출력해주세요.

let starbucks = [
    {
      name: '카페 라떼',
      icedOnly: false,
    },
    {
      name: '콜드 브루',
      icedOnly: true,
    },
    {
      name: '돌체 라떼',
      icedOnly: false,
    },
    {
      name: '돌체 콜드 브루',
      icedOnly: true,
    },
  ];
 
  // 여기에 코드를 작성하세요.
  // 아이스 전용 커피 배열을 만듭니다.
  const icedOnly = starbucks.filter(function (ice){
    // console.log(ice);
    if (ice.icedOnly === true) {
      return true;
    } else {
      return false;
    }
  });
 
  console.log(icedOnly);

 

git

 

처음 init - add . - commit - push 하고 그 뒤에 push 에러가 뜨면 pull,

해보고 안되면 다시 commit 해보는데 또 에러나면,

git push -u origin master --force << 로 강제 push 

---

 

 

 

데이터 타입의 종류

기본형과 참조형의 구분 기준은 값의 저장 방식 과 불변성의 여부 이다.

 

 

실행 컨텍스트

 - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

 

스택 vs 큐

Stack : 제일 늦게 들어간 코드가 제일 먼저 아웃하는 것

Quete : 제일 먼저 들어간 코드가 제일 먼저 나가는 것

 

콜 스텍

동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 ‘스택’의 한 종류인 콜스택 에 쌓아올립니다.

 

컨텍스트의 구성

• 전역공간
• eval() 함수
• 함수

실행 컨텍스트 구성 순서

코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

 

 

실행 컨텍스트 객체의 실체(=담기는 정보)

• VariableEnvironment
   - var a = 3 에서 var a 를 의미
  - 외부 환경 정보(=outer)를 갖고 있다.
  - 선언 시점 LexicalEnvironment 의 snapshot
• LexicalEnvironment
  - VariableEnvironment 와 동일하지만, 변경사항을 실시간으로 반영한다.
  - 우리가 사용하고 있는 것
• ThisBinding
  - this 식별자가 바라봐야할 객체

호이스팅

• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태에요(JS 엔진은 코드 실행 전 이미 모 든 변수정보를 알고 있는 것)
• 변수 정보 수집 과정을 이해하기 쉽게 설명한 ‘가상 개념
  
  호이스팅 법칙

1. 매개변수 및 변수는 선언부를 호이스팅 합니다
2. 함수 선언은 전체를 호이스팅합니다.
3. 함수 선언문, 함수 표현식

this(정의, 활용방법, 바인딩, call, apply, bind)

상황에 따라 달라지는 this

 - this는 실행 컨텍스트가 생성될 때 결정된다.

   이 말을 this를 bind한다(=묶는다) 라고도 하는데, 다시 말하면. this는 함수를 호출할 때 결정된다.

 

전역 공간에서의 this
 - 전역 공간에서 this는 전역 객체를 가리킨다.

 - 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)을 가리킨다

 

함수로서 ‘독립적으로’ 호출할 때는 this는 항상 전역객체를 가리킨다 는 것을 주의

 

일반 함수와 화살표 함수의 가장 큰 차이점

> this binding 여부

 

명시적 this 바인딩

자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법입니다. 크게, call / apply / bind

• call 매서드
  - 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있다.
• apply 매서드
  - call 메서드와 완전히 동일. 다만, this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열 형태로 넘겨준다.
• call / apply 메서드 활용
  - 유사배열객체(array-like-object)에 배열 메서드를 적용
  - Array.from 메서드(ES6)
  - 생성자 내부에서 다른 생성자를 호출
  - 여러 인수를 묶어 하나의 배열로 전달할 때 apply 사용할 수 있다.
• bind 매서드
  - call과 비슷해 보이지만, 즉시 call과는 다르게 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수 를 반환하는 메서드

 

3주차 숙제

나이든 유저
- 가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요

var user = {
    name: "john",
    age: 20,
}

// 객체 만들어 프로퍼티 복사하기
var getAged = function (user, passedTime) {
    var result = {};
    for (var prop in user) {
        result[prop] = user[prop];
    }
    result.age += passedTime; 
    return result;
}


var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    if (user1 !== user2) { 
        console.log("Passed! If you become older, you will be different from you in the past!")
    } else {
        console.log("Failed! User same with past one");
    }
}

agedUserMustBeDifferentFromUser(user, agedUser);

 

• 어떤 매치가 성사될까?
  - 출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요

var fullname = 'Ciryl Gane'

var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
// 1. 객체 this 바인딩 : 프란시스 은가누
            return this.fullname;
        }
    },

    getName: function() {
// 2. 객체 this 바인딩 : 존 존스
        return this.fullname;
    },

    getFirstName: () => {
// 3. 함수 this 바인딩 : 시릴
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
// 4. 함수 this 바인딩 : 가네
        return this.fullname.split(' ')[1];
    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);