1. JavaScript 소개

• HTML : 웹페이지의 구조 정의를 하는 markup language
• javascript: 웹페이지의 상호작용을 하도록 만들어진 언어이며 사용자의 행동처리, 데이터 저장, 네트워크의 응답과 요청을 처리하는 역할을 한다.

상호작용의 대표적인 예가 alter(), console.log()가 존재한다.

alert("Hello")
console.log("Hi")

위와 같이 이미 정의(약속)된 단어를 Reserved Words(약속어)라고 한다.
이런 Reserved Words는 이미 사용중이기 때문에 변수명 등으로 함부로 사용할 수 없다.

console.log("hello")

➕

✅ DEEEEPER!

2. 주석

• 주석: 코드를 작성했으나 브라우저에서 해당코드를 실행시키지 말고 무시하라는 뜻이다.
• 주석의 용도: 필요없어졌으나 혹시몰라 남길 때, 인수인계를 위한 코드 설명, 이해가 잘 안되서 한글설명

➕

✅ DEEEEPER!

3. Variable(변수)

3.1 변수:

변하는 수 또는 변하는 값을 넣는 공간을 변수라고 한다.

Var name = "김개발"

• 김개발은 변수명 name에 할당된 값입니다.
• 그리고 변수명 name에는 김개발이란 값이 저장이됩니다.

3.2 변수명 선정시 유의할 점.

• 한 '파일'에서 같은 변수이름을 중복해서 사용할 수 없다.
• 대소문자에 따라 다른 변수명으로 인식된다.
• 변수이름을 정할때, 첫번째 문자는 글자, 밑줄(_), 달러기호($)중 하나이다.'!숫자가없다!'
• js에서 변수이름과 함수이름은 camelCase(단어마다 대문자로 시작)를 사용할 것(둘다 가능함.).
• camelcase: firstSecondThird, snakecase: first_second_third

3.3 let,const.

Escma script 5 - > 6로 버전이 업데이트 되면서 var 에서 let과 const가 파생 되었습니다.
let: 해당 키워드 사용 시 변수값 수정 가능.
*const: 해당 키워드 사용시 변수값 수정 불가.

3.4 변수 값 수정.

변수에 저장 된 값을 수정 할 때 이미 선언된(저장된) 변수이므로 변수앞에 let키워드를 붙이지 않아도 되며
새로운 값을 '할당'하기 위해서는 아래와 같이 하면 된다.

(선언된) 변수명 = value;

3.5 변수의 선언과 할당

변수의 선언(declare)과 할당은 분리될 수도 있다.

보통은 아래와 같이 선언한다.

let address ='선릉';

• 이 때 변수명 address는 선언되고 값(value)는 변수에 할당된것이다. 그리고 address(변수)는 값을 저장하였다.

왼쪽 상단에 variables 라는 함수가 있습니다. 
그 안에 myAge라는 변수가 이미 선언되어 있습니다.
yourAge라는 변수를 새롭게 선언하고 나이를 할당해주세요.
myAge와 yourAge 변수의 합이 50이 될 수 있도록 yourAge의 값을 정해주세요.

function variables() {
  // 다음 코드는 수정하거나 지우지 마세요
  const myAge = 21;
  const yourAge = 29;
  // 아래에 코드를 작성해 주세요


  // 다음 코드는 수정하거나 지우지 마세요
  return myAge + yourAge;
}

variables();

➕

• 설명을 해보자

✅ DEEEEPER!

4. Function(함수)

함수의 호출이란 함수에 정의된 함수명을 통해 함수를 불러와 실행시키는 것을 말한다.

4.1 함수의 선언 및 호출

function checkCorrect() {
	let hi = '안녕하세요'; 
    return hi;
    } #함수선언 및 정의
 checkCorrect(); 함수호출

4.2 함수의 정의와 함수의 호출(실행)

함수의 정의란 함수가 할 동작(실행할 코드)이 무엇이다 라고 정해두는 것이다.

함수 이름은 checkYear로 해주세요.
올해 년도를 return합니다.
년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.

function checkYear(){
  return 2020;
}
function add(a, b) {
  return a+b
}
let result = add(5,8);

console.log(result);

➕

✅ DEEEEPER!

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

5.1 함수의 반환(Return)

• 함수 선언에 있어 사용된 return 이라는 키워드는 함수의 반환을 위한 것이다.

• 모든 함수는 무엇이든 반환을 하는데 함수가 받은 데이터를 정의된 행동을 통해 실행이 되었을 때 실행이 된 뒤 작성된 값을 return을 통해 반환한다.

• 만약 return을 선언해주지 않는다면 undefined라는 값을 반환한다.

5.2 매개변수(parameter)와 인자(argument)

• 매개변수 : 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할이다.(변수의 이름 또는 함수 외부로 부터 들어온 값이 담길 자리)
• 인자 : 함수의 매개변수 자리에 들어갈 구체적인 값을 뜻한다.

함수 이름은 addTen 입니다.
받은 parameter에 10을 더해서 반환(return)해주세요.

function addTen (a){
  return a + 10
}

let num1 = 2
const textConcatenation = num1 => {
  const num2 = 2
  const num3 = 4
  return `${num1} 더하기 ${num2}는 ${num3}`
}
textConcatenation(num1)

➕

• 매개변수: 함수를 정의하며 함수선언식의 괄호() 안에 어떤 변수명을 쓰면 그것을 매개'변수'라고 한다. 함수가 호출될 때 값을 전달받게 되면 매개변수에 값이 정의 된다

• 인자: 함수를 호출하면 호출문의 괄호안에 어떤 값 또는 값이 정의된 변수를 쓰고 그것을 인자라고한다.

✅ DEEEEPER!

• 함수의 호출이란?!

6. Math Expressions(연산자)

• 사칙연산등의 수학계산을 할 수 있는 수단으로 사용됨.
• 선언의 순서도 중요하다(왼쪽으로부터 코드가 읽어지기 때문)

mathExpression 함수의 결과 값이 22가 나오도록 수정해 주세요.

function mathExpression() {
  // 다음 코드의 값이 22가 되도록 수정해주세요.
  let result = (5 + 6) * 10 / (2 * 2.5);
  
  // 다음 코드는 수정하지 마세요!
  return result;
}

➕

✅ DEEEEPER!

7. 텍스트 문자열의 연결

• 텍스트 문자열의 연결은 몇가지 조합으로 가능한가?
• 숫자와 텍스트가 조합된다면?
• 텍스트와 숫자의 형태적 차이는 ?

7.1.1 텍스트 + 텍스트 조합

' + '연산자를 사용해서 조합하면 된다.

console.log("안녕" + "하세요");
console.log("안녕" + "하" + "세요");
console.log("안녕" + "하세" + "" + "요");

let hi = "안녕";
console.log(hi + "하세요");

let ha = "하세요";
console.log(hi + ha);

7.1.2 변수명으로 선언하여 변수끼리 더해도 가능하다.

let message = "감사합니다., ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess);

7.1.3 숫자 + 숫자 조합

그냥 연산자로 적용하면 된다.

console.log(2 + 2); // 숫자 4

7.2.1 텍스트 + 숫자 조합

그림과 같이 서로 다른 Type인 string + number를 시도하면 항상 string형으로 변한다.

7.2.2 변수명으로 선언하여 변수끼리 더해도 가능하다.

let message = 1
let userName = 3
let banger = 23242
let customMess = message + userName + banger;
console.log(customMess); //23246

➕

✅ DEEEEPER!

8. if문(조건문)

if문은 조건문 중 하나이며 설정한 조건에 true값을 반환할 시 해당 코드블럭이 실행된다.

let answer = 3 + 3;

if (answer > 15) {
  alert("15보다 큰 숫자!");
} else if (answer > 10) {
  alert("10보다 큰 숫자!");
} else if (answer > 5) {
  alert("5보다 큰 숫자!");
} else {
  alert("5보다 작거나 같은 숫자!");
}

• myFavoriteColor 함수는 "색깔"을 인자로 받고 3가지 결과 값을 리턴합니다.
• if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.
• color 가 "navy" 이면 "Good!" 리턴
• color 가 "yellow" 이면 "Bad!" 리턴
• 그 외의 경우 "Whatever!" 리턴

function myFavoriteColor(color) {
  if (color == 'navy'){
    return "Good!"
  }
  else if (color =="yellow"){
    return "Bad!"
  }
  else {
    return "Whatever!"
  }
}

➕

Assignment refactoring

const myFavoriteColor = color => {
    if(color === 'navy'){
      return "Good";
    }
    else if(color === 'yellow'){
      return "Bad!"
    }
    else{
      return "Whatever!"
    }
}

myFavoriteColor("navy")

✅ DEEEEPER!

9. 비교연산자

• 연산자란 수학 물리학 등등에서 쓰이는 용어로 여러 변수나 값에 수학적, 논리적 움직임을 지시하는 것을 말한다.

• 관계 연산자란 일종으로 2개 또는 그 이상의 값이나 식을 비교하여 대소관계를 나타내기 위해 사용하는 연산자이다. Ex) 크다(＞), 같다(＝), 보다 작다(＜), 같지 않다(＜＞), 보다 크거나 같다(＞＝), 보다 작거나 같다(＜＝)

• 그래서 비교연산자란 결과는 언제나 Boolean값(T&F)으로 나오며 두개의 변수 또는 식을 비교하는 것.

canIDrinkSoju 함수 안에 비교 연산자를 사하여 다음의 경우들이 구현될 수 있도록 해주세요.

age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴

function canIDrinkSoju(age) {
  if(age < 20){
    return "애야 가서 공부나 해라!"
  }
  else if (age >= 50){
    return "건강을 위해서 술은 적당히 마시세요!"
  }
  else{
    return "소주에는 곱창 어떠신가요?" 
  }
}

➕

Assignment refactoring

const canIDrinkSoju = age =>{
  if (age < 20) {
    return "애야 가서 공부나 해라!" 
  }
  else if(age >=50){
    return "건강을 위해서 술은 적당히 마시세요!"
  }
  else{
    return "소주에는 곱창 어떠신가요?" 
  }
}

✅ DEEEEPER!

• 논리연산자와 뭐가다른가?

10. 논리연산자

• 논리연산에 사용되는 기준을 논리 연산자라고 하며 대표적으로 세 개가 있습니다.(물론 더 있음)

참고 : MDN

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

function rockPaperScissors(player1, player2) {

  if ((player1 === "가위" && player2 === "보" ) || (player1 === "가위" && player2 === "가위") || (player1 === "보" && player2 === "보" ) || (player1 === "보" && player2 === "바위") || (player1 === "바위" && player2 === "바위") || (player1 === "바위" && player2 === "가위")) {
      result = "player1";
      
  }
  else if((player1 === "가위" && player2 === "바위") || (player1 === "바위" && player2 === "보") || (player1 === "보" && player2 === "가위")) {
     result = "player2";
  }
  return result
}

➕

Assignment refactoring

const result = (player1,player2) => {
  if((player1 === "가위" && player2 === "보" ) || (player1 === "가위" && player2 === "가위") || (player1 === "보" && player2 === "보" ) || (player1 === "보" && player2 === "바위") || (player1 === "바위" && player2 === "바위") || (player1 === "바위" && player2 === "가위")){
    return 'player1'
  }
  else{
    return 'player2'
  }
}

result("보","가위")

✅ DEEEEPER!

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

함수에서 데이터를 받는것은 parameter(매개변수)에 argument(인자)를 받아서 처리하는 것이다.

• 1. 함수의 기본적인 실행

function alertSuccess() {
  alert("로그인 성공!");
}
alertSuccess();

• 2. 매개변수에 인자를 받아 실행

function alertSuccess(msg) {
  alert(msg);
}

alertSuccess("김개발님 로그인 성공!");
alertSuccess("박사장님 로그인 성공!");

• 데이터를 전달 받는 isbiggerThanHundred 이라는 이름의 함수를 만들어주세요.
• isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.
• isbiggerThanHundred 함수에서
• myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.
• myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

function isbiggerThanHundred(num){
  myNumber = num;
  if (myNumber > 100){
    result = "크다!"
  }
  else if(myNumber <= 100) {
    result = "작다!"
  }
  return result
}

➕

Assignment refactoring

const isbiggerThanHundred = arg1=>{
  const myNumber = arg1
  if(myNumber > 100){
    return "크다!"
  }
  else{
    return "작다!"
  }
}


isbiggerThanHundred(140)

✅ DEEEEPER!

12.Function(함수) - parameter, argument

5. Function(함수) - 데이터 반환하기(1)를 참고해보자

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

function halfNumber(num){
  return num/2
}

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

function halfAndAddNumber(num) {
  result = halfNumber(num)
  return result + 1
}

halfAndAddNumber(1)

➕

Assignment refactoring

 const halfNumber = num =>{
   return num/2
 }
 const halfAndAddNumber = num1 => {

   return halfNumber(num1) + 1
 }

halfAndAddNumber(35)

✅ DEEEEPER!

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

• 하나의 인자가 아닌 여러개의 인자를 받을수도 있음
• 매개변수 >= 인자를 지켜줘야한다

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

• 첫번째 인자는 년도에 해당하는 숫자입니다.
• 두번째 인자는 월에 해당하는 숫자입니다.
• 세번째 인자는 일에 해당하는 숫자입니다.
  년도 인자만 받았을 경우 --> "1234년" 과 같은 형식의 문자열을 리턴 해주세요.
  년도,월 인자를 받았을 경우 ---> 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.
  년도,월,일 인자를 전부 받았을 경우 --> 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

function meetAt(y,m,d){
  if (m === undefined && d === undefined){
   result =`${y}년`
  }

  else if(d === undefined){
    result = `${y}년 ${m}월`
}
  else{
    result = `${y}/${m}/${d}`
  }
  return result
}
meetAt(2022)

➕

Assignment refactoring

const meetAt = (y,m,d) => {
  if (!m && !d){
    return y+"년"
  }
  else if(!d && m) {
    return  y+"년"+" "+ m+"월"
}
  else{
    return  y+"/"+m+'/'+d
  }
}

meetAt(2032, 3,3)

빈스트링 자체가 false를 뜻하므로 조건안에
if(d) { return y+"/"+m+'/'+d}로 적어도 괜찮을듯
어차피 y,m,d순서로 읽어들이기 때문이다.

✅ DEEEEPER!

• 매개변수 >= 인자를 지켜줘야한다 -> 안지키면 어떻게 되지

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

14.1 return 함수 정의, 호출, 결과확인

• return이라는 것은 함수를 호출했을 때 함수가 값을 반환한다는 뜻이다.(없으면 undefined를 반환)

• 호출은 functionname(arguments)

• 결과확인은 return 시 변수를 통해 실행시켰으면 변수를 console.log()시키는 방법으로 가능, 아니면 그냥 console.log()안에 함수를 실행시키자

14.2 함수 내부에서 다른 함수 호출하기

함수내부에서도 다른 함수를 호출 할 수 있다.
아래는 calculateTotal내에서 getTax를 호출한 것이다.

function getTax(price) {
  return price * 0.1;
}

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

var result = calculateTotal(3500);
console.log(result);

getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.
getTotal 함수를 만들어주세요!
1. getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.
2. 인자이름은 원하는대로 지어주셔도 됩니다.
3. getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.

function getTax(price){
  return price * 0.1;
}

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

var result = calculateTotal(3500);
console.log(result);


//assignment

function getTotal(a,b){
  return calculateTotal(a) + calculateTotal(b) 
}
getTotal(100,200)

➕

• 함수 내부에서 다른 함수 호출시 주의할 점은 ?

✅ DEEEEPER!

15. Array (배열)

✔️HTML에서 JavaScript를 동작하는 두 가지 방법에 대해 이해한다.

Html에서 Script창에 src를 이용해 호출하는 방법 Html 자체 파일에 script tag content로 작성하는 방법 -> 파일이 무거워지고 가독성이 떨어져 비선호

➕

✅ DEEEEPER!

js 호출 시

async, defer가 존재
async 와 defer는 서버에서 읽어 들일 때 js와 html을 병렬로 읽어준다.
defer가 가장 선호됨.

✔️JavaScript에서 DOM을 이용해 HTML에 접근하고 조작할 수 있다.

✔️다양한 이벤트의 기능을 살펴보고 그 중 자주 사용하는 기능을 직접 사용해 본다.
✔️addEventListener 함수를 사용해 이벤트를 생성하여 정적인 웹페이지를 동적으로 변화시킬 수 있다.

정적인 HTML 페이지에 JavaScript 코드를 적용하여 동적으로 만들어주는 DOM은 가장 본질적인 개념 중 하나 입니다. 내용이 어색할 수 있지만 어렵지는 않습니다. 레플릿을 풀면서 특정 요소에 접근하고 그 안에 새로운 요소를 생성해주고 내용을 넣고 스타일을 적용해주는 일련의 과정을 흐름에 맞게 하나씩 코드로 옮겨보면서 DOM에 대해 충분히 익힐 수 있으면 좋겠습니다.

16. for 문

for 반복문을 사용하여 원하는 만큼 반복시킬 수 있으며 시작점과 끝점을

findSmallestElement 함수를 구현해 주세요.
findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
array 의 값들 중 가장 작은 값을 리턴해주세요.
만일 array가 비어있으면 0을 리턴해주세요.
예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면:

function findSmallestElement(arr) {
  let minNumb = arr[0]
  if (arr.length === 0) {
    return 0
  }
  else {
    
    for(i=0; i< arr.length+1; i++){
      
      if(minNumb >= arr[i]){
        minNumb = arr[i];
      }
      else{
        minNumb = minNumb;
      }
    }
    
  }
  return minNumb
}

findSmallestElement([20, 200, 23, 1, 3, 9])

➕

Assignment refactoring

const myArray = [1,2,3,4,5]
const len = myArray.length

const addFirstAndLast = (myArray) =>{
  if(len === 1){
    return myArray[0]
  }
  else if (len === 0){
    return 0
  }
  else{
  return myArray[0] + myArray[len-1]
  }
}
addFirstAndLast(myArray)

✅ DEEEEPER!

17. 배열 조작하기

17.1 배열 요소 추가하기

• 배열: 인덱스와 그에 해당된 value값을 가지고 있는 것.
• 지정된 인덱스 이상에 값을 넣으면 undefined로 값이 채워진다.

let cities = [];

cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]
cities[5] = "제주도";

console.log(cities)
["서울", "대전", "대구", undefined, undefined, "제주도"]

17.1. 배열 조작 방법.

17.1.1 push / unshift 함수.

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");

17.1.2 index로 접근하여 수정이나 추가

let day = ['m', 's', 'w', 't'];
day[1] = 't';
day[4] = 'f';
day[5] = 's'; // 방법 (1)

let month = [1, 2, 3, 4]
month.push(5); // 방법 (2)

17.2. 배열의 요소제거 하는 방법

pop: arr.pop()으로 실행 가능하며 배열의 가장 마지막에 존재하는 값을 제거하여 그값을 호출자에게 반환한다.

splice: splice메서드는 기존 요소를 삭제 또는 교체하거나 새요소를 추가하여 배열의 내용을 변경한다.

arr.splice(지시할 index num, 제거할 갯수, 추가할 단어);

const Dream = ['d','r','e','a','m']
dream.splice(1 , 0 , 'how');
console.log(Dream)
//['d','how','e','a','m']

splice 참고

➕

✅ DEEEEPER!

18. 데이터 타입

Java script의 6 가지 데이터 타입이 있다.

• undefined : 정의되지 않음을 뜻한다.
• null
• boolean (true/false)
• 숫자: 따옴표 없이 숫자만을 쓰는 경우를 말한다.
• 문자열: 홑따옴표나 쌍따옴표로 감싼 모든 표현을 뜻한다.
• 객체 (object): 함수를 제외한 객체 또는 object그 자체를 말한다.

• function: 함수

typeof('variable name') 연산자를 이용하면 변수명에 해당하는 타입을 추출할 수 있다.

array(배열)은 확장된객체이므로 object로 나온다
null은 빈 객체를 참조하고 있으므로 object로 반환된다.
undefined는 변수를 선언하고 값을 할당하지 않거나 함수에 리턴을 걸어주지 않으면 선언된다.
Object(객체)는 키와 값의 조합으로 이루어진 데이터 이며 중괄호로 감싸진 key-value쌍의 형태를 갖습니다.

다른 데이터 타입이 boolean으로 변환되는 경우가 여러 개 있습니다.

• true로 변환되는 값
  문자열: 비어 있지 않은 모든 문자열
  숫자: 0이 아닌 모든 숫자
  객체: 모든 객체 ({}, [] 모두 포함)

• false로 변환되는 값
  문자열: "" (빈문자열)
  숫자: 0, NaN
  객체: null
  undefined

➕

✅ DEEEEPER!

19. String

String이라는 자료형은 홑따옴표 혹은 쌍따옴표로 감싸진 것을 말하며 대소문자가 구분된다.

• length: 길이를 도출해낼 수 있음
• toUpperCase: 구성된 string 하나하나를 대문자로 만들어줌.
• toLowerCase: 구성된 string 하나하나를 소문자로 만들어줌.
• slice(잘릴 시작위치, 잘릴 끝위치) : 구성된 string 하나하나가 가진 인덱스를 통해 일정부분 잘라낼 수 있다.
• indexOf: 문자열에 특정 문자열이 들어 있는지 확인하고 몇번째 순서에 있는지 알려주며 없다면 -1 반환
  -> 만약 조건문에 이용하려면 아래와 같이 사용하면 된다

• sliceCityFromAddress 함수는 address 인자를 받습니다.
• address 인자에는 주소를 나타내는 string이 주어집니다.
• 주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
  주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
  "도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
  예를 들어, 다음과 같은 주소가 주어졌다면

function sliceCityFromAddress(address) {
  // your code here

  let index1 = address.indexOf("시");
  let index2 = address.indexOf("도");
  let newaddress = address.slice(0,index2+1)+address.slice(index1+1,address.length+1);
  if (index2 !== -1 && index1 !== -1){
     newaddress = address.slice(0,index2+1)+address.slice(index1+1,address.length+1);
  }
  else if(index2 === -1 && index1 !== -1){
     newaddress = address.slice(index1+2, address.length+1);
  }

  return newaddress
}

sliceCityFromAddress("서울특별시 강남구 테헤란로 427 위워크타워")

➕

✅ DEEEEPER!

20. String<-> Number 변환

20.1 Nan

• let a = '900';
• let b = '350';
• NaN:은 Not a number 라는 뜻이며 더하기나 빼기가 써있어서 컴퓨터가 숫자인줄 알고 계산하려고 했더니
  도대체 계산이 불가능하고 이상한 답이 나왔다는 뜻입니다.
  Ex1) "Hello" - "hi"= ????
  Ex2) "2000" - 10 = ?
  Ex3) "2000" - "10" = ?

20.2 Number()

Number함수를 사용해서

• string에서 Number형으로 전환할 수 있다.

var birthYearInput = "2000";
console.log(typeof birthYearInput);
//'string'
let numberBirthYear = Number(birthYearInput);
console.log(typeof numberBirthYear);
//'number'

• Number형에서 String형으로 변환.

parseInt('1.901');
//1
parseFloat('1.901');
//1.901
Number("1.901");
//1.901
parseInt("200") + 1;
//201
"200" + 1;
//2001

그림과 같이 Number 형태를 string으로 변환시킬 수 있다.

nationalPensionRemainingYearCount 함수를 구현해주세요.
nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.
age_string은 나이 값인데 string형 값으로 되어 있습니다.
주어진 나이부터 몇년이 지나야 국민연금을 받을수 있는지 리턴해주세요.
리턴 값으로는 다음 문장 처럼 리턴해야 합니다.
"앞으로 20년 남으셨습니다"
예를 들어, age_string 값이 다음과 같다면:
"35"
리턴 값은 다음과 같아야 합니다.
"앞으로 30년 남으셨습니다"

function nationalPensionRemainingYearCount(age_string) {
  age_string = Number(age_string);
  text = `앞으로 ${65-age_string}년 남으셨습니다`
  return text
}

nationalPensionRemainingYearCount("35");

➕

✅ DEEEEPER!

21. 날짜와 시간(Date)

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다.
생일이 지나야 비로소 한 살을 더 먹게됩니다.
그에 비해 우리나라는 새해가 되면 모든 국민이 1살을 더 먹는 방식 입니다.
태어나면 1살 부터 시작하고 새해때 2살이 됩니다.
그래서 10월 이나 11월에 태어나는 아기들은 한두달 안에 2살이 되버리기도 하죠.
1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다.
미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.
getWesternAge 함수를 구현해주세요.
getWesternAge 함수는 birthday 라는 인자(input)를 받습니다.
birthday는 Date 객체이며 생일을 나타냅니다.
현재 기준으로 해당 생일이 만으로 몇 살인지 계산 후 리턴해주세요.
예를 들어, 오늘이 2020년 7월 21일이고, birthday 값이 다음과 같다면:
1990-03-21T00:45:06.562Z
리턴 값은 30 이 되어야 합니다.

function getWesternAge(birthday) {
  let bd = new Date(birthday)
  let today = new Date()
  let age = today.getFullYear() - bd.getFullYear()
  let ageM = today.getMonth() - bd.getMonth()
  
  if(ageM < 0 || (ageM === 0 && today.getDate() < bd.getDate())){
    age = age -1
  }
  
  return age
}



getWesternAge(birthday)

➕

✅ DEEEEPER!

22. Number

Math객체에서는 다양한 수학계산 메서드를 제공해준다.

• round(반올림)
• random(랜덤숫자반환)
• floor(내림)
• ceil(올림)

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

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

➕

✅ DEEEEPER!

23. Object(객체)

객체란 콜론으로 구분된 이름과값으로 구성된 프로퍼티들의 집합이다
프로퍼티 값으로의 접근을 위해서는 객체이름.프로퍼티이름 or 객체이름["프로퍼티이름"]이다.

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 sumAmount = 0
  let sumReview = 0
  let sumLike = 0

  for(i = 0; i <= salesArr.length-1; i++){
     let Amount = salesArr[i][1];
     sumAmount += Amount;
       }
  for(i = 0; i <= reviewArr.length-1; i++){
     let Review = reviewArr[i][1];
     sumReview += Review;
       }
  for(i = 0; i <= likeArr.length-1; i++){
     let Like = likeArr[i][1]
     sumLike += Like
       }
       
  let objData = {sumAmount, sumReview, sumLike};
  
  return objData;
}

➕

✅ DEEEEPER!

24. Scope

scope: 변수가 어디까지 쓰일 수 있는지의 범위를 의미한다. 변수가 선언되고 사용할 수 있는 공간.
블럭(block): 변수를 선언한 영역, 중괄호(curly brace)로 감싸진 것.
따라서 전역변수(Global)는 block 밖인 global scope에서 만든 변수를 말하며 scope은 스크립트 전체이다.
지역변수는 function내에서만 사용가능하다고 block을 지정했기에 함수 내가 전체 scope이다.
globalscope = globalnamespace

좋은 scopping 습관을 위해서는 최대한 변수들을 block scope으로 나눠 놓는 것이 좋다.

즉, 한마디로 요약하면 global 변수는 쓰지 않도록 노력해야 하고,
최대한 {}내에서 let, const을 사용하여 변수를 새로 만들어서 쓰자는 말입니다. 

• switch 문을 정의해보자

switch (type) {
    case 'scope':
      description = '변수가 쓰일 수 있는 범위';
      break;
      case 'scope pollution':
      description = 'global 변수의 값을 local 변수에서 동일한 변수명을 통해 변경시킨 것.';
      break;      
    default :
      description = ''
      break;
  }

➕

✅ DEEEEPER!

25. Class

• 프로그램을 객체들로 구성하고 객체(뜻 그대로인 사물을 뜻한다)들간에 상호작용하도록 작성하는 방법을 객체지향프로그래밍이라 한다.

• 여기서 객체는 datatype 중 하나인 object를 말하는 것이아니다({num:1}) 가 아니다.

• 클래스는 유사한 객체를 늘려야 할 때 중복되는 프로퍼티를 선언하여 유사한 객체의 중복을 막는것이다.

• class로 객체를 생성하는 것을 인스턴스화라고 부르며 아래와 같다
  const morning = new Car('Morning', 2000000);

• 이때 인스턴스에 들어가는 인자는 constructor()메서드 (생성자 함수)를 호출한다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

그렇다면 Car클래스를 통해 생성된 객체는 morning이며 이는 Car class의 프로퍼티와 메써드를 가지는 '인스턴스'라고 정의된다.

그리고 morning은 Car class 의 constructor method에 두가지 argument(인자)(Morning, 200000)을 전달하고 이 인자는 name, price 파라미터(매개변수)에 할당된다.

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

• this는 객체(A) 내부에서 해당객체(A)의 프로퍼티에 접근하기 위해 사용되는 키워드이다.
• 클래스에서 메서드는 객체의 문법과 거의 유사하나 프로퍼티마다의 구분을 위해 ,를 찍지 않아도 된다.

class 생성을 연습해보겠습니다.
MyMath라는 class를 생성해주세요.
constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
총 4개의 메서드를 구현해주세요.
getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
add: 두 개의 숫자를 더하는 메서드
substract: 두 개의 숫자를 빼는 메서드
multiply: 두 개의 숫자를 곱하는 메서드

class Calculator {
  constructor(a,b){
    this.a = a;
    this.b = b;
  }
  getNumber(a,b){
    return a , b;
  }
  addNumber(a,b){
    return a + b;
  }
  substract(a,b){
    return a - b;
  }
  multiply(a,b){
    return a * b;
  }
}

const num1 = new Calculator(100,20)

console.log(num1)

const add = num1.addNumber(100,20);
const substract = num1.substract(100,20);
const multiply = num1.multiply(100,20);
console.log(add)
console.log(substract)
console.log(multiply)

➕

✅ DEEEEPER!

26. Object - Re:)

26.1 Object simple review

• {}로 생긴모양의 객체를 object literal이라 한다.
• 배열(array)은 순서(index)가 존재, 객체(object)는 key&value가 존재
• 그래서 객체는 순서가 없으며 key로 호출하면됨(순서가 필요없음)
• 프로퍼티 접근방법 두가지는 하나는 . 하나는 key 값을 통해서
• 객체 내 새로운 프로퍼티 할당은 새로운 object['new key name']= value로 선언하면 알아서 들어감
• const 로 선언된 객체는 객체 자체는 수정이 안되나 내부에 선언된 프로퍼티는 수정이가능하다 (reference를 참조하고 그 안에서 다시 변수를 선언(프로퍼티를)하기 때문이다.)

26.2 Method, Nested Obj

✅ Method:객체 내부에 저장된 값이 함수 일때 이를 메서드라고 부른다.
let methodObj = {
do: function(){
console.log('whatever')
}
}

✅ Nested Obj: 프로퍼티의 값 또는 프로퍼티 값이 배열일때 그 내부에 배열의 요소가 객체 등
동일하거나 다른 자료형안에 객체가 배치된 경우

let nestedObj = {
  type : {
    year: '2019',
    'comment-type' : [
      {
      name:'simple'
    }
      
    ]
  }
}


console.log(nestedObj.type['comment-type'][0].name)

↪️ nestedObj 라는 객체 내부에 type이라는 객체로 접근하여 comment-type 키값이 가진 list에 접근하여 그 첫번째 value인 name:'simple'에 접근해 그 value값을 따온것임.

✅ reference : 객체가 참조하고 있는 메모리 내의 주소
추가 정보 참고

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

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

function getAnswer() {
 
  return myProfile["my favorite"].food[0].name
}

➕

✅ DEEEEPER!

27. ArrowFunction[Es6]

ArrowFunction 이란 ECMA Script의 버전이 5에서 6으로 업데이트 되며 생겨난 것이며
사용하는 개발자가 많으니 알아놓자.

//ES5
function getName() {}

//ES6
const getName = () => {}

• 아래 있는 함수를 Arrowfunction을 이용하여 표현하여 보자.
• Arrowfunction은 기존 함수스타일로 변경해보자
  // Assignment 1-1
  function getN(userInfo, label) {
  return userInfo[label];
  }
  // Assignment 1-2
  let sayHi = function() {
  alert('Hello');
  };
  // Assignment 2-1
  const getName = info => info['name'];
  // Assignment 2-2
  const getEmail = username => ${username}@gmail.com;

//1.1:
const getN = (userInfo, label) => {userInfo[label]}
//1.2: 
let sayHi = () => {alert('Hello')}

//2.1: 

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

//2.2:

function getEmail(username){
   
   return `${username}@gmail.com`;
   
 }

➕

✅ DEEEEPER!

28. [es6] template literals, string method

template literals이란 기존(~ES5)에 따옴표로 감싸던 string 을 ES6으로 들어서며 backtick을 이용하여 감싸 그 안에 변수를 넣어 표현하는 것이다.

const name = '김개발';

const hi = '안녕하세요. 저는 ' + name + ' 입니다.';

const hi = `안녕하세요. 저는 ${name} 입니다.`;

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

• document.cookie 는 모든 쿠키 정보가 세미콜론; 으로 구분되어 하나의 string으로 되어있네요.
• localStorage나 sessionStorage는 바로 key 이름으로 접근할 수 있어서, value를 갖고 오기가 쉬운데, cookie는 string 을 분해해서 value를 가져와야합니다.
• 그 동안 배운 메서드를 활용해서 cookie 중에 'wecode_cookie' 라는 키의 값을 찾아주세요.

const getCookie = () => {
  let name = "wecode_cookie"
  let cookies = document.cookie.split(";");
  
  for(let i in cookies){
    
    if(cookies[i].search(name) != -1){
      let num1 = cookies[i].indexOf('=') // 숫자나오겠지
      let num2 =cookies[i].length
      return cookies[i].slice(num1+1, num2);
    }
    
  }

}

➕

✅ DEEEEPER!

29. Array methods

• 앞서 배운 Arrow function을 가장 많이 사용할 때는 callback함수를 사용할 때 인데 callback함수란 인자(argument)로 전달되는 함수 이다.

function functionOne(x) { alert(x); }
function functionTwo(var1, callback) {
    callback(var1);		
}
functionTwo(2, functionOne);

• The common name for the function passed in is a callback function.
  So, FunctionOne is called as Callback function

reference

map과 forEach는 callback function을 응용하기에 좋은 메서드 중 하나로 보면 된다.

Array.map()
Array.forEach()

29.1 map()

callback함수에서 Return 된 값으로 하나하나 요소들을 수정해주고 수정된 값으로 만들어진 배열을 다시 Return 해준다.

1. Es 6 style

   const arr = [1, 2, 3];
   const squares = arr.map(x => x * x);
   

2. Es 5 style

   const squares = arr.map(function (x) { 
   return x * x;
   });

   29.2 forEach()

   forEach는 for 대신 사용하는 반복문이며 map과의 차이는 함수자체가 return하는 값이 존재하지 않는 다는 것이다.(undefined로 출력되겠지!)
   
   

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

2. 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 moreThan100 = nums => {
  
  return nums.map(e => e >=100)
  }



const formatDate = dates => {
  
  return dates.map(e =>`${e.slice(0,4)}년 ${e.slice(5,7)}월 ${e.slice(8)}일`)
}

➕

• 이리 불편해보이는데 이걸 왜쓸까

✅ DEEEEPER!

30. Object- ReRe

객체(Obj)는 배열(array)와 다르게 Length를 통해 길이를 따오거나 각 자 동일한 숫자 key를 가지는 것이 아니기 때문에 한번에 순회시키기가 어렵다
그래서 객체의 순회는 순서가 보장되지 않은 순회라고 부른다
배열을 순회할 때는 For문을 이용하여 Index값의 증감을 통해 순회시킬수 있다.
그렇다면 객체는 어떤방식으로 순회시킬 수 있을까 ?

30.1 Object.keys()

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

그렇다면 object key값은 배열로 나오기 때문에 각자 index값이 존재하므로 For문으로 순회 시킬 수 있다.

30.2 Object.values(), Object.values()

value는 값을 반환하는 배열(array)로 만들어주고 각 각 인덱스를 가진다
entries는 각 키와 값을 합한 하나의 배열이 하나의 값인 배열을 반환해주며 각 각 인덱스를 가진다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

30.3 for-in

• for in 문은 기존 For문의 방식을 간단하게 축약한 방식이며 es6부터 나왔다.
• 이 for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동으로 결정하게 됩니다.

const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
} 

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

이 for in 문은 배열만이 아닌 객체에서도 작동하는데 for in문을 사용하면 인덱스에 해당하는 변수가 숫자가 아닌! 객체의 각각 키에 해당하는 '문자열'을 할당받게 된다.

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

2. requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면,
   해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.
   위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면,
   다음과 같은 객체과 리턴됩니다. (요소간 순서는 다를수 있지만, 채점에 무관합니다.)
   {
   '생활속의회계': 2,
   '논리적글쓰기': 3,
   '독일문화의이해': 3.5,
   '기초수학': 1.5,
   '영어회화': 2.5,
   '인지발달심리학': 4.5,
   '공학수학': 0,
   '컴퓨터과학개론': 0,
   }

const change = e => {
    switch(e){
      case 'A+':
        return 4.5
        break;
      case 'A':
        return 4
        break;        
      case 'B+':
        return 3.5
        break;        
      case 'B':
        return 3
        break;        
      case 'C+':
        return 2.5
        break;        
      case 'C':
        return 2 
        break;
      case 'D+':
        return 1.5 
        break;
      case 'D':
        return 1 
        break;
      case 'F':
        return 0 
        break;   
      default: 
        return 0
    
  }
}

const changescore = (scores) => {
  const key = Object.keys(scores)
  for(let i = 0; i < key.length; i ++){
    scores[key[i]] = change(scores[key[i]])
  }
  return scores
}


const getExamResult = (scores, requiredClasses) => { 
  const key = Object.keys(scores)
  for (let i in requiredClasses){
    if(key.includes(requiredClasses[i]) === false){
      scores[requiredClasses[i]] = 0
    }
  }
  scores = changescore(scores); 
  return scores;
}

➕

✅ DEEEEPER!