#TIL wecode Bootcamp Day 3(JavaScript)

Jung Hyun Kim·2020년 5월 26일

JavaScript TIL WeCode function

wecode

목록 보기

3/42

JavaScript part.2

함수 ,데이터 타입 중심으로 정리할 예정

1. Function(함수)

1.1 여러 인자(multiple arguments) 🆎🆑🅰🅱

여러 인자(multiple arguments)를 받는 함수, 즉 한개를 받을수도 세개를 받을 수도 있는 구조에 대해서 이해해 보자!
아래 예시를 통해 설명하면 더 이해가 될것
만들고자 하는 함수는, meetAt(year,month,date) 세 parameter를 기본적으로 받는 함수이지만 year이나 year,month의 인자(argument)만 받으면 다르게 출력하는 함수를 만들고자 한다.
예를 들어 year인자만 받을때, year.month인자를 받을 때, year,month,date인자를 받을때 다른 형식으로 return 하는 함수를 만들 것이다! 즉 아래와 같이 출력 되어야 한다는 뜻
```
meetAt(2022);
// 결과 --> "2022년"

meetAt(2032, 3);
// 결과 --> "2032년 3월"

meetAt(1987, 10, 28);
// 결과 --> "1987/10/28"
```

그렇다면 먼저 생각해야 할 logic의 순서! ☝

👉date 인자가 있다는것은 year,month,date가 다 기입되었다는 의미이니 먼저 date가 있을때를 조건으로 조건문을 만들자
👉그러고 나서 걸러진 나머지 중 month가 있다는 것은 year,month가 있다는 뜻이니 그걸로 조건문을 또만들자
👉나머지는 year만 출력되었다는 얘기이니 그렇게 조건문을 만들고 출력 하면 끝!

정답확인💁🏼‍♀️

function meetAt(year,month,date) {
  if(date){
    return `${year}/${month}/${date}`
  }
  
  else if (month) {
    return `${year}년 ${month}월`;
  }

   else  {
  return `${year}년`;
   }

}

1.2 for 문(반복문)

for문의 기본 설명

for 말그대로 ~ 하는동안에 이 함수를 계속 실행하다가 해당 지점에서는 멈춰줘!라는 기능이고 array에서 원하는 순서대로 배열을 한다거나, 모든 배열에 다른 값을 주고싶다거나 할때 쓰일수 있음

즉 위 그림처럼 된다면 0부터 5까지 1씩 증가시키면서 for 문의 {} 내부실행, i가 0, 1, 2, 3, 4, 5까지 총 6번의 반복문이 실행된다.
만약 array의 길이를 몰라 언제까지 반복해야 할지를 모른다면 아래와 같이 array.length까지 i++를 실행시켜라 하고 반복문 값을 줄수도 있다!

for (let i = 0; i<array.length; i++) {
  console.log(i)
}

.push()/.pop()/.unshift()사용해서 배열 정리하기

.push() 함수👈🏼

.push() 함수는 배열에 요소를 추가해주는 함수로서 ()안에 값이 배열의 제일 뒤로 들어간다!
간단히 생각하면 아침 지옥철🚋에서 사람들을 밀고(push) 타면 겨우 타서 내뒤로 문이 닫힌다. 즉 제일 뒤에 배치된다는 것! 이렇게 생각하면 push함수가 앞에 추가되나? 뒤에추가되나? 헷갈리지 않을 수 있다! 👈🏼

.pop() 함수👉🏼

.pop() 함수는 .push()함수와 반대로 있는 배열의 젤 뒤 값을 빼내는 함수이다.
간단히 생각하면`pop` 단어 어원처럼 튀어나오게 되는건데.. 지옥철을 타려다가 못타게 되면 뒤에서 내리는것! push와 반대로 이해하면 헷갈리지 않을 수 있다.

.unshift() 함수

.unshift() 함수는 배열의 맨 앞에 요소를 추가해 주는 함수
unshift를 헷갈리지 않게 하기위해 생각해낸 나만의 방법 (내맘대로이해 주의🙏🏼, 단지 본인이 이해하려고 억지로 끼워맞춤 주의💆🏼‍)
- shift라는 단어는밀다라는 의미가 있는데 unshift는 뭔가 밀어내는건 아니다 라고 이해, 그러니 막 밀어낸다기 보다도 이미 양해 구하고 앞에 섰다 라는 생각으로 unshift는 맨앞에 간다고 생각하니 헷갈리지 않는다. 노약자를 양보해서 줄의 맨 앞에 세워주는 느낌? 양해를 구했으니 shift당한건 아니고.. 나름.. 나름 unshift야 (나만 이렇게 이해함 주의🧏)

.push()/.pop()/.unshift() 가 잘 정리된 이미지

for문에서 .push()/.unshift()사용해서 배열 정리하기

divideArrayInHalf 함수 만들기

5개의 숫자 요소(element)로 구성된 result라는 이름의 array를 만들고, 10과 같거나 작은 값의 element는 앞으로 10보다 큰 값들은 제일 뒤로 구성하도록 배열을 구성해서 리턴해주는 함수를 만들어 보자!
step by step🎶🎵
1. 먼저 함수와 배열구조를 짠다

function divideArrayInHalf (array) {
  let result =[];
  return result;
}
divideArrayInHalf([1,30,35,15,10]); //우선 랜덤으로 5개 값 부여!

빈 result array안에10과 같거나 작은 값의 element는 앞으로 10보다 큰 값들은 제일 뒤로 구성하도록 배열 하려면 배열의 각각요소를 보고 체크하면서 배열해줘야 하는데 그럴때 사용하는것은 for문! 을 사용해서 인자로 받은 array를 재배치 해서 result array 안에 넣어 주자!

function divideArrayInHalf (array) {
  let result =[];
  for (let i =5; i>=0; i--) { //마지막 배열부터 순차적으로 앞을 검사한다. 큰 부분을 뒤로 놓아야 하기 때문에 앞에서 부터 하면 순서가 틀어진다! 
    if(array[i]>10) { //10보다 크면 값을 뒤에서 넣고 
      result.push(array[i]);
    }
    else if(array[i]<=10) {//10과 같거나 작으면 앞으로 넣고 
      result.unshift(array[i]);
      
  return result;// 그럼 완성! 쨘! 
}
divideArrayInHalf([1,30,35,15,10]);

1.3 데이터 타입

undefined :정의되지 않은 변수

변수를 선언만 하고 할당하지 않았을 경우!
아래 코드처럼 love를 지정하고는 love 값을 지정해주지 않을 경우
love는 undefined가 된다

let love;
console.log(love===undefined);

null💭

먼저 null값의 type 을 출력하면?

typeof(null) //object가 출력 된다!

즉 null값은 빈 객체 { } 라는 뜻

boolean⭕❌

true or false로 변환되는 값이며 각각에 아래에 해당할때 true와 false로 출력된다

**true로 변환되는 값**
  문자열: 비어 있지 않은 문자열 보두
  숫자: 0이 아닌 모든 숫자
  객체: 모든 객체

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

숫자(Number)0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣

""안에 들어가지 않은 그냥 숫자

문자열(String)"🆗"

화려한조명✨이 아니라(feat.깡)"" 이나 '' 안에 감싼 모든 표현

객체(Object)

키와 값 (key &value)로 이루어진 데이터
디테일 하므로 나중에 deep하게 다룰예정👍

1.4 String 더 알아보기!

문자열 찾기

문자열에 특정 단어가 포함되었는지 확인하는지 보고 오타를 수정해주는 방법
-아래에slice, length, indexOf가 다 들어갔으니 각각의 용법 확인 할 것!

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 
if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
console.log(info);

1.5 날짜와 시간🕐🕑🕒

new Date()

-현재의 날짜를 불러오는 함수이고 이러한 형태Fri May 29 2020 00:10:40 GMT+0900 (대한민국 표준시)로 출력된다, 이런 값을 가지고 웹사이트에서 회원가입시간,글작성시간 등을 활용한다고 보면된다!

더 다양한 함수

let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

조금 더 특별한 getTime();

-new Date().getTime()을 출력하면 날짜의 밀리초 표현 이 나오는데 기준은 1970년1월1일 부터 얼만큼의 밀리초가 지났는지로 계산

해당 기능을 통해 날짜간의 시간 비교가 가능하다!

만 나이 구하기 코딩코딩🎂

function getWesternAge(birthday) {
  let diffInMs = Date.now() - birthday.getTime();
  let ageDiff = new Date(diffInMs);
  return Math.abs(ageDiff.getFullYear()-1970);
}

getWesternAge(1990-03-21T00:45:06.562Z);

Jung Hyun Kim

코린이 프론트엔드 개발자💻💛🤙🏼

이전 포스트

#TIL wecode Bootcamp Day 2(JavaScript)

다음 포스트