TIL :: JavaScript / replit. 11~20

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

⚠️ 주의 사항

함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안 됩니다.

---

Assignment

index.js를 보고 아래 조건에 맞는 함수를 작성해주세요.

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

// Assignment
// 아래에 코드를 작성해주세요.
function isbiggerThanHundred(num) {
  if(num > 100){
    return "크다!";
  }else if(num<=100){
    return "작다!";
  }
}
let myNumber = isbiggerThanHundred(10);
console.log(myNumber)

---

⁍12. Function(함수) - parameter, argument

◉ 매개 변수(parameter) 

: 함수를 정의 하면서, 함수 선언식의 괄호()안에 어떤 변수명 을 쓰면, 우리는 그걸 매개변수 라고 부릅니다. 매개 변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다. 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의됩니다.

 

◉ 인자(argument) 

: 어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부릅니다. 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.

---

Assignment

✔️ Assignment 1 : 함수 halfNumber 를 선언하고 구현하세요.

1. 숫자로 된 인자 하나를 받습니다.
2. 받은 값을 2로 나눈 결과를 리턴합니다.
3. 매개변수 이름은 마음대로 정해서 사용합니다.

✔️ Assignment 2 : 함수 halfAndAddNumber를 선언하고 구현하세요.

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

// Assignment  아래에서 코드를 작성해주세요
function halfNumber(value) {
  return value / 2;
}
halfNumber(6);

function halfAndAddNumber(value) {
  let result = halfNumber(value)
  return result + 1;
}
console.log(halfAndAddNumber(10));

---

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

: 함수에 인수가 한 개가 아닌 여러 개 전달할 수도 있습니다.

function alertSuccess(month, name) {
  alert(month + "월의 당첨자는 " + name + "입니다.");
}

alertSuccess(3, "김개발");

---

Assignment

index.js에서 meetAt 함수를 만들어주세요.

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

meetAt(2022); // 결과 --> "2022년"
meetAt(2032, 3); // 결과 --> "2032년 3월"
meetAt(1987, 10, 28); // 결과 --> "1987/10/28"

// Assignment. 아래에 코드를 작성해주세요.

function meetAt(year, month, date) {
  if(date) { return year + '/' + month + '/' + date;}
  if(month) { return year + '년 ' + month + '월';}
  if(year) { return year + '년';}
}
console.log(meetAt(2020))
console.log(meetAt(2020,5))
console.log(meetAt(2020,5,16))

---

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

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

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

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

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

이렇게 함수 안에서 또 함수를 호출할 수도 있습니다. calculateTotal 함수 내부에서 getTax를 또 호출했습니다. 함수가 실행되는 시점은 함수를 호출하는 순간이겠죠? 위 코드에서 function으로 함수를 선언하는 부분은 "이런 함수가 있다"고 선언해준 것 뿐입니다. 함수가 실행되는 시점은 바로 calculateTotal(3500)으로 호출 했을 때 입니다.

---

Assignment

index.js에서 getTotal 함수를 만들어주세요.

getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.

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

참고사항

• getTax 함수는 가격의 tax를 구하는 함수입니다.
• calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
• getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.

//assignment
function getTotal(price1, price2) {
  return calculateTotal(price1) + calculateTotal(price2);
}
function calculateTotal(price) {
  return price + price * 0.1;
}
  
console.log(calculateTotal(500));

---

⁍15. Array (배열)

◉ 배열의 정의 및 특징

: 배열을 사용하면 몇 천 개의 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 갖고 있을 수 있습니다. 배열은 대괄호([])로 감싸져 있습니다.

let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
let KOSPI = [2062.82, 2053.2, 2045.92, 2058.82, 2053.12, 2055.7];

요소와 요소 사이에는 쉼표로 구분합니다. 요소 자리에는 이제까지 배운 String, Number, Array 모두 가능합니다.

let anything = ["대전", 1987, ["하나", "둘", 3]];

 

◉ 배열의 Index 

: 배열의 요소는 순서(index)를 갖고 있습니다. 주의해야 할 특징이 있다면 이 index는 1이 아니라 0부터 시작합니다.

var anything = ["대전", 1987, ["하나", "둘", 3]];

String형인 "대전"은 index가 0, Number형인 1987은 index가 1, Array형인 ["하나", "둘", 3]은 index가 2입니다.

 

 

◉ 배열 데이터의 접근

index를 사용하면 해당 배열의 요소를 가져올 수도 있습니다.

var anything = ["대전", 1987, ["하나", "둘", 3]];

console.log(anything[0]);
console.log(anything[1]);
console.log(anything[2]);

alert(anything[0] + "에 오신 것을 환영합니다.");

---

Assignment

1. 아래 조건을 읽고 이행해주세요.

• getElement 함수안에 arr 변수를 선언했습니다.
• arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
• 배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.

2. addFirstAndLast 함수를 작성해주세요.

• addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
• addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
• 만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
• Hint) array의 길이를 구하는 방법은 다음을 참조하세요 : https://community.wecode.co.kr/t/js-array/200/2

wecode - wecode

// Assignment1 - 다음 함수 안에 코드를 구현하세요

function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0];
}
console.log(getElement())


// Assignment2 - 다음 함수 안에 코드를 구현하세요
// ex) myArray = [3, 2, 5];
function addFirstAndLast(myArray) {
  if(myArray.length>1){
    return myArray[0]+myArray[myArray.length-1]
  } if(myArray.length==1){
    return myArray[0];
  } else{
    return 0;
  }
}
console.log(addFirstAndLast ([3, 2, 5]))

---

⁍16. for 문(반복문)

우리가 프로그래밍을 배우는 가장 큰 이유는 단순 반복을 줄이기 위해서가 아닐까요? 이렇게 비효율적인 코드를 for 반복 문을 사용하면 짧게 줄일 수 있습니다.

 

for 문을 사용하면 코드를 원하는 만큼 반복시킬 수 있습니다.

실행 조건에 따라 언제부터 언제까지 반복하게 될 것이라고 알려주기만 하면 됩니다.

const home = "대전";
const cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];

for (let i = 0; i <= 5; i++) {
   if (cities[i] === home) {     
 	    console.log("아, "+ cities[i] +" 사시는군요");
   }
}

• i 가 0일 때, cities[0] 과 home 을 비교합니다.
• "서울" === "대전"
• false 이므로 if 문 {} 내부로 들어가지 않고 i 가 0일때의 for 문은 끝납니다.
• 그 다음, i 가 1이 증가하여 i 가 1이 되면, cities[1] 과 home 을 비교합니다.
• "대전" === "대전"
• true 이므로 if 문이 실행됩니다.
• 이렇게 i 가 5가 될 때까지 if 조건을 확인하며 for 문이 실행되고 종료 조건을 만족하면 반복이 마무리됩니다.
• 만약 배열이 아래와 같았다면 console.log 가 세번 떴을 것입니다.

const cities = ["서울", "대전", "대구", "대전", "광주", "대전"];

for 문에서 i 가 1, 3, 5일 때 if 문이 실행되는 것이죠.

 

◉ 반복문과 배열의 길이

배열의 길이를 알면 그만큼 for 문을 반복하면 되겠죠. 배열은 length 라는 속성을 가지고 있습니다.

let cities = ["서울", "대전", "대구", "대전", "광주", "대전"];
console.log(cities.length) // cities 배열의 요소는 총 6개 이므로 6 이라는 숫자가 반환됩니다.

for (var i = 0; i < cities.length; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}

• for (var i = 0; i*<*cities.length; i++)*
• 가운데 비교연산자를 주의하세요. <= 가 아닌 < 를 사용하고 있습니다.
• 배열의 길이는 6 이므로 총 6번의 반복문이 실행되어야 합니다.
• i 는 0부터 5까지 총 6번이 실행되어야 하므로 배열의 길이보다 작을때까지 반복문을 실행합니다.
• 만약 <= 작거나 같다는 비교연산자를 사용하면
• i 는 0,1,2,3,4,5,6 까지 실행되어 총 7번의 반복문을 실행합니다.

---

Assignment

findSmallestElement 함수를 구현해 주세요.

• findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
• arr 의 값들 중 가장 작은 값을 리턴 해주세요.
• 만일 arr 가 비어있으면 0을 리턴 해주세요.
• 예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.

[20, 200, 23, 1, 3, 9]

// Assignment - 다음 함수 안에 코드를 구현하세요
function findSmallestElement(arr) {
  // your code here
  if (arr.length === 0) {
    return 0; // 배열이 비어있으면 0을 리턴  
  } else {
    let smallest = arr[0]; //배열의 첫번째 값을 작은 값으로 임의 지정
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] < smallest) {
        smallest = arr[i]; //for 루프를 돌면서 smallest보다 작은 값이 존재하면 해당 값을 smallest로 지정
      }
    }
    return smallest; // 루프 종료 후 가장 작은 값 리턴
  }
}

---

⁍17. 배열 조작하기

◉ 요소추가 

let cities = []; //요소없는 배열을 선언했습니다.

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

//cities 라는 변수에 빈 배열을 할당해주었습니다. 그리고 아래와 같이 요소를 하나씩 추가할 수 있습니다.

◉ push / unshift 메소드 

push() , unshift() 메소드는 배열에 요소를 추가해주는 함수입니다.

• push 는 배열의 마지막 부분, 즉 꼬리에 요소들을 추가
• unshift는 배열의 맨 앞부분, 즉 머리 부분에 요소를 추가

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

console.log(cities);

❖ 정리하자면, 배열 조작 방법에는 2가지가 있습니다.

1. index로 접근하여 수정이나 추가
2. push, unshift 메소드로 추가

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)

 

◉ pop 메소드 

pop 메소드를 사용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환합니다.

---

Assignment

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

• divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다.
• divideArrayInHalf 함수는 인자로 들어온 array 로 부터 새롭게 구성된 배열 result 을 리턴합니다.
• array 요소들 중 10과 같거나 작은 값의 요소들은 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]

// Assignment - 다음 함수 안에 코드를 구현하세요
function divideArrayInHalf(array) {
    let result = [];
    for(let i = array.length; i>=0; i--){
      if(array[i] <= 10){
        result.unshift(array[i]);
      }else if(array[i] > 10){
        result.push(array[i]);
      }
    }
    return result;
}

---

⁍18. 데이터 타입

✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

• String (문자열)
• Number (숫자)
• Boolean (true/false)
• Undefined
• Null
• Symbol (ECMAScript 6 에 추가됨)

✔️ 별도로 Object(객체) 도 있음

 

◉ typeof 연산자 

• typeof 연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있습니다.
• typeof 연산자를 적용하면 다음 문자열 중 하나를 반환합니다.
  1. "undefined" : 정의되지 않은 변수
  2. "boolean"
  3. "string"
  4. "number"
  5. "object" : 함수를 제외한 객체 또는 "object"
  6. "function"

let msg = "message";

console.log(typeof msg); // "string"
console.log(typeof 100); // "number"

:: typeof null

• typeof null → "object"
• null 이라는 데이터 타입이 object 로 반환됩니다.
• null 은 빈 객체를 참조하고 있어서 그렇습니다.
• 이 내용은 뒤에서 추가로 학습하겠습니다!

:: Array 데이터 타입

console.log(typeof []);

• 배열의 type을 확인해보면 "object"입니다.
• 왜냐하면 사실 배열은 확장된 객체 이기 때문입니다...!
• 일단 typeof 연산자로 배열을 확인하면 "object" 가 출력된다는 것만 기억하시고 넘어가주세요.

◉ Number (숫자)

• Number 라는 데이터 타입은 숫자를 의미합니다.
• Number 타입에서 중요한 것은 연산입니다.
• 산술 연산자를 사용하여 Number 타입에 대한 연산은 아래와 같이 작성합니다.

1 + 1 // 더하기
2 - 1 // 빼기
2 * 4 // 곱하기
6 / 2 // 나누기

• 더하기(+)는 왼쪽 값과 오른쪽 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자라고 부릅니다.
• 이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자라고 부릅니다.

◉ String (문자열) 

• 문자열 데이터 타입은 따옴표(" ") 혹은 작은따옴표(' ')로 감싼 모든 표현을 뜻합니다.
• 주의) 큰따옴표로 시작하면 큰따옴표로 끝나고, 작은따옴표로 시작하면 작은따오표로 끝나야 합니다.
• 산술 연산자를 통해 숫자 데이터 타입을 활용하는 것처럼 문자열 타입에도 다양한 기능이 있습니다.

// 문자열 데이터 타입 변수 선언
let name = "wecode";

// .length >> 문자열이 몇 글자로 되어 있는지 확인
name.length // 5

// .toUpperCase >> 문자열을 대문자로 출력
name.toUpperCase() // "WECODE"

// .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('c') // 2
name.indexOf('j') // -1

☑️ 문자열 + 문자열

• 텍스트를 서로 조합할 수도 있습니다.
• 텍스트를 조합할 때는 + 연산자를 사용합니다.
• 텍스트와 변수를 조합해서 사용할 수도 있습니다.
• 아래는 모두 같은 결과가 나옵니다.

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

☑️ 문자열 + 숫자 조합

alert("2 더하기 2는 " + 2 + 2);

• 위와 같이 서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 합니다.
• String과 Number형을 더하면 항상 String 형으로 변환됩니다.
• 원래 다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없습니다.
• 하지만 JavaScript 에서는 오류를 내지 않고 더하게 되죠.
• 이런 것을 유연 하다고 좋아하는 개발자도 있지만, 에러를 낼 여지가 있기 때문에 JavaScript 의 단점으로 꼽는 개발자도 있습니다.

문자열이냐 숫자냐에 따라 결과가 많이 달라지므로 데이터 타입을 정확하게 표현하는 것에 관심을 가질 필요가 있습니다.

 

◉ boolean 

• boolean 은 단 두 개의 데이터로 이루어진 데이터 타입입니다. → true / false
• boolean 데이터 타입은 조건문과 반복문에서 유용하게 사용됩니다.
• 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있습니다.

 

:: 여러 데이터 타입의 boolean 값 변환

 

✔️ true 로 변환되는 값

• 문자열 : 비어 있지 않은 모든 문자열
• 숫자 : 0 이 아닌 모든 숫자
• 객체: 모든 객체 ({ }, [ ] 포함)

✔️ false 로 변환되는 값

• 문자열 : " " (빈문자열)
• 숫자 : 0, NaN
• 객체 : null
• undefined

 

:: 조건문에서의 boolean 데이터 값 활용

• 다른 데이터 타입이 boolean 값으로 변환 되는 것은 아래와 같이 조건문에서 활용될 수 있습니다.
• (조건문은 추후 자세히 다룰 예정입니다.)
• if 조건문은 특정 조건의 true/false 값을 판단하여 if문을 실행합니다.

let sam = 3;

if (sam === 3) {  //sam === 3 이 true이면
  // 실행
}

◉ undefined 

• undefined 데이터 타입은 말 그대로 정의되지 않은 데이터 타입입니다.
• let, const 키워드를 사용해서 변수를 정의할 때 초기화 하지 않았다면, 즉 변수를 선언만 하고 값을 할당하지 않았다면 변수에는 undefined 가 할당됩니다.

let msg;
console.log(msg === undefined); //true (msg는 선언만 하고, 초기화 하지 않았습니다.)

 

◉ null 

• null 타입은 데이터 타입 중 하나 입니다.
• 하지만 콘솔에 typeof null 로 확인해보면 "object" 라고 나옵니다.
• null 은 말그대로 아무것도 아닌 빈 객체를 가리키고 있어서 "object" 라고 나옵니다.

◉ 객체(Object) 

• 마지막은 객체(Object) 데이터 타입입니다.
• 객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터입니다.
• 중괄호로 감싸진 key-value(property)의 형태를 갖습니다.

const person = {
	name : "wecode",
	age : 30,
	skills : ['HTML', 'CSS', 'Javascript'] 
}

---

⁍19. String

let good = '이것도 맞고';
let better = "이것도 맞습니다";
//'',"" 둘다 String형 이다.

◉ 대소문자 바꾸기

• toUpperCase 메소드
• toLowerCase 메소드

let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();

console.log(lastName); // Yeri Kim
console.log(upperLastName); // YERI KIM
console.log(lowerLastName); // yeri kim

 

◉ 문자 길이 

• length 속성

if (phoneNumber.length !== 10 &&  phoneNumber.length !== 11) {
  alert("폰 번호 제대로 입력하셨나요?");
}
//다음 예제는 핸드폰 번호(phoneNumber)가 10자리도 아니고, 11자리도 아니면 alert 를 보여줍니다.

let name = prompt("성함을 입력해주세요");

if (name.length === 2) {
  alert("외자이시군요! 이름이 이쁘네요.");
} else if (name.length === 1) {
  alert("제대로 입력하셨나요?");
} else if (name.length === 3) {
  alert("멋진 이름입니다.");
}

❖ 참고.

0으로 시작하는 숫자 표현식은 없습니다. (아이스크림 023개 주세요! 라고 하지는 않죠.)

let phoneNumber = "01012349876";

console.log(phoneNumber);
console.log(phoneNumber.length);

phoneNumber 는 원래 Number형이며, 앞의 0이 없이 뒷 숫자만 할당됩니다.

또한, Number형에는 length 라는 속성이 존재하지 않습니다.

그렇기 때문에, 핸드폰 번호를 온전히 표시하고 length 속성을 이용하려면 위와 같이 String형으로 저장해야합니다.

 

◉ 문자열 찾기 

• indexOf 메소드

: 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려 줍니다.

해당 문자열이 없다면 -1을 반환합니다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 

console.log(info, firstChar);

if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}

console.log(info);

위는 "프로래밍" 이라는 오타를 "프로그래밍" 이라고 바꾸어 주는 코드입니다.

코드를 한 줄 한 줄 설명하자면

 

1. info 문구에서 "프로래밍"이 시작되는 index 는 12입니다.

 

2. if (firstChar !== -1)

• firstChar 이 -1이 아니면
• 즉, "프로래밍"이라는 문구가 없지 않다면
• 즉, "프로래밍"이라는 문구가 있다면
• "프로래밍" 문구는 12번째에서 시작하므로 firstChar 는 12 입니다. 따라서 조건문은 true.
• "프로래밍"이라는 오타가 포함되어있으면 if 문을 실행합니다.

 

3. info.slice(0, firstChar)

• slice 메소드는 이름 그대로, 텍스트를 잘라주는 함수입니다.
• 그 구조는 다음과 같습니다.

slice(잘릴 시작위치, 잘릴 끝위치)

• 잘릴 시작위치는 0입니다. 잘릴 끝위치는 firstChar 로 12 입니다.
• 그래서 slice 메소드는 info 문구의 0부터 11번째 까지 잘라서 반환합니다.
• 잘릴 끝위치가 조금 헷갈리는데, 잘릴 끝위치의 문구는 포함하지 않습니다.
• 따라서, 12번째의 문자는 포함하지 않습니다. 바로 그 직전에서 끊어줍니다.
• 지금 slice 메소드가 조금 어렵겠지만 일단 slice 라는 메소드 있다는 것만 기억하고 넘어가도 좋습니다.

console.log(info.slice(0, firstChar));

 

4. info.slice(firstChar+4, info.length);

• 잘릴 시작위치는 16 입니다. (firstChar + 4 = 12 + 4 = 16)
• 잘릴 끝 위치는 22 입니다. (info.length = 22)
• info 의 16번째 문자인 "언" 부터 22번째 문자 이전까지 자르게 됩니다.
• 22번째는 문자가 존재하지 않기 때문에, 그 직전에 끊으니 "."까지 포함하는 문자열로 잘리게 됩니다.

console.log(firstChar+4, info.length);

---

Assignment

sliceCityFromAddress 함수를 구현해 주세요.

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

"경기도 성남시 분당구 중앙공원로 53"

다음과 같은 값이 리턴되어야 합니다:

"경기도 분당구 중앙공원로 53"

// Assignment - 다음 함수 안에 코드를 구현하세요
function sliceCityFromAddress(address) {

let someSi = address.indexOf('시'); 
let someDo = address.indexOf('도'); 
if (someDo !== -1){
    let newAddress = address.slice(0,someDo+1)+address.slice(someSi+1)
    return newAddress;
  }
   else {
    let newAddress = address.slice(someSi+2)
    return newAddress;
  }
}

let exAddress = sliceCityFromAddress("경기도 성남시 분당구 중앙공원로 53");
console.log(exAddress);

---

⁍20. String <-> Number 변환

console.log(2019+"2000");
console.log(2019-"2000");

컴퓨터가 + 의 양쪽을 보고, 하나라도 String이 있으면 문자열로서 합쳐줍니다.

그런데 - 라면, String의 마이너스는 존재 하지 않으므로 양쪽의 값을 모두 숫자로 변환해서 계산해 줍니다.

물론 위의 코드가 잘 동작 되긴 하지만, 함께 코드를 보는 동료가 충분히 오해할 수 있는 코드입니다.

계산이 잘 되더라도 텍스트로 표현된 숫자는, 꼭 숫자로 바꿔서 계산을 해주셔야 합니다.

다음과 같이 Number 함수를 사용해서 String형에서 Number형으로 전환할 수 있습니다.

---

Assignment

nationalPensionRemainingYearCount 함수를 구현해주세요.

• 우리나라는 국민연금을 만 65세 부터 받을 수 있습니다.
• nationalPensionRemainingYearCount 는 age_string 이라는 input을 받습니다.
• age_string 은 나이 값인데 string형 값으로 되어 있습니다.
• 주어진 나이부터 몇년이 지나야 국민연금을 받을수 있는지 리턴 해주세요.
• 리턴 값은 다음과 같습니다.

"앞으로 20년 남으셨습니다"

• 예를 들어, age_string 값이 다음과 같다면:

"35"

리턴 값은 다음과 같아야 합니다.

"앞으로 30년 남으셨습니다"

// Assignment - 다음 함수 안에 코드를 구현하세요
function nationalPensionRemainingYearCount(age_string) {
  // Your code here
  let yourAge = parseInt/*Number or parseFloat*/(age_string);
  let year = 65 - yourAge;
  let result = "앞으로 " + year + "년 남으셨습니다";
  return result;
}
console.log(nationalPensionRemainingYearCount(35))

---