JavaScript 함수

• undefined

 

※ NULL과 undefined은 무엇이 다른가?

    undefined -> 변수를 선언만 하고 값을 할당하지 않음.

즉, 자료형이 결정되지 않은 상태이다.

(선언하지 않은 변수도 콘솔이나 기타 메세지에는 undefined라고 뜨지만,

undefined라는 값을 가지는 것은 아니다.) 

null -> 변수를 선언하고, 'null'이라는 빈 값을 할당한 경우이다.

(이 '빈 값'의 경우 자료형에 따라 여러가지가 있지만,

null은 객체형 데이터-ex: array, object-의 빈 값을 의미한다.

문자열(string)의 경우 "'', 숫자(number)의 경우 0이 빈값이고,

이들 빈값 모두는 if문에서 false로 형변환된다.)

 

다시말해서, undefined는 자료형이 결정되지 않은 변수이고,

null은 자료형은 객체인데, 비어있는 변수이다.

출처: https://enarastudent.tistory.com/entry/null과-undefined의-차이 [Coding Story]

 

• 매개변수의 개수

 

자바스크립트는 인자와 파라미터의 숫자가 달라도, 함수 실행에서 오류가 발생하지 않는다.

 

• 함수선언식과 함수표현식

 

함수명을 통해 함수를 선언하고, 사용하는 방식

 

 

함수를 선언한 변수에 담아서, 사용하는 방식

 

• 호이스팅(hoist : 끌어올리다)

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언

함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라 함

 

출처 : https://www.edwith.org/boostcourse-web/lecture/16695

 

자바스크립트는 실행시 선언한 변수, 함수는 실행전에 끌어올리지만, 할당된 값!!은 끌어올리지 않는다.

 

 

var inner가 console.log를 실행하기전에, 이미 위에서 함수값이 할당 되어있기 때문에 문제가 없다.

 

 

그러나 inner를 함수값을 할당하기 전에 함수로 호출하면,
hoisting으로 끌어올려진 inner는 함수가 아니라 var inner라는 변수일 뿐이므로

(할당된 값인 함수는 hoisting으로 끌어올려지지 않음)

inner는 함수가 아니라는 에러메시지가 발생한다. 

 

 

inner를 함수표현식에서 함수선언식으로 바꾸면, 아래에 있어도 hoisting으로 인하여

선언된 함수로 끌어올려져서 문제없이 실행됨 

 

• 함수의 반환값

함수에 return 값을 지정하지 않는다면 undefined를 반환한다.

(java와같이 void와 같은 return 형식을 지정해줄 필요가 없다.)

 

 

• arguments 객체- 들어온 인자수를 체크하는 정도로 사용하는 것이 좋음
  (파라미터에서 파악이 어려우므로, 의도를 알수 없고 수정되면 혼선이 올 수 있음)

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성됩니다.

 

arguments의 타입은 객체 입니다.(console.log( typeof arguments) 로 확인해보세요!)

 

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다.

 

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수가 있습니다.

 

arguments는 배열타입은 아닙니다.

 

따라서 배열의 메서드를 사용할 수가 없습니다.

 

출처 : https://www.edwith.org/boostcourse-web/lecture/16695

 

 

함수내에 지역변수를 따로 선언할 필요없이, 들어온 인자값을 자동으로 생성된 arguments가 받음

(파라미터도 써줄 필요가 없음)

 

• arrow function

ES6부터 추가된 함수를 선언하는 문법

 

 

const add1 = (a , b) => {

  return a + b;

} 

const sum1 = add1(1, 2);

console.log(sum1);

// 3. 에로우(return 생략)

const add2 = (a, b) => a + b;

const sum2 = add2(1, 2);

console.log(sum2);

 

• 백틱(``)

"+" 기호를 사용하지 않고 문자열 사이에 파라미터의 값을 넣어줄 수 있음( ${값} )

const ironMan = {
  name : 'toni',
  actor : 'robert',
  alias_name : 'ironMan'
}

function desc(hero) {
  console.log(`아이언 맨 주인공의 이름은 ${hero.name}이고 배우는 ${hero.actor}이며 닉네임은 ${hero.alias_name}입니다`);
}

// 아이언 맨 주인공의 이름은 toni이고 배우는 robert이며 닉네임은 ironMan입니다
console.log(desc(ironMan));