[JS] 참조 자료형, 함수

# 참조 자료형이란?

객체의 주소가 저장되는 자료형

가변적이며, 주소가 복사됨

(↔ 원시자료형)

 

 

함수의 구조

function name ([para1[, para2[....,]]]) {
	statements
    return value
}

 

 

함수의 정의 방법은 선언식과 표현식이 있음

// 선언식
function add (num1, num2) {
	return num1 + num2
}

// 표현식
const sub = function (num1, num2) {
	return num1 - num2
}


// 둘다 사용할때는 똑같음
add(1, 2)	// 3
sub(2, 1)	// 1

둘이 뭐가 다른데,..?

• 표현식은 익명함수를 쓸 수 있음
• 선언식과 달리 표현식으로 정의한 함수는 호이스팅 되지 않으므로 함수를 정의하기 전에 먼저 사용할 수 없음

※ 호이스팅이 뭐더라?

= 끌어올리는 것

변수와 함수 선언이 코드 상단으로 옮겨지는 것처럼 보이는 현상

이전에 var에서 했었음

• 변수 선언일 때

console.log(x)
let x = 5 // 이건 안됨

console.log(y)
var y = 5	// 이건 됨, var는 호이스팅이 발생하므로

• 함수 정의일 때

hoistedfun()	// 선언식은 호이스팅이 되므로 위에 써도 ㄱㅊ
function hoistedfun() {
    console.log('호이스팅 됨')
}

hoistedfun2()		// 표션식은 호이스팅 안됨
var hoistedfun2 = function () {	// 여기가 var여도 안됨
    console.log('되나?')
}

// 선언식
add(1, 2)	// 3
function add (num1, num2) {
  return num1 + num2
}

// 표현식
sub(2, 1)	// ReferenceError -> 호이스팅 없음
const sub = function (num1, num2) {
  return num1 - num2
}

그러므로 표현식이 더 권장됨

 

 

 

 

# 매개변수 정의 방법

1. 기본 함수 매개변수

값이 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화

const greeting = function (name = 'Anonymous') {
	return `Hi ${name}`
}

greeting() 	// Hi Anonymous

 

2. 나머지 매개변수

임의의 수의 인자를 배열로 허용하여 가변 인자를 나타내는 방법

• 함수 정의 시 나머지 매개변수 하나만 작성할 수 잇음
• 나머지 매개변수는 함수 정의에서 매개변수 마지막에 위치해야 함
• 여기서 restp앞에 있는 ...은 전개구문 ▼

const myFun = function (p1, p2, ... restp) {
	return [p1, p2, restp]
}

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

• 매개변수 개수 > 인자 개수 ( 누락된 인자는 undefined로 할당)

const myFun = function (p1, p2, p3) {
	return [p1, p2, p3]
}

myfun()  // [undefined, undefined, undefined]

• 매개변수 개수 <  인자 개수 ▶ 초과 입력한 인자는 사용하지 않음

const noArgs = function () {
	return 0
}

noArgs(1, 2, 3)		// 0

3. 객체를 매개변수로 보내보자

const obj = {
    'name': 'Bok',
    'age': 22,
    'condition' : 'good',
    callMyName() {	// 축약 ver
        console.log(`내 이름은 ${this.name}`)
    }
}
const myfun5 = function (obj) {
    console.log(obj)
    // 객체 속성 접근은 .이나 []활용
    console.log(obj.name)	// Bok
    console.log(obj['name'])	// Bok
    obj.callMyName()		// 내 이름은 Bok
}
myfun5(obj)

 

 

 

# 전개 구문(Spread syntax)

배열이나 문자열과 같이 반복 가능한 항목을 펼치는 것

전개 대상에 따라 역할이 다름 → 분리도 할 수 있고, 추가도 할 수 있다

• 함수와의 사용
  • 함수 호출 시 인자 확장
  • 나머지 매개변수(압축)
• 객채와의 사용
• 배열과의 사용

// 1. 함수 호출 시 인자 확장
function myFunc(x, y, z) {
  return x + y + z
}
let numbers = [1, 2, 3]
console.log(myFunc(...numbers)) // 6


// 2. 나머지 매개변수
function myFunc2(x, y, ...restArgs) {
  return [x, y, restArgs]
}
console.log(myFunc2(1, 2, 3, 4, 5)) // [1, 2, [3, 4, 5]]
console.log(myFunc2(1, 2)) // [1, 2, []]

 

 

# 화살표 함수

const arrow = function (name) {
	return `Hello, ${name}`
}
// 이걸 화살표 함수로

const arrow = name => `Hello, ${name}`
// 이렇게 나타낼 수 있음

화살표 함수 작성 과정

1. function 키워드 제거 후, 매개변수와 중괄호 사이에 화살표(=>) 작성

2. 함수의 매개변수가 하나 뿐이라면 매개변수의 ( ) 제거 가능(하지만, 제거하는게 권장되진 않음)

3. 함수 본문이 한줄이라면 { }와 return 제거 가능

// 1단계
const arrow = (name) => { return `Hello, ${name}`}

// 2단계
const arrow = name => { return `Hello, ${name}`}

// 3단계
const arrow = name = `Hello, ${name}`

화살표 함수 추가적 요소

• 인자가 없다면 ( ) 또는 _로 표시 가능
• object를 return한다면 return을 꼭 써야함
• return을 생략하고 싶다면 object를 소괄호로 감싸야함

// 화살표 함수
const arrowFun = () => {
    return 10
}
// 더 생략
const arrowFun2 = _ => 10	// _ ver
const arrowFun3 = () => 10	// () ver

 

 

 

# 콜백 함수(callback)

다른 함수의 인자로 전달되는 함수

const calculator = function(a, b, mathFunction) { 
    return mathFunction(a, b)
}

const add = function (a, b) {
    return a + b
}

const sub = function(a, b) {
    return a - b
}

console.log(calculator(5, 3, add))	// 8
console.log(calculator(5, 3, sub))	// 2
// 여기서 add와 sub가 callback함수

왜 씀?

→ 비동기 구현 시 필요함