[JS]230109 TIL: Chap16 #1~6 + 수업

Myugaa·2023년 1월 9일

MegabyteSchool js 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

JS

목록 보기

7/15

강의 | Chap 16 JS 함수

출처: 박영웅 강사님

#1. 함수 복습

~ skip ~

#2. 화살표 함수

아래 두 코드 예제는 같은 내용을 표현한 것이다.

1) 일반 예제

const double = function (x) {
  return x * 2
}
console.log('double: ', double(7))

console: double: 14

2) 화살표 함수 (축약형)

const doubleArrow = (x) => x * 2 // 매개변수가 한 개이므로 (x)에서 괄호 빼도 ok.
console.log('doubleArrow', doubleArrow(7))

console: doubleArrow 14

중괄호와 function, return 키워드를 생략한 것.
만약 return 위에 console.log(~) 같은 내용이 들어있다면 화살표 함수 이용 불가함.
화살표 함수를 사용하여 다른 데이터 종류도 다룰 수 있음.[] 배열 데이터나 {} 객체 데이터 포함.
➔ 다만 객체 데이터는 소괄호()로 감싸서 ({}) 와 같은 모습으로 작성한다.

#3. 즉시실행 함수 IIFE

: Immediately-Invoked Function Expression.

일회용 함수를 만들었을 경우 (=한 번 실행하고 나서 더 사용되지 않음) 함수의 이름을 설정/호출해줄 필요가 없음.
➔ 즉시실행 함수는 이때 쓰임. 쓰자마자 동작함.

1) 일반 함수

const a = 7
function double() {
  console.log(a * 2)
}
double(); // 아래와 연달아 쓰는 경우 ; 주의

2) 즉시실행 함수

➔ 아래와 같이 2개 방법이 있음.
2번 방법이 좀 더 추천됨.

#4. 호이스팅

➔ JS에서 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상.

const a = 7

double()

const double = function () {
  console.log(a * 2)
};

console : type error: double is not a function

함수 표현 부분const double = function() {~}을 함수 선언 부분function double() {~}으로 변경.

const a = 7

double()

function double() {
  console.log(a * 2)
};

console: 14

함수의 선언이 호출하는 부분보다 밑에 있어도 호이스팅에 의하여 저절로 올라가게 된다.

#5. 타이머 함수

참고로 시간: ms 단위. (1000ms = 1s)

1) setTimeout 예시

const timer = setTimeout(() => {
  console.log('Heropy!')
}, 3000)

2) clearTimeout 예시

const h1E1 = document.querySelector('h1')
h1E1.addEventListener('click', () => {
  clearTimeout(timer)
})

3) setInterval 예시

const timer = setInterval(() => {
  console.log('Heropy!')
}, 3000)

4) clearInterval 예시

const h1E1 = document.querySelector('h1')
h1E1.addEventListener('click', () => {
  clearInterval(timer)
})

#6. 콜백

(과제 2에 로딩 애니메이션 돌아가도록 활용하면 좋을 것 같다.)
➔ 함수의 인수로 사용되는 함수.
예시) setTimeout(함수, 시간)

function timeout(cb) { // 함수 timeout. 아래 콜백함수 내용은 매개변수 cb가 받아온다
  setTimeout(() => { // setTimeout 즉시실행+익명함수로 실행함
    console.log('Heropy!') // Heropy! 를 출력함
    cb() // 매개변수 적기(함수 호출하듯. 이렇게 하면 특정한 실행 위치를 보장해줌)
  }, 3000) // 3초 뒤에 
}
timeout(() => { // = 콜백함수. timeout 을 호출하면 function이 작동
  console.log('Done!') // Done!을 출력함
})

수업 |

출처: 박영웅 강사님 수업.
수강생용 참조링크: https://github.com/KDT1-FE/KDT4-Theory-JS/blob/main/builtins.md

1. 표준 내장 객체(Standard Built-in Objects)

0) prototype vs static

1) prototype이 붙어있으면 데이터 method임.
➔ 형식: 데이터.메소드()
2) prototype이 안 붙어있으면 정적(static) method.
➔ 형식: 클래스.메소드()

인스턴스: 내가 지정한 값(시간 등)을 따로 들고 있을 수 있음.

1) string

.length

문자의 길이를 (숫자로) 반환

.includes()

대상 문자에 주어진 문자가 포함되어 있는지 확인 (불린값 반환)

const str = 'Hello world!'
console.log(str.includes('Hello')) // true

찾기 시작할 위치를 두 번째 인수로 넣을 수 있음. (기본값 0)
예시) str.includes(Hi, 0)

.indexOf()

대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(nth 위치, 숫자)를 반환함.
일치하는 문자 없을 경우 : -1 반환

.padStart()

대상 문자의 길이가 주는 값보다 짧으면 맨 앞에 문자 (반복) 추가해줌.

const str = '123'
console.log(str.padStart(5, '0')) // console.log(str.padStart(길이, 추가할 문자))
console.log(str) // '00123'

.padEnd()

대상 문자의 길이가 주는 값보다 짧으면 맨 뒤에 문자 (반복) 추가해줌.
형식: 위에서 아래 내용만 바꾸면 ok.

str.padEnd(길이, 추가할 문자)

.replace()

대상 문자의 내용 일부를 다른 내용으로 대체할 수 있음

str.replace('찾을 문자', '바꿀 문자')
str.replace(/찾을 문자/g, '바꿀 문자') // 모두 바꾸기

const str = 'Get: potato, milk, eggs + mayo'

console.log(str.replace('potato', 'tomato')) // 'Get: tomato, milk, eggs + mayo'
console.log(str.replace(/,/g, ' +')) // 'Get: potato + milk + eggs + mayo'
console.log(str) // 'Get: potato, milk, eggs + mayo'

/찾을 문자/g
전체 범위 내에서 찾을 문자의 정규표현식. 참고로 g = global
^찾을 문자
첫 번째 찾을 문자의 정규표현식.

.slice()

대상 문장의 일부를 추출해 새로운 문자를 반환. (원본 손상 x)
str.slice(시작, 컷팅할 구간(미포함))

const str = "Good morning!"
//           01234567890123 // 14개
console.log(str.slice(0,5)) // "Good" (0~4번째)

.split()

대상 문자를 주어진 구분자로 나눠 배열[] 데이터로 반환.

const str = 'Apple, Banana, Cherry'
console.log(str.split(', ')) // ['Apple', 'Banana', 'Cherry']

.startsWith()

대상 문자가 주어진 문자로 시작하는지 여부(불린)를 반환.

.toLowerCase()

대상 문자를 영어 소문자로 변환해 새로운 문자로 반환.

const str = 'Apple, Banana, Cherry'
str.toLowerCase() // 'apple, banana, cherry'

.toUpperCase()

대상 문자를 영어 대문자로 변환해 새로운 문자로 반환.

const str = 'Apple, Banana, Cherry'
str.toLowerCase() // 'APPLE, BANANA, CHERRY'

.trim()

대상 문자 내 특정 문자를 잘라주는 역할.
실수로 띄어쓰기 입력 방지 등에 매우 도움되기에 자주쓰임.
console.log(inputText.trim())

.split()

2) Number

.toFixed()

숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환.
자주 사용

.toLocaleString

숫자를 현지 언어 형식의 문자로 반환함.

const num = 1000000
num.toLocaleString() // 1,000,000

Number.isInterger

주어진 값이 정수인지 확인함. (불린. T/F)

Number.isNaN(신규) / isNaN(예전)

주어진 값이 NaN인지 확인함. (불린. T/F)
Number.isNaN(신규) 가 isNaN(예전) 보다 좀 더 엄격한 버전. 기능 차이 있음.
하여 신규 형식 사용이 권장됨.

Number.parseInt(신규) / parseInt(예전)

주어진 값(문자, 숫자)를 파싱해서 특정 진수의 정수로 반환함.
기능 차이 없음.
주의 1. 10진수가 기본값이 아님. 두 번째 인수에 꼭 명시해야 함.
주의 2. 진수 값이 2보다 작거나 36보다 클 수 없다.
팁. 마지막에 숫자 말고 문자 데이터를 끼워넣으면 정수로 반환, 다만 숫자로 시작하지 않으면 NaN 반환.

Number.parseInt(str, 10) // 10진수 정수로 반환.

3) Math

Math.abs()

absolute; 주어진 숫자의 절대값 반환.

Math.ceil()

주어진 숫자를 올림해 정수를 반환.

Math.floor()

주어진 숫자를 내림해 정수를 반환.

Math.round()

주어진 숫자를 반올림해 정수를 반환.

Math.max()

주어진 숫자 중 가장 큰 숫자를 반환.

Math.min()

주어진 숫자 중 가장 작은 숫자를 반환.

Math.pow()

power; 주어진 숫자를 거듭제곱한 값을 반환.

Math.random()

0과 1 미만의 숫자 하나를 무작위로 반환함.

4) Date

new Date()

new Date(생성자 함수)를 이용해 반환되는 인스턴스를 타임스탬프timestamp 라고 부른다.

생성자 함수 형식: new 클래스(대문자)()
참고로 생성되는 결과물은 객체{ } 데이터이다.

타임스탬프(인스턴스) 예시.

const date = new Date()
console.log(date)

참고로 typeof date 하면 object가 뜨고,
typeof (여기에 타임스탬프 입력)은 string이 뜸.

.getFullYear() + .setFullYear()

date.getFullYear() // 2022

date.setFullYear(2025) 
console.log(date.getFullYear()) // 2025

.getMonth() + .setMonth()

주의. 월의 경우에만 0부터 시작함 (Jan = 0, Dec = 11)

.getDate() + .setDate()

날짜 인스턴스의 '일'을 반환/지정함.

.getHours() + .setHours()

날짜 인스턴스의 '시간'을 반환/지정함.

그외: .getMinutes() .setMinutes() ;

.getSeconds() .setSeconds()

위와 같은 구조.

.getDay()

날짜 인스턴스의 '요일'을 반환함.

.getTime() + .setTime()

.toUTCString()

날짜 인스턴스의 협정 세계시(UTC)(=그리니치 평균시(GMT))를 반환. (참고로 영국에 위치한 기준시.)
한국은 UTC 기준보다 9시간 빠름.

console.log(new Date()) // Tue Oct 25 2022 16:29:54 GMT+0900 (한국 표준시)
console.log(new Date().toUTCString()) // Tue, 25 Oct 2022 07:29:54 GMT // 24시간식 GMT 시간.

.toISOString()

날짜 인스턴스의 협정 세계시(UTC)를 'ISO 8601' 포맷으로 반환.
참고: 'ISO 8601': 날짜와 시간을 표현하는 국제 표준 규격.
GMT와 달리 변환 시 형식이 꽤 특이한 점 참고.

console.log(new Date()) // Tue Oct 25 2022 16:29:54 GMT+0900(한국 표준시)
console.log(new Date().toISOString()) // 2022-10-25T07:29:54.000Z !위 GMT와 형식이 다르게 생겼다.

정규표현식?? 찾아보기

Myugaa

프론트엔드 개발 입문자입니다. 오타, 틀린 내용 피드백 환영합니다.

[JS]230109 TIL: Chap16 #1~6 + 수업

JS

강의 | Chap 16 JS 함수

#1. 함수 복습

#2. 화살표 함수

1) 일반 예제

2) 화살표 함수 (축약형)

#3. 즉시실행 함수 IIFE

1) 일반 함수

2) 즉시실행 함수

#4. 호이스팅

#5. 타이머 함수

1) setTimeout 예시

2) clearTimeout 예시

3) setInterval 예시

4) clearInterval 예시

#6. 콜백

수업 |

1. 표준 내장 객체(Standard Built-in Objects)

0) prototype vs static

1) string

.length

.includes()

.indexOf()

.padStart()

.padEnd()

.replace()

.slice()

.split()

.startsWith()

.toLowerCase()

.toUpperCase()

.trim()

.split()

2) Number

.toFixed()

.toLocaleString

Number.isInterger

Number.isNaN(신규) / isNaN(예전)

Number.parseInt(신규) / parseInt(예전)

3) Math

Math.abs()

Math.ceil()

Math.floor()

Math.round()

Math.max()

Math.min()

Math.pow()

Math.random()

4) Date

new Date()

.getFullYear() + .setFullYear()

.getMonth() + .setMonth()

.getDate() + .setDate()

.getHours() + .setHours()

그외: .getMinutes() .setMinutes() ;

.getSeconds() .setSeconds()

.getDay()

.getTime() + .setTime()

.toUTCString()

.toISOString()

[JS]230108 TIL: Chap15 #9~10

[JS]230110 TIL: Chap17 #1~2 + 수업(표준 내장 객체: Array)

0개의 댓글