JAVASCRIPT - 함수, 클래스, 표준 내장 객체

함수

전개 연산자(Spread 연산자, ...)

const a = [1,2,3]
const b = [4,5,6]
console.log(...a)  1,2,3 -> 대괄호가 없어짐!
console.log(1,2,3)  1,2,3 -> 아래의 결과와 위의 결과가 동일함!

 😎데이터 병합 메서드
const c = a.concat(b) 
console.log(c); 1,2,3,4,5,6 이 병합되어 출력

const d = [...a,...b] -> 1,2,3,4,5,6 으로 바뀌게 됨😎
console.log(d) [1,2,3],[4,5,6] -> [1,2,3,4,5,6] 으로 배열이 출력됨

{전개 연산자}

const a = {x: 1, y: 2}
const b = {y: 3, z: 4}

const c = Object.assign({},a,b)
console.log(c)  {x:1, y:3, z: 4} , 객체 데이터의 y 속성이 2가 3으로 덮어씌어짐

const d = {...a,...b}
console.log(d) { a: {x:1, y: 2}, b: {y: 3, z: 4} -> {x: 1, y:3, z: 4 }
전개 연산자로 중괄호가 없어지고 y값이 덮어씌어져서 위와 같이 출력됨

구조 분해 할당

{기존 배열 데이터 저장}

const arr = [1,2,3]
const a = arr[0]
const b = arr[1]
const c = arr[2]

{배열 구조 분해 할당} - [,,,  ...]에 각각의 배열 값을 할당하는 것

const [a, b, c] = arr  구조에 맞게 a=1, b=2, c=3 이렇게 값이 대입되어 저장됨
console.log(a,b,c) // 1, 2, 3 출력!

만약, 이미 선언되었다면 const 키워드 없이 구조 분해 할당이 가능함

let a = 0
let b = 0
let c = 0
[a, b, c] = arr;  만약, a값을 대입하지 않으려면 반드시 ,로 구분해야 됨 [,b,c] 이렇게
console.log(a, b, c) 
console.log(a, rest)  1, 2만 출력! -> console.log(a, ...rest)

{객체 구조 분해 할당}

const obj = {a: 1, b: 2, c: 3}

const {a,b} = obj  객체 구조 분해 할당
const [] = obj  배열 구조 분해 할당

console.log(a,b =7)  1 2 출력! c는 할당 하지 x므로 출력 x / b의 기본값 7 배열 값 2 -> 배열이 우선

😎 만약, 기본값을 c=4로 지정하고 배열 값에 c: 7이라고 저장되면 기본값은 사용되지 않고 배열에 저장된
데이터가 사용됩니다.

const { x= 4, a: heropy } = obj
console.log(x, heropy)  변수 a를 heropy로 바꾸어서 a를 콘솔에 입력하면 Syntax Error가 나오고 
대신 바꾼 이름인 heropy로 설정하게 되면 콘솔에는 4 1 이 출력이 됩니다.

선택적 체이닝 - null or undefined 일 경우 ?.을 사용하여 Error 처리를 방지하는 역할

선택적 체이닝(Optional Chaining) -> ?.(점 표기법 사용 불가여도 undefined만 출력하고 오류 x)

const user = null

console.log(user?.name) 객체가 undefined이면 오류 x, 객체가 null이면 오류 o

const userA = {
 name: 'Heropy',
 age: 85,
 address: {
   country: 'Korea',
   city" 'Seoul'
 }
}

 const userB = {
   name: 'YongHak',
   age: 23
 }
 
 function getCity(user) {
   return user.address?.city || '주소 없음' // 만약, undefined 또는 null이면 error가 아닌
   undefined를 반환 설정 여기서는 undefined || true이므로 '주소 없음'이 출력됨
 }
 
 console.log(getCity(userA)
 console.log(getCity(userB)

While 반복문 - 조건이 거짓일 때 반복이 멈출 수 있는 특징

While 반복문 - 반드시 거짓이 되는 조건을 추가하여 조건이 멈추도록 설정해야 함

let n = 0
while (n < 4) {
  console.log(n)
  n += 1
}

Do While 반복문 - do {} while () 
do를 무조건 1번 실행 후 while의 조건을 보고 실행여부를 결정(거짓이어도 최초 1번은 실행함)

let n = 0
do {
  console.log(n)
  n+=1
} while (n < 4)

콜백

{콜백 or 콜백함수} - 함수가 호출되어 실행될 때, 함수의 인자로 들어 가는 또 하나의 함수

const a = (callback) => {
  callback()  B 함수가 출력
  console.log("A")
}

const b = () => {
  console.log("B")
}

a(b) B A 출력

const sum = (a,b,c) => {
  setTimeout( () =>{
  	c(a+b) 1초 뒤에 3이 출력
  },1000 ) - 지정한 시간만큼 뒤에 호출, 시간 단위는 ms : 1000ms -> 1초
}

sum( 1, 2, (value) => {
  console.log(value)
})
sum(3,7,(value) => {
  console.log(value)
})

재귀 -  함수 내부에서 자신의 함수를 호출하는 것

재귀 - 함수 내부에서 무한정 반복하기에 반드시 멈추는 조건을 추가해줘야 됨

let i = 0
const a = () => {
  console.log('A')
  i += 1
  if( i < 4 ) {
    a()  재귀 호출
  }
}

const userA = { name: 'A', parent: null }
const userB = { name: 'B', parent: userA }
const userC = { name: 'C', parent: userB }
const userD = { name: 'D', parent: userC }

user처럼 매개변수를 1개만 사용할 경우 좌우 소괄호()는 없애도 됨
const getRootUser = user => {
 if(user.parent) {
   return getRootUser(user.parent)
 }
 return user
}

계속해서 재귀 호출이 가능하므로 언제나 userA의 객체 데이터가 출력 
console.log(getRootUser(userC))

 

호출 스케쥴링 - 사용하고자 하는 특정 함수의 실행시간을 지연처리 하는 

호출 스케쥴링 - 사용하고자 하는 특정 함수의 실행시간을 지연처리 가능(비동기)
setTimeout(콜백 함수, 시간) - ms단위 1000ms : 1초

const timeout = setTimeout( () => {
  console.log('Hello~')
}, 2000 )

clearTimeout(timeout) 설정한 timeout을 해제할 수 있음

const timeout = setInterval( () => { 2초 마다 계속 출력
  console.log('React'!)
}, 2000)

clearInterval(timeout) 2초 마다 실행되는 setInterval 함수 종료 설정

this 

{ this }
1. 일반 함수의 this는 호출 위치에서 정의 - 정의한 함수
2. 화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의 - 정의한 함수를 감싸는 함수

{ 일반 함수의 this }
const user = {
  firstNmae: 'YoungHak',
  lastName: "Jeon",
  age: 23
  getFullName: function () {
    return `${this.firstName} ${this.lastName}` 😎여기서 this는 현재 객체 데이터인 user를 가리킴
   // user.firstName 과 this.firstName과 의미가 동일함!
  }
}

console.log(user.getFullName()) 출력 : YoungHak Jeon

function user() {
  return {
    firstName: "YoungHak"
  }
}

{ 화살표 함수의 this } - 화살표를 선언한 함수의 바로 바깥의 함수의 데이터를 가리킴
여기서는 getFullName의 함수를 감싸는 user의 객체 데이터인 Neo Anderson을 말함

😎 멤버 - 속성과 메서드를 모두 포함한 것 아래 처럼
😎 일반함수 생략법 - getFullName: function () {} -> getFullName () {} 으로 줄이기 가능
function user() {
  this.firstName = "Neo",
  this.lastName = "Anderson"
  
  return {  // 속성과 메서드(속성에 함수를 할당한 것)로 이루어진 객체 
   firstName: "Heropy",
   lastName: "Park",
   age: 85,
   getFullName: () => {
     return `${this.firstName} ${this.lastName}`
   }
  }
}

const u = user()
console.log(u.getFullName())

prototype

// prototype

const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits)
console.log(fruits.length)
console.log(fruits.includes('Banana'))

Array.prototype.heropy = function () {
  console.log(this)
}

const heropy = {
  firstName: 'Heropy',
  lastName: 'Park',
  getFullName () {
   return `${this.firstName} ${this.lastName}`
  }
}

const neo = {
  firstName: "Neo",
  lastName: "Anderson"
}

console.log(heropy.getFullName())
console.log(heropy.getFullName.call(neo))  heropy 객체의 getFullName 메서드를 빌려서 사용함

{ prototype을 이용한 코드 리팩토링 }

function User (first, last) {
  this.firstName = first
  this.lastName = last
}

{ prototype을 사용할 때에는 반드시 일반 함수 function 만 가능 }
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
} 화살표 함수 사용 불가능!

const heropy = new User('Heropy','Park')  생성자 함수 new
const neo = new User ('NEO', 'Anderson')

console.log(heropy)
console.log(neo)

---

클래스

prototype 정의

JavaScript에서 prototype은 객체가 다른 객체의 속성과 메서드를 상속받을 수 있도록 해주는 기본적인 상속 메커니즘입니다. 즉, 객체는 자신의 prototype을 통해 부모 객체의 속성과 메서드를 물려받을 수 있습니다.

문법 사용 형태

1. 생성자 함수와 prototype

생성자 함수를 통해 객체를 만들면, 그 객체는 생성자 함수의 prototype 속성에 있는 메서드와 속성을 상속받습니다.

생성자 함수 정의
function Person(name, age) {
  this.name = name;
  this.age = age;
}

prototype에 메서드 추가
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

객체 생성
const john = new Person('John', 30);

prototype에 정의된 메서드 호출
john.greet();  // Hello, my name is John and I am 30 years old.

 

• Person 생성자 함수를 통해 john이라는 객체를 만들었고, Person.prototype.greet 메서드는 자동으로 john 객체에 상속되어 사용할 수 있게 됩니다.

정적 메서드

정적 메서드 - prototype이 붙지 않은 것 ex) Array.isArray()

class User {
  constructor(first, last) {
   this.firstName = first
   this.lastName = last
  }
  
  getFullName() {
   return `${this.firstName} ${this.lastName}`
  }
  static isUser(user) { 😎정적 메서드 선언
   if (user.firstName && user.lastName) { 
    return true
   }
   return false
  }
}

const heropy = new User('Heropy', 'Park')
const neo = new User('Neo', 'Anderson')
const lewis =  {
  name: "Lewis Yang",
  age: 85
}

console.log(heropy.getFullName()) 
console.log(neo.getFullName()) // 일반 메서드는 사용 가능
console.log(User.getFullName()) // Type Error , 직접적으로 호출 불가능함
console.log(User.isUser()) // 클래스 자체에서 사용해야 함
console.log(User.isUser(lewis) // false

---

표준 내장 객체

문자

😎 .length - 문자의 길이(숫자)를 반환합니다.

const str = 'Hello world!'
console.log(str.length)  길이인 12가 출력

😎 .includes() - 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인합니다.

const str = 'Hello world!'
console.log(str.includes('Hello'))  포함되어 있으므로 불린 데이터로 true 출력

😎 .indexOf() - 대상 문자에 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환합니다.
만약, 일치하는 문자가 없으면 '-1'을 반환합니다.

const str = 'Hello world!'
          // 012345678901
console.log(str.indexOf('world')) 6번째 부터 존재하므로 6 출력
console.log(str.indexOf('Heropy')) str 상수에 Heropy가 없으므로 -1을 출력

😎 .padEnd() - 대상 문자의 길이가 지정된 길이보다 작으면, 
주어진 문자를 지정된 길이까지 끝에 붙여 새로운 문자를 반환합니다.

const str = '1234567'

console.log(str.padEnd(10,'0')) 1234567000 출력: 길이가 10이어서 빈 문자 3칸을 지정한 0으로 배치
console.log(str)

const str1 = '12345678910111213'
console.log(str.padEnd('10','1')) 1234567891이 출력: str1의 길이가 10보다 크므로 적용 x

😎 .padStart() - 대상 문자의 길이가 지정된 길이보다 작으면, 주어진 문자를 지정된 길이까지
앞에 붙여 새로운 문자를 반환합니다.

const str = '1234567'
console.log(str.padStart(10,'0')) 0001234567 출력 - 원리는 padEnd와 동일
console.log(str)

😎 .replace() - 대상 문자에서 패턴(문자, 정규식)과 일치하는 부분을 교체한 새로운 문자를 반환합니다.

const str = 'Hello, Hello?!'

console.log(str.replace('Hello', 'Hi')) 출력: Hi, Hello?! / Hello를 Hi로 바꿈
console.log(str.replace(/Hello/g, 'Hi')) 출력: Hi, Hi?! - 정규식을 사용하여 g라는 global 플래그로
변경합니다!
console.log(str) 출력: Hello, Hello?!

😎 .slice() - 대상 문자의 일부를 추출해 새로운 문자를 반환합니다. 두 분째 인수 직전까지 추출하고,
2 번째 인수를 생략하면 문자의 끝까지 추출합니다.

const str = 'Hello World!'

console.log(str.slice(0,5))
console.log(str.slice(6, -1))
console.log(str.slice(6))
console.log(str)