JavaScript | Replit

양준식·2020년 3월 30일
7

Foundation | Session Materials

목록 보기
1/1
post-thumbnail

1.Introduction to JavaScript

Console에 "I love WeCode!" 를 출력해주세요.
기존에 있던 코드들은 모두 삭제하고 "I love WeCode!" 만 출력되도록 해주시면 됩니다.

  • JavaScript 소개
  • 알림창 띄우기(alert)
  • console.log

2.주석

마지막 ignore 함수가 실행될 수 있도록 주석을 풀어주세요.

  • 주석이란?
  • 주석을 사용하는 이유
  • 주석의 형태

3.Variables

  • 왼쪽 상단에 variables 라는 함수가 있습니다.
  • 그 안에 myAge라는 변수가 이미 선언되어 있습니다.
  • 추가로 yourAge라는 변수를 선언하고 나이를 할당해주세요.
  • yourAge의 값은 myAge 와 yourAge 변수들의 합이 50이 될 수 있도록 해주세요.
function variables() {
  // 다음 코드는 수정하거나 지우지 마세요
  const myAge = 21;
  
  // 다음에 코드를 작성해 주세요
  let yourAge = 50 - myAge;

  // 다음 코드는 수정하거나 지우지 마세요
  return myAge + yourAge;
}
  • 변수의 사용
  • 변수의 생성
  • naming convention: camelCase vs. snake_case, 의미가 추측 가능한 변수
  • var, let, const 차이
  • 변수의 생성 vs. 변수의 수정 / 변수의 생성 vs. 변수 값 할당

✔️ 심화) 변수 생성 시 메모리에 데이터가 어떻게 저장 되는지
✔️ 심화) 자바스크립트 원시형 타입과 참조형 타입이 어떻게 다른 방식으로 메모리에 저장되는지

4.Function(함수) - 기본

함수 작성에 익숙해지셨나요?
아래의 설명을 듣고 함수를 작성해주세요.

  • 함수 이름은 checkYear입니다.
  • 올해 년도를 return합니다.
  • 년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.
function checkYear() {
  let thisYear = 2019;
  return thisYear;
}
  • 함수의 정의
  • 함수의 호출
  • 함수의 형태
  • 함수 생성 vs. 함수 호출

✔️ 참고) ES6 | Arrow Function

5.Function(함수) - 데이터 반환하기(1)

함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.

  • 함수 이름은 addTen 입니다.
  • 받은 paramter에 10을 더해서 반환해주세요.
function addTen(num) {
  return num + 10;
}
  • 함수의 반환(return)
  • return이 필요한 경우 vs. 필요 없는 경우

✔️ 참고) ES6 | Arrow Function - return을 언제 생략할 수 있는지?

6.Math Expressions

왼쪽 하단의 에디터에 작성 되어 있는 mathExpression 함수의 결과 값이 22가 나오도록 수정해 주세요.

function mathExpression() {
    let result = (5 + 6) * 10 / (2 * 2.5);
}
  • 숫자 표현식
  • 생소한 숫자 표현(num++) >> 반복문에서의 활용
  • num++ vs. ++num 구분하기
  • 수학식 계산 순서

7.텍스트 문자열의 연결

왼쪽 하단의 textConcatenation 함수를 수정하여서 다음 문장이 리턴 될 수 있도록 해주세요.
"2 더하기 2는 4"

function textConcatenation() {
  let text = "2 더하기 2는 " + (2 + 2);
  return text;
}
  • 텍스트 + 텍스트 조합
  • 텍스트 + 숫자 조합

8.if문

myFavoriteColor 함수를 다음의 로직으로 구현 해주세요.

  • color 가 "navy" 이면 "Good!" 리턴
  • color 가 "yellow" 이면 "Bad!" 리턴
  • 그 외의 경우 "Whatever!" 리턴
function myFavoriteColor(color) {
  if(color === "navy") return "Good!";
  if(color === "yellow") return "Bad!";
  return "Whatever!"
}
  • if문 기본
  • 확률의 순서에 따라 if, else if, else 조건의 순서 어떻게 지정하는게 좋을지?
    - 검색 구현 시 빈칸 입력한 경우 먼저 거르고 시작

9. 비교연산자

우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
canIDrinkSoju 함수 안에 코드를 구현하셔서 다음의 경우들이 구현될 수 있도록 해주세요.

  • age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
  • age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
  • 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴
function canIDrinkSoju(age) {
  if(age < 20) return "얘야 가서 공부나 해라!";
  if(age >= 50) return "건강을 위해서 술을 적당히 마시세요!";
  return "소주에는 곱창 어떠신가요?";
}
  • 비교연산자 기본

10. 논리연산자

rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해 보도록 하겠습니다.

  • player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
  • 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
  • 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.
  • player1 과 player2 의 값은 다음 3중 하나 입니다.
    - "가위"
    - "바위"
    - "보"
  • 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.
  • 가능하면 || 와 && 연산자 둘다 사용해주세요.
function rockPaperScissors(player1, player2) {  
  if ((player1 === "가위" && player2 === "바위") || (player1 === "바위" && player2 === "보") || (player1 === "보" && player2 === "가위")) {
    return "player2";
  } else {
    return "player1";
  }
}
  • 논리연산자

11.Function(함수) - 데이터 받기

  1. 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
  2. isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 변수에 저장해주세요.
  3. isbiggerThanHundred 함수에서
    • myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
    • myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.
function isbiggerThanHundred(num) {
  let myNumber = num;
  if(myNumber > 100) return "크다!";
  if(myNumber <= 100) return "작다!";
}
  • 함수의 기본 정의 및 실행
  • 함수에 데이터(인자) 전달하기

12.Function(함수) - parameter, argument

Assignment 1
함수 halfNumber 를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 받은 값을 2로 나눈 결과를 리턴합니다.
3. 매개변수 이름은 마음대로 정해서 사용합니다.

function halfNumber(num) {
  return num/2;
}

Assignment 2
함수 halfAndAddNumber를 선언하고 구현하세요.
1. 숫자로 된 인자 하나를 받습니다.
2. 1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.
3. halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.
4. result에 1을 더한 값을 리턴합니다.

function halfAndAddNumber(num) {
  let result = halfNumber(num);
  return result + 1;
}
  • 용어 확실히. parameter vs. argument

13.Function(함수) - 여러 인자

meetAt 함수를 만들어주세요. 이 함수는 인자를 세개 받습니다.

  • 첫번째 인자는 년도에 해당하는 숫자입니다.
  • 두번째 인자는 월에 해당하는 숫자입니다.
  • 세번째 인자는 일에 해당하는 숫자입니다.
  • 년도 인자만 받았을 경우 --> "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월 인자를 받았을 경우 ---> 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
  • 년도,월,일 인자를 전부 받았을 경우 --> 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.
function meetAt(year, month, date) {
  if (date) return year + '/' + month + '/' + date;
  if (month) return year + '년 ' + month + '월';
  if (year) return year + '년';
}
  • 여러 개의 데이터를 전달 받는 함수
  • ✔️ 인자의 우선순위 - 두 번째, 세 번째 인자가 있는데 첫 번째 인자가 없을 수 없음

14.Function(함수) - 데이터 반환하기(2)

getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.
getTotal함수를 만들어주세요!

  • getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.
  • 인자이름은 원하는대로 지어주셔도 됩니다.
  • getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.
    _
    참고)
    - getTax 함수는 가격의 tax를 구하는 함수입니다.
    - calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
    - getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.
// 수업 내용을 직접 테스트해보세요!
function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

// Assignment
function getTotal (price1, price2){
  return calculateTotal(price1) + calculateTotal(price2);
}

15.Array

Assignment1

  • getElement 함수안에 arr 변수를 선언했습니다.
  • arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
  • getElement함수가 배열이 담긴 arr 변수에 접근하여 "array" 라는 문자열이 return 될 수 있도록 해주세요.
function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0];
}

Assignment2

  • addFirstAndLast 함수 안에 작성해주세요.
  • addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
  • addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
  • 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는
  • array라면 0을 리턴해주세요.
function addFirstAndLast(myArray) {
  if(myArray.length === 1) return myArray[0];
  if(myArray.length === 0) return 0;
  return myArray[0] + myArray[myArray.length - 1];
}

✔️ 심화) myArray === [] 이렇게 하면 안 되는 이유

16.배열 조작하기

divideArrayInHalf 함수를 다음과 같이 구현해주세요.

  • divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.
  • array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로,
    10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.
  • 중요사항
    이때, 순서는 array의 맨 뒤의 요소 부터 맨 앞의 요소까지 순차적으로 이루어저야 합니다.
  • 예를 들어, 인자 array 값이 다음과 같을때
    [1, 20, 10, 5, 100]
  • result 배열이 만들어 지는 순서는 다음과 같으며,
    [100] > [5, 100] > [10, 5, 100] > [10, 5, 100, 20] > [1, 10, 5, 100, 20]
  • 아래와 같은 result가 리턴 되어야 합니다.
    [1, 10, 5, 100, 20]
function divideArrayInHalf(array) {
  let result = [];
  for(let i = 4; i >= 0; i--) {
    if(array[i] <= 10) result.unshift(array[i]);
    if(array[i] > 10) result.push(array[i]);
  }
  return result;
}

17.for문

findSmallestElement 함수를 구현해 주세요.

  • findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
  • array 의 값들 중 가장 작은 값을 리턴해주세요.
  • 만일 array가 비어있으면 0을 리턴해주세요.
  • 예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면:
    [20, 200, 23, 1, 3, 9]
  • 1이 리턴되어야 합니다.
function findSmallestElement(arr) {
  if( arr.length === 0 ) return 0;
  let min = arr[0];
  for(let i = 0; i < arr.length; i++) {
    if(min > arr[i]) min = arr[i];
  }
  return min;
}

18.데이터 타입

  • typeof

✔️ 심화) 원시형 데이터 타입 vs. 참조형 데이터 타입

19.String

String의 slice()도 자주 쓰는 함수 중 하나입니다.
먼저 slice에 해당하는 설명을 가볍게 읽어봅시다.
https://www.w3schools.com/jsref/jsref_slice_string.asp
_
그 후 sliceCityFromAddress 함수를 구현해 주세요.

  • sliceCityFromAddress 함수는 address 인자를 받습니다.
  • address 인자에는 주소를 나타내는 string이 주어집니다.
  • 주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
  • 주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
  • "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
  • 예를 들어, 다음과 같은 주소가 주어졌다면 :
    "경기도 성남시 분당구 중앙공원로 53"
  • 다음과 같은 값이 리턴되어야 합니다 :
    "경기도 분당구 중앙공원로 53"
function sliceCityFromAddress(address) {
  let from = address.indexOf("도");
  let to = address.indexOf("시");
  if(address.indexOf("도") !== -1) {
    return address.slice(0, from+1) + address.slice(to+1);
  } else {
    return address.slice(to+2);
  }
}

sliceCityFromAddress("서울특별시 분당구 중앙공원로"); // "분당구 중앙공원로"
sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53"); // "경기도 분당구 중앙공원로 53"

20.String - Number 변환

우리나라는 국민연금을 만 65세 부터 받을 수 있습니다.
nationalPensionRemainingYearCount 함수를 구현해주세요.

  • nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.
  • age_string은 나이 값인데 string형 값으로 되어 있습니다.
  • 주어진 나이부터 몇년이 지나야 국민연금을 받을수 있는지 리턴해주세요.
  • 리턴 값으로는 다음 문장 처럼 리턴해야 합니다.
    "앞으로 20년 남으셨습니다"
  • 예를 들어, age_string 값이 다음과 같다면:
    "35"
  • 리턴 값은 다음과 같아야 합니다.
    "앞으로 30년 남으셨습니다"
function nationalPensionRemainingYearCount(age_string) {
  let age = Number(age_string);
  let yearsLeft = 65 - age;
  return `앞으로 ${yearsLeft}년 남으셨습니다`;
}

21.날짜와 시간

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다.
생일이 지나야 비로소 한 살을 더 먹게됩니다.

그에 비해 우리나라는 새해가 되면 모든 국민이 1살을 더 먹는 방식 입니다.
태어나면 1살 부터 시작하고 새해때 2살이 됩니다.
그래서 10월 이나 11월에 태어나는 아기들은 한두달 안에 2살이 되버리기도 하죠.
1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다.
미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.

getWesternAge 함수를 구현해주세요.

  • getWesternAge 함수는 birthday 라는 인자(input)를 받습니다.
  • birthday는 Date 객체이며 생일을 나타냅니다.
  • 현재 기준으로 해당 생일이 만으로 몇살인지 계산 후 리턴해주세요.
  • 예를 들어, 오늘이 2019년 3월 23일이고, birthday 값이 다음과 같다면:
    1990-03-21T00:45:06.562Z
  • 리턴 값은 29 이 되어야 합니다.
function getWesternAge(birthday) {
    let today = new Date();
    let thisYear = 0;
    if (today.getMonth() < birthday.getMonth()) {
        thisYear = 1;
    } else if ((today.getMonth() === birthday.getMonth()) && today.getDate() < birthday.getDate()) {
        thisYear = 1;
    }
    let age = today.getFullYear() - birthday.getFullYear() - thisYear;
    return age;
}

console.log(getWesternAge(new Date('1981-07-29T03:24:00')));
console.log(getWesternAge(new Date('1990-07-30T19:45:06.562Z')));
console.log(getWesternAge(new Date('1990-07-31T00:45:06.562Z')));

22.Number

앞으로 랜덤함수를 쓸 일이 정말 많습니다.
그런데 Math.random()으로는 내가 원하는 범위의 랜덤수를 얻을 수가 없습니다.
항상 0.0000000000000000에서 0.9999999999999999 사이 값에서만 return해주기 때문이죠.
_
최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해주세요.
함수는 짧지만, 이번에는 수학의 뇌를 조금 써야 하는 assignment입니다.

function getRandomNumber (min, max) {
  return Math.random() * (max - min) + min;
}

23.Object

이제까지 성공하셨던 Assignment와는 조금 다른 유형입니다.
그 동안에는 특정값을 구해서 return했다면,
이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.

getData에 배열 세 개를 인자로 넘길 것이고,
이 배열 세 개를 조합해서 하나의 새로운 객체를 만들 것입니다.

getData는 세 개의 배열을 인자로 받는 함수입니다.
salesArr: 날짜별 판매량
ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]
reviewArr: 날짜별 리뷰수
ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]
likeArr: 날짜별 좋아요수
ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]

위의 예시로 보여드린 배열은 단지 예일뿐,
날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.

왜 각각 세 개의 배열을 하나의 객체로 구조를 바꿔야 할까요?

위의 배열에서 4월 1일에 판매량, 리뷰수, 좋아요수를 확인하려면
세 개의 배열을 각각 for문으로 반복해서 날짜를 확인해야 하므로 좋은 구조의 데이터라고 할 수 없습니다.
(날짜가 365일이라고 하면, 세 개의 배열이 각자 365번 돌아야 하니까요)

그래서 세 개의 배열을 사용하기 좋게 객체로 바꿀 것입니다.

객체는 프로퍼티명으로 바로 접근 가능하니까,
날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다.
그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.

다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
objData가 갖고 있는 property는 3개 입니다.

  • sumAmount: 총 판매량
  • sumReview: 총 리뷰개수
  • sumLike: 총 좋아요수
function getData(salesArr, reviewArr, likeArr) {
  let objData = {};
  
  let salesSum = 0;
  let reviewSum = 0;
  let likeSum = 0;
  
  for(let i = 0; i < salesArr.length; i++) {
    salesSum = salesSum + salesArr[i][1];
  }
  
  for(let i = 0; i < reviewArr.length; i++) {
    reviewSum = reviewSum + reviewArr[i][1];
  }  

  for(let i = 0; i < likeArr.length; i++) {
    likeSum = likeSum + likeArr[i][1];
  }  
  
  objData.sumAmount = salesSum;
  objData.sumReview = reviewSum;
  objData.sumLike = likeSum;
  
  return objData;
}

24.Scope

코드를 작성하는 맨 아래에 whatIs라는 함수를 만들어 놓았습니다.
이번에는 무엇을 구현하는 assignment가 아닙니다.

위에 내용이 잘 정리되었는지 궁금하네요!
case 오른쪽에 설명해야 할 단어를 텍스트로 작성해놨습니다.
description 변수에 해당 단어에 대한 설명을 딱 한 문장으로 작성해주세요.

강의 내용을 참고하셔도 되고 인터넷에서 검색해도 됩니다.
이해하신대로 가볍게 작성해주세요.
_
그리고 처음보는 switch문이 있습니다.
switch문이 무엇인지 궁금한 사람은 아래에서 읽고 사용법을 익혀주세요.
궁금한 것이 있다면 stack overflow에 질문을 올려주세요.
https://www.w3schools.com/js/js_switch.asp

function whatIs(type) {
  let description;
  
  switch (type) {
    case 'scope':
      description = '변수가 쓰일 수 있는 범위';
      break;
    case 'block':
      description = '중괄호로 묶여진 단위';
      break;
    case 'global scope':
      description = '전역 범위';
       break;
    case 'global variable':
      description = '전역 변수 > 전역에서 접근할 수 있는 변수';
       break;
    case 'block scope':
      description = '중괄호 안의 범위';
       break;
    case 'local variable':
      description = '지역 변수 > 중괄호 안에서만 쓸 수 있는 변수';
      break;
    case 'global namespace':
      description = '전역 변수를 사용할 수 있는 범위';
      break;
    case 'scope pollution':
      description = '전역 변수를 남용하여 값이 수정된 경우';
      break;
    default :
      description = ''
      break;
  }
  
  return description;
}

25.Class

class 생성을 연습해보겠습니다.
MyMath라는 class를 생성해주세요.

  • constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
  • 총 4개의 메서드를 구현해주세요.
    - getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
    - add: 두 개의 숫자를 더하는 메서드
    - substract: 두 개의 숫자를 빼는 메서드
    - multiply: 두 개의 숫자를 곱하는 메서드
class MyMath {
  constructor(num1, num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber() {
    let arr = [this.num1, this.num2];
    return arr;
  }
  add() {
    return this.num1 + this.num2;
  }
  substract() {
    return this.num1 - this.num2;
  }
  multiply() {
    return this.num1 * this.num2;
  }
}

26.Object-다시:)

아래의 객체에서 '샐러드'라는 값이 출력 될 수 있도록 getAnswer함수에서 return 해 주세요.

let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}
function getAnswer() {
  let whereIsSalad = myProfile['my favorite']['food'][0]['name'];
  return whereIsSalad;
}

27.[es6] arrow function

이번 assignment는 자동채점이 아닙니다. 작성해서 제출하면 채점해드리겠습니다.
1. 왼쪽 코드창에서 function을 사용한 함수표현법을 ES6 표현을 바꿔주세요.
2. 왼쪽 코드창에서 ES6의 함수 표현을 function 키워드를 사용해서 바꿔주세요.

// Assignment 1-1
function getN(userInfo, label) {
  return userInfo[label];
}
// ES6
const getN = (userInfo, label) => userInfo[label];


// Assignment 1-2
let sayHi = function() {
  alert('Hello');
};
// ES6
const sayHi = () => {alert('Hello')};


// Assignment 2-1
const getName = info => info['name'];

function getName(info) {
  return info['name'];
}


// Assignment 2-2
const getEmail = username => `${username}@gmail.com`;

function getEmail(username) {
  return '${username}@gmail.com';
}
  • 언제 중괄호 필요한지, 언제 return 필요 없는지 확실히 인지하기

28.[es6] template literals, string method

getCookie 함수를 구현해주세요
1. 아무 인자도 받지 않습니다.
2. 쿠키에 접근해서 저장된 현재 쿠키 정보를 가져옵니다.
3. wecode_cookie 라는 key값으로 저장된 쿠키정보를 추출하고 그 value 값을 리턴합니다.

  • document.cookie 는 모든 쿠키 정보가 세미콜론; 으로 구분되어 하나의 string으로 되어있네요.
  • localStorage나 sessionStorage는 바로 key 이름으로 접근할 수 있어서, value를 갖고 오기가 쉬운데, cookie는 string 을 분해해서 value를 가져와야합니다.
  • 그 동안 배운 메서드를 활용해서 cookie 중에 'wecode_cookie' 라는 키의 값을 찾아주세요.
const getCookie = () => {
      let cookie = document.cookie;
      let splitCookie = cookie.split(';')
      let element = splitCookie.filter(el => el.includes("wecode_cookie"));
      return element[0].split("=")[1]
}

29.array method

두 문제 모두 map 메서드와 arrow function을 사용해주세요.
_
Assignment1

  • moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨드립니다.
  • 100 보다 크거나 같으면 true를, 100 보다 작으면 false로 요소를 변경하여 새로운 배열을 return해주세요.
  • 예를 들어
    nums(input)은 [100, 9, 30, 7]
    return은 [true, false, false, false]
const moreThan100 = nums => {
  return nums.map(el => {
    if (el >= 100) return true;
    if (el < 100) return false;
    })
}

// 간단한 버전
const moreThan100 = nums => {
  return nums.map(el => el > 100);
}

Assignment2

  • formatDate 함수에 날짜가 담긴 배열을 전달드립니다.
  • 날짜의 data type은 string이며,
  • 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
  • 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서 새로운 배열을 return 해주세요.
  • 예를 들어
    dates(input)은 ['2019-03-21', '2019-04-21', '2019-05-21']
    return은 ['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']
const formatDate = dates => {
  return dates.map(el => {
    let date = el;
    
    // remove hyphen
    let hyphenRemovedDate = date.replace(/-/gi, '');
    
    // extract each string elements of date
    let year = hyphenRemovedDate.slice(0, 4);
    let month = hyphenRemovedDate.slice(4, 6);
    let day = hyphenRemovedDate.slice(6);
    
    // include '년','월','일'
    let newFormDate = year + '년 ' + month + '월 ' + day + '일';
    
    return newFormDate;
  })
}

// 간단한 버전
const formatDate = dates => {
  return dates.map(dates => {
    let dateArr = dates.split('-');
    
    return `${dateArr[0]}년 ${dateArr[1]}월 ${dateArr[2]}일`;
  });
}

30.object(3)

getExamResult 함수를 구현해주세요.

  • 인자 scores 는 다음과 같은 객체입니다.
  • 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다.
  • 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.
    ('A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F')
{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}
  • 인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.
    ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']
  • 다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요
  1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다.
    단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.
A+ => 4.5
A => 4
B+ => 3.5
B => 3
C+ => 2.5
C => 2
D+ => 1.5
D => 1
F => 0
  1. requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면,
    해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.
    _
    위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면,
    다음과 같은 객체과 리턴됩니다. (요소간 순서는 다를수 있지만, 채점에 무관합니다.)
{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
}
// Assignment - 방법 1.
const getExamResult = (scores, requiredClasses) => {
  const result = {}
  function changeScore(alpha){ // 점수를 숫자로 환산하는 함수
    if( alpha === "A+"){
      return 4.5
    } else if ( alpha === "A"){
      return 4
    } else if ( alpha === "B+"){
      return 3.5
    } else if ( alpha === "B"){
      return 3
    } else if ( alpha === "C+"){
      return 2.5
    } else if ( alpha === "C"){
      return 2
    } else if ( alpha === "D+"){
      return 1.5
    } else if ( alpha === "D"){
      return 1
    } else {
      return 0
    }
  }
  // 새로운 객체 result에 기존 key, 숫자로 변환된 점수를 넣음
  for ( key in scores ){ 
    result[key] = changeScore(scores[key]) //
  }
  const classList = Object.keys(result) // result의 키를 배열로 받음
  for ( i in requiredClasses){
    if( classList.indexOf(requiredClasses[i]) === -1){ // 원래 수업과, 필수 수업을 비교
      result[requiredClasses[i]] = 0;
    }
    }
  return result;
}


// Assignment - 방법 2.
const getExamResult = (scores, requiredClasses) => {
  const result = scores;
  
  for(let key in result){
    if(result[key] === "A+"){
      result[key] = 4.5;
    }
    else if(result[key] === "A"){
      result[key] = 4;
    }
    else if(result[key] === "B+"){
      result[key] = 3.5;
    }
    else if(result[key] === "B"){
      result[key] = 3;
    }
    else if(result[key] === "C+"){
      result[key] = 2.5;
    }
    else if(result[key] === "C"){
      result[key] = 2;
    }
    else if(result[key] === "D+"){
      result[key] = 1.5;
    }
    else if(result[key] === "D"){
      result[key] = 1;
    }
    else if(result[key] === "F"){
      result[key] = 0;
    }
  }
  
  requiredClasses.forEach((el) => {
   if(result[el] === undefined){
      result[el] = 0;
    }
  })
  
  return result
}

// Assignment - 방법 3.
const getExamResult = (scores, requiredClasses) => {
  const result = {}
  const list = {
    "A+":4.5,
    "A":4,
    "B+":3.5,
    "B":3,
    "C+":2.5,
    "C":2,
    "D+":1.5,
    "D":1,
    "F":0    
  }
  
  for(let key in scores){
    result[key] = list[scores[key]];
  }
  
  const keys=Object.keys(result)
  for(let i in requiredClasses){
    if(!keys.includes(requiredClasses[i])){
      result[requiredClasses[i]] = 0;
    }
  }
  
  return result;
}
profile
양준식
실력, 심력, 체력, 영력의 균형있는 성장을 추구합니다.
이전 포스트

HTML, CSS | Replit

1개의 댓글

comment-user-thumbnail
kirin.log
2020년 12월 23일

깔끔하게 정리해주셔서 감사합니다 ~~~ :)

답글 달기