[SeSAC] 웹 풀스택 과정_JavaScript 함수와 메서드

지난 수업시간에 이어서 자바스크립트의 함수, 메서드, 조건문, 반복문, DOM (Document Object Model)에 대해서 개념을 학습하고 실습을 해볼 수 있는 시간이었습니다. 그중 가장 재밌었던?? 함수와 메서드에 대해서 간략하게 정리하는 것으로 2주 차 회고를 작성하겠습니다.

 

자바스크립트에서 함수와 메서드

자바스크립트에서 메서드와 함수의 의미는 다릅니다. 메서드는 사용자가 정의한 객체의 프로퍼티가 함수인 경우입니다. 즉, 객체는 키와 밸류로 이루어진 프로퍼티를 가지고 있고, 프로퍼티가 함수인 경우 메서드입니다.

 - 함수 호출 시 : 함수()

 - 메서드 호출시 : 객체.메서드()

 - function 함수명 (){} 일 때 함수명을 쓰지 않고 사용했을 때 이 함수는 익명함수입니다.

 

1. 함수 선언 방식

1. 함수 선언식(Function Declaration)

호이스팅이 발생합니다.

function 함수명 (매개변수){
   실행문
}

2. 함수 표현식(Function Expression)

변수를 사용. 익명함수처럼 함수명 없이 작성합니다.

let myFunc = function (매개변수) {
    실행문
}

2-1. 화살표 함수

함수 표현식 작성방법 중 한 가지입니다. function과 result 가 생략되고 화살표가 들어갑니다.

그리고, return을 생략할 수 있습니다. 따라서 아래 두 함수 코드는 같은 의미를 가집니다.

let myFunc1 => (a, b) {
    return a + b;
}

// return 생략 case
let myFunc2 =(a, b) => a + b;

 

2. 메서드

 

메서드는 사용자가 정의한 객체의 프로퍼티가 함수인 경우인데, 객체란 키와 밸류로 구성된 프로퍼티의 집합입니다.
메서드를 만들어보기 전에 객체를 생성합니다.

// 객체
let me = {
  name: 'tgkim', // 이 한줄은 프로퍼티, 프로퍼티는 키('name')와 밸류('tgkim')로 이루어짐
  gender: 'm',
  age: '31',
};

// 이런식의 객체 생성 방식을 '객체 리터럴' 이라고 합니다.

 

달린다는 의미의 run() 함수를 만들고 객체 me의 프로퍼티에 할당해 주겠습니다. 

// 객체
let me = {
  name: 'tgkim',
  gender: 'm',
  age: '31',
};

// 함수를 만들고 객체 프로퍼티에 함수를 할당
me.run = function () {
  alert("열심히 뜁니다!");
}

// 메서드를 실행
me.run(); // 열심히 뜁니다.

 

me객체의 프로퍼티에 할당된 run함수가 메서드입니다. 즉, run 이 메서드입니다.

 

 

이미 정의된 함수를 메서드로 등록할 수도 있습니다.

let me = {
  name: 'tgkim',
  gender: 'm',
  age: '31',
};

function run() {
  alert("열심히 뜁니다!");
}

// 메서드로 등록
me.run = run;

me.run(); // 열심히 뜁니다!

 

객체 리터럴 안에서 메서드를 선언할 수 있습니다.

let me1 = {
    run: function () {
        alert("열심히 뜁니다!");
    }
};

// 동일하게 동작하는 다른 작성방식
let me2 = {
    run() {
        alert("열심히 뜁니다!");
    }
}

 

메서드 내부에 this를 사용해서 객체의 다른 프로퍼티를 사용할 수 있습니다.

let me = {
    name: 'tgkim',
    gender: 'm',
    age: '31',
};

me.run = function () {
    alert(this.name);
}

me.run(); // tgkim

 

 

서로 다른 객체에서 같은 함수를 사용할 경우 함수내부에서 this를 사용하면, this는 호출되는 객체에 따라 달라집니다.

let me = {name: 'tgkim'};
let you = {name: 'jpark'};

function myNameIs() {
    alert(this.name);
}

me.myNameIs = myNameIs;
you.myNameIs = myNameIs;

me.myNameIs(); // tgkim
you.myNameIs(); // jpark

 

3. 표준 내장 객체

위에서 직접 연습해 본 내용은 객체를 생성하고 객체내부 프로퍼티에 메서드를 만드는 것이었습니다. 그런데 이렇게 객체를 직접 만들고 메서드를 직접 만들지 않더라도 사용할 수 있는 객체와 메서드가 있습니다. 바로 내장 객체입니다. 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며 많은 내장객체들이 존재합니다. 또, 그 안에는 많은 메서드와 속성들이 있을 것이고 우리는 제공되는 기능? 들을 전부 사용할 수 있습니다. 

 

예를 들어 날짜를 나타내는 객체인 Date에는 현지 시간 기준 요일(0–6)을 반환하는 Date.prototype.getDay() 같은 메서드도 있습니다. 0이 무슨 요일을 나타내는지와 같은 것들은 문서에서 직접 찾아보기 쉽게 제공됩니다.(0은 일요일이에요)

또, 문자열의 문자가 몇 개인지, 문자열을 어떻게 나눌 것인지 등등 기능을 제공하는 메서드, 속성들이 있습니다.

 

이렇게 직접 만들지 않더라도 브라우저에서 제공되는 객체들을 내장객체라고 합니다. 

 

표준 내장 객체 정보를 확인할수 있는 MDN 사이트 링크.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects