[JavaScirpt] 자바스크립트 기초 정리 - 함수선언, 파라미터, 아규먼트, 애로우 함수, this ...

자바스크립트 (JavaScirpt) 기초 정리

함수선언 , 파라미터, 아규먼트, 화살표함수, This 개념

 

---

JavaScript 란?

자바스크립트는 객체(Object) 기반의 스크립트 언어이다.

스크립트 언어란, 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어이다. 

 

자바스크립트 외에도 

제이쿼리(jQuery), PHP, 파이썬(Python), 루비(Ruby) 등이 스크립트 언어에 해당한다!

이외에도 더 많은 스크립트 언어가 존재한다.

 

 

객체 지향 언어란,

객체 지향 언어를 사용해 프로그래밍을 하게 되면, 

다수의 ‘객체’를 생성해 그 객체들이 서로 상호작용하며 프로그램을 구축하게 된다.

 

예를 들면, 우리의 몸을 구성하는 팔, 손, 목, 가슴, 배, 허리, 엉덩이, 허벅지, 무릎, 종아리, 발 등의 객체를 생성하는데,

그렇게 되면 우리는 ‘몸을 움직여 피아노를 쳐라’라고 하기보다는 

‘손목은 가만히 있고 팔만 자연스럽게 움직여서 피아노를 쳐라’라는 

세부적인 명령을 통해 피아노를 올바른 자세로 칠 수 있게 된다!

 

객체 지향 언어를 사용해 프로그래밍을 하면

1. 프로그램을 구동하는 시간을 단축

2. 에러가 나더라도 그 부분만 수정하면 되기 때문에 보다 효율적

 

이러한 장점을 가지고 있다.

 

---

 

자바스크립트에서 함수는 다양한 방식으로 선언할 수 있는데,

 

1. 함수 선언 (function declaration)

가장 일반적인 방법은 function 키워드를 통해 함수를 선언하는 방식이다.

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

이러한 방식을 함수 선언(function declaration)이라고 한다.
 
 

2. 함수 표현식 (function expression)

자바스크립트에서 함수는 값으로 취급될 수도 있기 때문에, 변수에 할당해서 함수를 선언할 수 있다.

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

 이러한 방식으로 함수를 값으로 다루는 방식을 함수 표현식 (function expression)이라고 한다.

 

---

파라미터의 기본값

자바스립트에서 함수의 파라미터는 기본값을 가질 수가 있는데,
기본값이 있는 파라미터는 함수를 호출할 때 아규먼트(인자)를 전달하지 않으면,
함수 내부의 동작은 이 파라미터의 기본값을 가지고 동작하게 된다.

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

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

---

arguments 객체

자바스크립트 함수 안에는 arguments(아규먼트, 인자)라는 객체가 존재한다.
arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체인데
특히, 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용할 수 있다.

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

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

 

---

Rest Parameter

arguments 객체를 이용하는 것 말고도 불규칙적으로 전달되는 아규먼트를 다루는 방법이 있는데,
파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있게 된다.
그리고 arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없는 반면,
rest parameter는 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있다는 장점이 있다.

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

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

 

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를 배열로 묶는 역할을 하기 때문에
일반 파라미터와 함께 사용할 때는 반드시 가장 마지막에 작성해야 한다 ! 

 

---

화살표 함수 (Arrow Function)

 

화살표 함수(Arrow function)는 익명 함수를 좀 더 간결하게 표현할 수 있는 함수 선언 방식이다.
 
아래 코드와 같이 표현식으로 함수를 정의할 때 활용될 수도 있고, 콜백 함수로 전달할 때 활용할 수도 있다.

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

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

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

// 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;

화살표 함수는 일반 함수와 몇 가지 차이점이 있는데 
arguments 객체가 없고, this가 가리키는 값이 일반 함수와 다르다는 점이다.
화살표 함수를 사용할 땐 이런 부분을 잘 고려해야 된다 !

 

---

this

웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 됩니다.
하지만 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 된다

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

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체