자바스크립트 - 함수

함수

---

함수 선언문

자바스크립트는 코드 실행 전 초기화 단계에서 미리 함수 선언문을 모두 찾아서 선언+초기화한다.

그래서 함수 호출이 선언보다 앞에 와도 미리 찾아둔 함수 선언문을 보고 호출 가능하다. (호이스팅)

function show(val){
  console.log(val);
}
show('hi');
'hi'
show('bye');
'bye'


# return 명시하지 않아도 자동으로 return 들어감
# return 값이 없으면 undefined 반환
function show(){
  console.log('hihi');
}
a = showSomething();
console.log(a);
'undefined'


# 매개변수 디폴트 값 (매개변수 없을때 기본값으로 들어감)
function show(val="goodbye"){
  console.log(val);
}
show();
'goodbye'


# 전역변수/지역변수
let global_val = 'hihi'      (전역 변수 - 코드 전체에서 사용가능)

function showSomething(){
  const local_val = 'byebye' (지역 변수 - 함수 내에서만 사용가능)
  conoosle.log(global_val)
  console.log(local_val);
}

showSomething();
'hihi'
'byebye'

 

함수 표현식

익명함수, 즉시 실행 함수, 화살표 함수처럼 함수 자체가 식(Expression)이라서 변수에 할당가능한 함수를 뜻한다.

실제로 코드가 실행되어 내려오다가 함수 표현식에 도착하면 초기화 되어 그 이후 부터 호출이 가능함.

let val = function(){
  console.log('hi');
}

※ 비교

• 함수 선언문 : 호이스팅에 의해 선언+초기화 되어 어디서나 호출가능
• 함수 표현식 : 선언만 되고 실제로 코드에 도달해야 초기화 되어 호출가능

 

익명 함수

let add = function(a,b){ // 익명함수 (함수 이름이 없음)
  return a+b;
}

즉시 실행 함수

정의와 동시에 실행을 하는 함수. 일회성으로 호출하는 경우 사용.

(function(a,b){ // 즉시 실행 함수
  return a+b;
}(1,2));        // 마지막에 세미콜론

화살표 함수

ES6 버전부터 추가되었다. 익명 함수에서만 사용 가능하다.

1. 매개 변수 없는경우
   

   const hello = function(){  # 익명함수
     return "안녕"
   }
   
   # function 키워드 제거하고 => 추가
   const hello = () => { return "안녕" };
   
   # return + 중괄호를 제거 (내용이 1줄이라서 가능)
   const hello = () => "안녕";
   
   # 혹은 return + 중괄호를 괄호로 변경가능
   const hello = () => ("안녕");

2. 매개 변수 있는경우
   

   let sum = function(a,b){  # 익명함수
     return a+b;
   }
   
   # function 키워드 제거하고 => 추가
   let sum = (a,b) => { return a+b; }
   
   # return + 중괄호를 제거 (내용이 1줄이라서 가능)
   let add = (a,b) => a+b;
   
   # 혹은 return + 중괄호를 괄호로 변경가능
   let add = (a,b) => (a+b);

# 안되는 경우
let show = ()=>(         # return문이 한줄이지만 인수가 없어서 괄호 생략불가
  console.log('hi';
)
let add = (a,b)=>{       # return문이 여러줄이므로 괄호 사용불가
  const c = a+b;
  return c
}

 

생성자 함수

new 연산자로 함수를 호출하면 객체를 생성하여 반환해줌

new 를 안붙이면 그냥 함수를 호출.

function User(name, age){
  this.name=name;
  this.age=age;
  this.showInfo = function(){
    console.log(this.name);
}
let u1 = new User("bob",10);
let u2 = new User("jane",20);

new를 통해 함수를 호출하면 실제로는 아래와 같이 작동함.

function User(name, age){
  this = {}
  this.name=name;
  this.age=age;
  this.showInfo = function(){
    console.log(this.name);
  return this
}
let u1 = new User("bob",10);
let u2 = new User("jane",20);

 

함수 인수 전달

---

자바스크립트의 함수의 인수는 개수 제한이 없다.

function func(arg){
  ...
}
a()       이 경우에는 undefined 값이 들어간다.
a(1)
a(1,2,3)

 

arguments

함수에 주어진 인수들은 arguments라는 배열객체로 접근이 가능하다.

length, index접근은 가능하지만, 배열 내장 메서드(forEach, map)는 쓸 수 없다.

function func(arg){
  a = arguments.length();
  b = arguments[0];
  c = arguments[1];
}
func("1","2");

 

나머지 매개변수

arguments와 유사하게 배열객체로 접근이 가능하다.

배열 내장 메서드(forEach, map, reduce 등) 모두 사용가능하므로 나머지 매개변수를 사용하도록 하자.

function func(...args){
  args.forEach((num, index) => {
    ...
  });
}
func(1,2,3,4,5);

 

전개 구문

배열을 풀어서 나열한다.

# 배열
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let newArr1 = [...arr1, ...arr2];         a,b 합치기
let newArr2 = [0,...arr1, ...arr2,7,8,9]; 중간에 끼워넣기
let newArr3 = [...arr1]                   복제하기


# 객체
let user = {name:'bob', age:20};
let newUser = {...user};
let userList = {
  ...user,
  ...newUser,
}