[코드잇 - 모던 자바스크립트] 03. 함수 다루기

1. 01. 함수를 만드는 방법 

함수 선언(function declaration)

: 가장 일반적인 방법, function 키워드를 통해 함수를 선언하는 방식

      

      

      

    
    

      <code />
    
// 함수 선언
function sayHi() {
  console.log('Hi!');
}

 

---

2. 03. 이름이 있는 함수 표현식 

함수 표현식 (function expression)

: 변수에 할당해서 함수를 선언

      

      

      

    
    

      <code />
    
// 함수 표현식
const sayHi = function () {
  console.log('Hi!');
};

 

---

3. 05. 값으로서 함수

- 자바스크립트에서 함수는 값으로 취급

      

      

      

    
    

      <code />
    
// 변수에 할당해서 활용
const printJS = function () {
  console.log('JavaScript');
};

// 객체의 메소드로 활용
const codeit = {
  printTitle: function () {
    console.log('Codeit');
  }
}

// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});

// 고차 함수로 활용
function myFunction() {
  return function () {
    console.log('Hi!?');
  };
};

---

4. 07. Parameter

- 자바스립트에서 함수의 파라미터는 기본값을 가질 수 있음

- 기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 동작은 이 파라미터의 기본값을 가지고 동작

      

      

      

    
    

      <code />
    
function sayHi(name = 'Codeit') {
  console.log(`Hi! ${name}`);
}

sayHi('JavaScript'); // Hi! JavaScript
sayHi(); // Hi! Codeit

---

5. 09. arguments

arguments 객체

  : 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체

- 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용

- arguments 객체를 활용하고자 한다면 함수 안에서 사용할 파라미터나 변수, 함수의 이름을 arguments라고 짓는 것은 피해야 함

      

      

      

    
    

      <code />
    
function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

Rest Parameter

- 파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있음

- arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는 반면, rest parameter는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있음

      

      

      

    
    

      <code />
    
function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg); 
  }
}

printArguments('Young', 'Mark', 'Koby');

- rest parameter는 다른 일반 파라미터들과 함께 사용될 수 있음

      

      

      

    
    

      <code />
    
function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

- 앞에 정의된 파라미터에 argument를 먼저 할당하고 나머지 argument를 배열로 묶는 역할

- 일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성해야 함

---

6. 10. 줄임말 대잔치

      

      

      

    
    

      <javascript />
    
function firstWords() {
  let word = '';

  for(i = 0; i<arguments.length; i++){
    word +=arguments[i][0];
  }

  console.log(word);
}

firstWords('나만', '없어', '고양이');
firstWords('아니', '바나나말고', '라면먹어');
firstWords('만두', '반으로', '잘라먹네', '부지런하다');
firstWords('결국', '자바스크립트가', '해피한', '지름길');
firstWords('빨간색', '주황색', '노란색', '초록색', '파란색', '남색', '보라색');

---

7. 12. 1세대는 거르는게 답?

      

      

      

    
    

      <javascript />
    
function ignoreFirst(...rest){
  rest.shift();
  for(i of rest){
    console.log(i);
  }
}
ignoreFirst('1세대', '2세대', '3세대');
ignoreFirst('곰팡이', '강아지', '고양이');
ignoreFirst(20, 9, 18, 19, 30, 34, 40);

      

      

      

    
    

      <javascript />
    
function ignoreFirst(first,...rest){
  for(i of rest){
    console.log(i);
  }
}
ignoreFirst('1세대', '2세대', '3세대');
ignoreFirst('곰팡이', '강아지', '고양이');
ignoreFirst(20, 9, 18, 19, 30, 34, 40);

---

8. 13. Arrow Function

arrow function

: 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식

- 표현식으로 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있음

- arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다름

      

      

      

    
    

      <code />
    
// 화살표 함수 정의
const getTwice = (number) => {
  return number * 2;
};

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

- 화살표 함수는 다양한 상황에 따라 축약형으로 작성

      

      

      

    
    

      <code />
    
// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
};

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

---

9. 15. what is this?

- 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 됨

- 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 됨

      

      

      

    
    

      <code />
    
const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 

---

10. 16. this 익히기

      

      

      

    
    

      <javascript />
    
function printThisTitle() {
  console.log(this.title);
}

const courseA = {
  title: '프로그래밍 기초 in JavaScript',
  printTitle: printThisTitle,
};

const courseB = {
  title: '컴퓨터 개론',
  printTitle: courseA.printTitle,
};

const courseC = {
  title: '웹 퍼블리싱',
  printTitle: courseB.printTitle,
};

courseA.printTitle(); // 프로그래밍 기초 in JavaScript
courseB.printTitle(); // 컴퓨터 개론
courseC.printTitle(); // 웹 퍼블리싱