[JavaScript] 함수, 배열 메서드, this, 객체 개념 정리

함수 (function)

- 함수 선언식

//일반적인 함수 선언식

function 함수명(매개변수){
	//내용 작성
}

function plus(a, b) {
  return a + b
}

// 함수 표현식
변수키워드 함수명 = function(매개변수){
	//내용 작성
}
const myplus = function(a, b){
  return a+b
}

- 기본 인자 및 매개변수 개수 불일치

// 기본 인자 : 인자 작성 시 = 문자 뒤에 기본 인자 선언 가능
const hi = function (name = 'Tom'){
  return `Hi ${hi}`
}

hi() // Hi Tom

// 매개변수보다 인자가 많을 경우 해당 갯수 만큼만 출력
// 에러를 발생하지 않음
const Args = function(){
  return 0
}

Args(1, 2, 3) // 0

const Args = function(a, b){
  return [a, b]
}

Args(1, 2, 3) // [1, 2]

// 매개변수보다 인자가 적을 경우 해당 갯수 만큼만 출력
// 에러를 발생하지 않음
const Args = function(a, b, c){
  return [a, b, c]
}
Args() // [undefined, undefined, undefined]
Args(1) // [1, undefined, undefined]
Args(2, 3) //  [2, 3, undefined]

전개 구문 : 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우 요소, 함수의 경우 인자로 확장

// 배열에서 사용 (배열 복사)
let parts = ['손', '발']
let body = ['몸통', ...parts, '배']
console.log(body) // ['몸통', '손', '발', '배']

// 함수와의 사용(Rest parameter) : 정해지지 않은 수의 매개변수를 배열로 받음
const rest = function (a, b, ...Args) {
  return [a, b, Args]
}

rest(1, 2, 3, 4, 5) // [1, 2, [3, 4, 5]]
rest(1, 2) // [1, 2, []]

함수의 타입 : 선언식 함수와 표현식 함수 모두 function으로 동일

// 함수 표현식 (var로 정의한 변수처럼 호이스팅 발생)
const a = function (args) {}

// 함수 선언식 (호이스팅이 발생하지 않음)
function b(args) {}

console.log(typeof a) // function
console.log(typeof b) // function

 

화살표 함수 : 함수를 간결하게 정의할 수 있는 문법으로 구문을 짧게 사용하기 위해 사용

const a = function(name) {
  return `hello, ${name}`
}

// function 키워드 삭제
const b = (name) => { return `hello, ${name}`} 
// 인자가 1개일 경우에는 () 생략
const c = name => { return `hello, ${name}`} 
// 함수가 return을 포함한 표현식 1개일 경우 {}와 return 삭제 가능
const d = name => `hello, ${name}` 

// 인자가 없다면 () 또는 _로 표시 가능
let args = () => 'Args'
args = _ => 'Args'

// 객체를 return 한다면
let ob = () => {return { key: 'value' }}

// return을 적지 않으려면 괄호 필요
ob = () => ({ key: 'value' })​

This

정의
- 어떤 객체를 가리키는 키워드
- JavaScript의 함수는 호출될 때 this를 암묵적으로 전달받음
- 함수가 어떻게 호출되었는지에 따라 동적으로 this에 객체가 결정

// 전역 문맥에서의 this -> 브라우저 전역 객체인 window를 가리킴 (모든 객체의 최상위 객체)
console.log(this) // window

// 함수 문맥에서의 this
// 단순 호출 -> 전역 객체를 가리ㅣㅁ (브라우저에서 전역은 window)
const func = function(){
  console.log(this)
}

func() // window

// Method -> 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩
cont ob = {
  data : 1,
  func() {
    console.log(this) // ob
    console.log(this.data) // 1
  }
}

ob.func() // ob

// NESTed -> forEach의 콜백 함수에서 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴
// 이를 해결하기 위해 사용하는 것이 =>

const ob = {
  numbers : [1],
  func(){
    console.log(this) // ob
    this.numbers.forEach(function(num){
      console.log(num) // 1
      console.log(this) // window
    })
  }
}

ob.func()

// 문제 해결을 위한 구성 방식
// 함수 내에서 함수 상황에서 화살표 함수를 쓰는 것을 권장
const ob = {
  numbers : [1],
  func(){
    console.log(this) // ob
    this.numbers.forEach((num) => {
      console.log(num) // 1
      console.log(this) // ob
    })
  }
}

ob.func()​

- 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킴
- Lexical scope :함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정

배열 (Array)

- 키와 속성들을 담고 있는 참조 타입의 객체
- 순서를 보장하는 특징

const nums = [1, 2, 3, 4, 5]

console.log(nums[0]) // 1
console.log(nums[-1]) // undefined

//배열의 길이는 배열.length 형태로 접근 가능
console.log(nums.length)​

 - 배열 메서드 기초

const numbers = [1, 2, 3, 4, 5]

// reverse() : 원본 배열 요소들의 순서를 반대로 정렬
numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]

// push() : 배열의 가장 뒤에 요소 추가
numbers.push(50)
console.log(numbers) // [1, 2, 3, 4, 5, 50]

// pop() : 배열의 마지막 요소 제거
console.log(numbers.pop()) // 50
console.log(numbers) // [1, 2, 3, 4, 5]

// includes(value) : 배열에 특정 값이 존재하는지 판별
console.log(numbers.includes(1)) // true
console.log(numbers.includes(100)) // false

// indexOf(value) : 배열에 특정 값이 존재하는지 확인 후 가장 첫 첫번째로 찾은 요소의 인덱스 반환 (없으면 -1)
console.log(numbers.indexOf(3)) // 2
console.log(numbers.indexOf(100)) // -1

// forEach : 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
numbers.forEach(num => console.log(num)) // 1 2 3 4 5

// map : 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
const numbersquare = numbers.map(num => num * num)
console.log(numbersquare) // [1, 4, 9, 16, 25]

// filter : 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
const even = numbers.filter(num => num % 2 === 0)
console.log(even) // [2, 4]

// reduce : 콜백 함수의 반환 값들을 하나의 값에 누적 후 반환
const sum = numbers.reduce((acc, sum) => acc + sum, 0)
console.log(sum) // 15

// find : 콜백 함수의 반환 값이 참이면 해당 요소를 반환
const findnumber = numbers.find(num => num > 3):
console.log(findnumber) // 4

// some : 배열의 요소 중 하나라도 판별 함수를 통과하면 참 반환
const evenExist = numbers.some(num => num % 2 === 0)
console.log(evenExist) // true

// every : 배열의 모든 요소가 판별 함수를 통과하면 참 반환
const alleven = numbers.every(num => num % 2 === 0)
console.log(alleven)

- 콜백 함수 : 다른 함수의 인자로 전달되는 함수

// 콜백 함수 예시
const numbers = [1, 2, 3]
numbers.forEach(function (num){
  console.log(num ** 2)
})
// 1
// 4
// 9

const callBack = function(num) {
  console.log(num ** 2)
}
const numbers = [1, 2, 3]
numbers.forEach(callback)
// 1
// 4
// 9

 

객체(Object)

객체는 속성의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현

const pet = {
  name = 'Tom',
  'detail' : {
    animal = 'cat',
  	age = '3',
  },
}
console.log(pet.name)
console.log(pet['name'])
console.log(pet['detail'])
console.log(pet['detail'].age)​

생성자 함수 : New

const people1 = {
  name = 'Tom',
  age : 22,
  id : 123
}

// 똑같은 형태의 객체 생성시 생기는 불편함을 줄여주는 new
const people2 = {
  name = 'Charlie',
  age : 21,
  id : 126
}

// 아래와 같이 구성하면 불편함을 줄일 수 있음
// 함수 이름은 반드시 대문자로 시작
function People(name, age, id){
  this.name = name
  this.age = age
  this.id = id
}
// 생성자 함수 사용시 반드시 new 사용
const people3 = new People('son', 24, 127)