변수(variable)

변수를 할당하기 위해서는 전통적으로 var를 사용해 왔지만 ES6 이후, let과 const로 좀 더 세분화하여 사용하기 시작했다.

var

var myName = "Euna";
console.log(myName);

myName = "BTS";
console.log(myName);

//결과
//"Euna"
//"BTS"

let

let myName = "Euna";
console.log(myName);

myName = "BTS";
console.log(myName);

//결과
//"Euna"
//"BTS"

const

const myName = "Euna";
console.log(myName);

const yourName = "BTS";
console.log(yourName);

myName = "RM";
console.log(myName);

//결과
//"Euna"
//"BTS"
//⚠️에러 발생!!

const는 상수! 한 번만 정의할 수 있다.

화살표 함수(Arrow Functions)

ES6 이후 자바스크립트에서 함수를 생성하는 구문으로 화살표 함수가 추가되었다.

//일반적으로 함수를 생성하는 방법
function myFnc(){
  ...
};

//화살표 함수를 사용하여 함수를 생성하는 방법
const myFnc = () => {
  ...
};

화살표 함수의 특징

• const가 선언되고 오른쪽에 등호와 화살표가 있다.
• 화살표 함수의 구문은 function이라는 키워드를 생략해서 일반적인 펑션 함수보다 짧다.
• 자바스크립트가 가진 this로 인해 생겼던 많은 문제를 해결해주는 장점을 가진다.
  • this를 사용하면 항상 원하는 객체를 참조하지는 않아서 이슈가 많이 발생하는데, 화살표 함수 안에 이 this를 사용하면 항상 정의한 객체를 나타내고, 실행 중에 갑자기 바뀌지 않는다.

함수 정리

//✅ 일반 함수
function printMyName(name){
  console.log(name);
};

printMyName("Euna");


//✅ 화살표 함수를 만들기 위해서는 const(상수)에 printYourName이라는 이름을 정의하면 된다.
const printYourName = (name) => {
  console.log(name);
};

printYourName("BTS");


//📚 화살표 함수에서 인수를 하나만 받는 경우: 주변 () 괄호는 생략할 수 있다.
  const printOneArg = name => {
    console.log(name);
  };

printYourName("one");

//📚 많은 경우 함수는 뭔가를 반환하는데, return 키워드를 사용하여 반환하면 된다.
const multify = (number) => {
  return number * 2;
}

console.log(multify(2));

/*👆 이 경우 함수의 본문에서 하는 일은 반환(return)뿐,
다른 코드가 없기 때문에 중괄호를 생략하고 코드를 한줄로 작성할 수 있다.
*/

//📚 코드를 한줄로 표현할 때는 return 키워드는 제거하고 작성한다.
const multify2 = number => number * 2;

console.log(multify2(1));