강의 | Chap 17 JS 클래스
#1. 생성자 함수(prototype)
스타벅스 예제 참조.
변수heropy의 이름이 바뀔 수 있기 때문에,
이름heropy을 다시 쓰는 것 대신 this를 쓰는 경우 이후 변수 이름이 변경되어도 그대로 둬도 괜찮음.
JS의 클래스와 프로그래밍의 클래스는 다름
JS: 프로토타입의 프로그래밍 언어라고 할 수 있음.
리터럴 방식... 이해가 안간다
""''도 리터럴이고
{ }[ ]도 리터럴임.
#2. this
- JS 클래스 중 하나
- 일반 함수는 호출 위치에서 this 정의
- 화살표 함수는 자신이 선언된 함수 범위에서 this 정의
- this 사용 시 일반 vs 화살표 함수 중 어떤걸 고를지 고민하게 되기 때문에 둘의 차이를 잘 알아야 함.
- 참고로 파스칼 케이스(PascalCase)로 적은 함수명 = 생성자 함수라는걸 알려줌
일반 vs 화살표 함수: 비교1
아래 예시를 보고 결과값을 추측해보자.
이 경우:
1) 일반 함수heropy.normal()은Heropy가 반환되고(해당 호출에서 자신이 내용으로 속해있는this(=heropy 함수)와 맞닿아 있음)
2) 화살표 함수heropy.arrow()는undefined가 반환된다.
일반 vs 화살표 함수: 비교2
이건 어떨까?
1) 일반 함수amy.normal()은Amy가 반환되고(해당 호출에서 자신이 내용으로 속해있는this(=amy 함수)와 맞닿아 있음)
2) 화살표 함수amy.arrow()는 역시undefined가 반환된다.
- 복습:
{ }객체object* 데이터 내 key의 value 가 함수일 경우 key는 method라고도 부름 - 참고로 객체는 어떤 행위가 닿는 대상이라고 함... 목적어object와 같은 것 같음.
수업 |
표준 내장 객체: Array
출처: 박영웅 강사님
https://github.com/KDT1-FE/KDT4-Theory-JS/blob/main/builtins.md
.length
중요. 배열의 길이를 반환(숫자로)
.at()
조금 덜 중요(대체제 있음). 대상 배열을 인덱싱 함.
음수 값을 사용하면 뒤에서부터 인덱싱.
1) 앞에서부터 조회하면 잘 안씀
console.log(arr[0]) // 'A' 비교적 짧다.
console.log(arr.at(0)) // 'A' 더 길다!2) 뒤에서부터 조회할 때는 용이함.
console.log(arr[arr.length - 1]) // 'C' 길다.
console.log(arr.at(-1)) // 'C' 비교적 많이 짧다!.concat()
조금 덜 중요(전개연산자 = 대체제) 대상 배열과 주어진 배열을 병합하여 새로운 배열을 내놓음.
요즘은? 전개 연산자를 자주 사용하기도.
const arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)
console.log(arr3) // ['A', 'B', 'C', 'D', 'E', 'F']
// const arr3 = [...arr1, ...arr2]참고. ... 전개 연산자는 대상이 가지고 있는 '' 같은 부호를 삭제한다.
.every()
중요. 대상 배열의 모든 요소가 콜백 테스트를 통과(=truthy 반환)하는지 확인. (배열 데이터의 갯수만큼 콜백이 실행됨.)
만약 테스트를 진행하는 배열 내 요소 중 한 번이라도 테스트가 실패하면 더 이상 콜백 실행하지 않고 false를 반환함.
const arr = [1, 2, 3, 6]
const isValid = arr.every(item => item < 5) // arr 내 아이템들이 전부 5보다 작은지
console.log(isValid) // false (콜백 4번 돌아감)참고. 화살표 함수가 { }로 시작되지 않으면 return 키워드가 생략된 것.
.filter()
엄청 중요. 대상 배열에서 콜백 테스트를 통과하는 요소들만 모아 새로운 배열을 만들어 반환함. (7개 중 5개 통과하면 해당 5개로 새 배열 생성)
만약 테스트를 진행하는 배열 내 요소 중 아무 것도 테스트를 통과하지 못하면(ex. 8개 중 0개), 빈 배열 [ ]을 반환함.
.find()
엄청 중요. 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환함.
최초로 테스트가 통과하면, 이후의 콜백은 실행하지 않음.
모든 테스트가 통과 실패하면, undefined를 반환.
.findIndex()
엄청 중요. 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스(n번째, 0부터 시작)를 반환. (통과하는 나머지 요소들은 반환 x)
최초로 테스트가 통과하면, 이후 콜백은 실행하지 않음.
모든 테스트가 실패하면, -1을 반환.
.flat()
조금 덜 중요. 대상 배열의 모든 하위 배열들을 지정한 깊이까지 이은 새로운 배열을 반환함.
(중요성은 좀 떨어짐)
const arr = [1, 2, [3, 4]]
console.log(arr.flat()) // [1, 2, 3, 4]const arr = [1, 2, [3, 4, [5, 6, [7, 8]]]]
console.log(arr.flat()) // [1, 2, 3, 4, [5, 6, [7, 8]]]
console.log(arr.flat(2)) // [1, 2, 3, 4, 5, 6, [7, 8]]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8].forEach
엄청 중요.
대상 배열의 아이템 갯수만큼 주어진 콜백을 실행함.
참고로 forEach는 임의로 부여한 return 값이 뭐든 상관 없음.
어차피 콜백한 내용이 출력됨.
배열 데이터 안의 아이템 갯수만 중요함!
- 다만 .forEach는 중간에 반복을 멈추지 않기 때문에
멈출 필요가 있을 경우, 대신 for 반복문을 사용해야 함.
(사실 이름이 설명 다했다. 로지컬.)- 추가로 .forEach 에서는 await를 사용할 수 없다.
비동기 코드의 기다림? (동작)을 보장할 수 없음 (풀엑셀...)
위와 마찬가지로 기다려야 한다면 for를 사용해야.- 직렬실행 / 병렬실행(나중에 배움!)
const arr = ['A', 'B', 'C'] // 3번만 반복하고 끝날 예정
arr.forEach(item => console.log(item)) // undefined
//설명
// 1) 'A' => console.log('A') // A
// 2) 'B' => console.log('B') // B
// 3) 'C' => console.log('C') // C아래는 for문을 쓰는 경우. (break 해야 할 때)
const arr = ['A', 'B', 'C']
for (let i = 0; i < arr.length; i += 1) {
if (i > 1) {
break
}
console.log(arr[i])
}참고.
let i = 0; 초기화 코드
i < arr.length; 종료 조건
i += 1 변화 부분
.includes()
표준 내장 객체 string 파트에서 다뤘음.
대상 배열이 특정 요소를 포함하고 있는지 확인. (T/F 불린)
주의. 소문자 대문자 유의하기!
가변성 / 불변성 파트에서 추후 좀 더 공부하게 될 예정(특히 자료형)
참고로 이렇게 찾는거 안됨.
이렇게 하기.
.join()
대상 배열의 각 아이템들을 하나로 합침
음... 참고로 합치는 대상에 구분자가 있으면 가만히 내버려두고,
구분자를 바꾸는 경우에는 기존걸 삭제하고 병합하는 듯 하다.
소괄호 내에 다음과 같이 빈 문자를 쓰는 경우 .join(''), 구분자 없이 합쳐준다.
const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits.join()) // 'Apple,Banana,Cherry' 쉼표가 붙어있다.
console.log(fruits.join(', ')) // 'Apple, Banana, Cherry'
console.log(fruits.join('/')) // 'Apple/Banana/Cherry' 쉼표가 삭제되고 슬래시가 추가됨..map()
중요.
대상 배열의 길이만큼 주어진 콜백을 실행하고(.forEach),
콜백의 반환 값을 모아 새로운 배열을 반환함. (새로움.)
반환 값을 모으다보니 배열 내 item의 갯수는 바뀌지 않음.
(콜백할 10개 -> 새로운(콜백을 거친) 내용으로 10개 반환!)
.pop()
참고: .shift()는 첫 번째 요소를 제거함.
대상 배열에서 마지막 요소를 제거한 뒤 그 요소를 반환함.
사용하면 대상 배열의 원본이 변경됨.
const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits.pop()) // 'Cherry' 반환됨. 또한제거됨
console.log(fruits) // ['Apple', 'Banana'].push()
참고:.unshift()는 첫 번째 부분에 추가함.
대상 배열의 마지막에 하나 이상의 요소를 추가하고(차례대로 추가됨), 배열의 새로운 길이를 반환.
사용하면 대상 배열의 원본이 변경됨. 많이 쓰임.
const fruits = ['Apple', 'Banana', 'Cherry']
const newLength = fruits.push('Orange', 'Peach')
console.log(newLength) // 5
console.log(fruits) // ['Apple', 'Banana', 'Cherry', 'Orange', 'Peach'].reduce()
대상 배열의 길이만큼 주어진 콜백을 실행하고,
맨 마지막에 호출되는 콜백의 반환 값을 돌려줌.
const numbers = [1, 2, 3]
// const result = numbers.reduce((acc, cur) => acc + cur, 10)
// 10은 초기값initial value
const result = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue
}, 10)
// 1번째 acc+cV = 10(초기값) + 1(numbers의 1번째) = 1
// 2번째 acc+cV = 11(모인 값) + 2(numbers의 2번째) = 3
// 3번째 acc+cV = 13(모인 값)+ 3(numbers의 3번째)
console.log(result) // 16// 모든 이름 추출
const names = users
.reduce((acc, cur) => {
acc.push(cur.name)
return acc
}, [])
.join(', ')
console.log(names) // 'Neo, Amy, Lewis'.reverse ~.some() 재확인
.sort()
대상 배열을 콜백의 반환 값에 따라 정렬함.
콜백을 안 쓴 상태에서 .sort()하면 요소들을 1) 문자열로 변환하고 2) 유니코드 코드 포인트 순서대로 정렬함.
사용하면 대상 배열의 원본이 변경됨.
const numbers = [4, 17, 2, 103, 3, 1, 0]
numbers.sort()
console.log(numbers) // [0, 1, 103, 17, 2, 3, 4]
numbers.sort((a, b) => a - b)
console.log(numbers) // [0, 1, 2, 3, 4, 17, 103]
numbers.sort((a, b) => b - a)
console.log(numbers) // [103, 17, 4, 3, 2, 1, 0]부록.
- 참고로 원시형은 모양이 똑같으면 일치하는(===)데,
참조형은 모양이 똑같다고 해서 꼭 일치하는건 아님.- 예시로는 원시형 / 참조형 데이터는 데이터를 저장할 때 서로 slot?을 쓰는 방법이 다름.
원시형은 이미 같은 값(===) 있는 슬롯 있으면 그걸 참조하는데 참조형은 같은 값(===)이더라도 다른 슬롯 씀.- 자세한건 추후 다룰 예정(불변성 vs 가변성)
강타입 언어: Typescript (딱 정해져있음)
약타입 언어: Javascript (두루뭉술, 유연함. 정해진건 딱히 없음)
To-Do
- 연산자 부분 다시 공부하기
