Twilight

화살표 함수(Arrow Function)

ES6이전에는 함수를 선언하기 위해 function이라는 키워드를 썼었는대요, 하지만 ES6 이후에는 새롭고 간결하게 함수를 선언하는 화살표 함수가 등장했습니다.

화살표 함수(Arrow Function)는 function 키워드를 사용하지 않고 화살표(=>) 기호를 사용해서 함수를 선언합니다. 익명 함수(Anonymous Function)를 보다 간결하게 표현하여 가독성이 좋아지는 효과가 있습니다.

//General Function
const general1 = function() {
  console.log('Hello')
}

const general2 = function(x,y) {
  return console.log(x+y);
}

//Arrow Function
const arrow1 = () => console.log('Hello')
const arrow2 = (x,y) => console.log(x+y);

general1(); // Hello
general2(3,2); // 5
arrow1(); // Hello
arrow2(3,2);// 5

위와 같이 일반 함수는 여러 줄을 설명하는 반면에 Arrow Function은 한 줄로 표현이 가능한 것을 알 수 있어요.

또한 함수의 파라미터가 하나일 경우에 소괄호() 생략이 가능합니다.

const arrow2 = x => console.log(x);
arrow2(3);// 3

화살표 함수가 일반적인 함수보다 가독성이 좋고 심플하여 많이 사용됩니다. 그럼 왜? 일반 함수는 앞으로 안 쓰고 화살표 함수만 쓰면 좋은 거 아닌가? 하는 생각이 들 겁니다. 그러나 화살표 함수를 사용할 때는 다음과 같은 제약들을 기억해 두어야 합니다.

화살표 함수 사용 주의점

• 화살표 함수는 익명 함수 표현식만 사용 가능합니다.
• 객체의 메소드나 생성자 함수로는 사용이 불가능합니다.
• 객체를 반환할 때는 소괄호로 감싸줘야한다.

화살표 함수에서의 this는 상위 환경의 객체(여기서는 전역 객체)를 가리키고 있기 때문에, 객체의 메서드로 사용하는 경우에는 this가 예상한 대로 동작하지 않을 수 있습니다. 

const game = {
name: 'LOL',
play: () => console.log(${this.name} 시작!), 
// this가 상위 환경의 객체를 가르키기 때문에 예상한 대로 동작하지 않음
};

game.play(); // undefined

또한 화살표 함수는 생성자 함수로 사용할 수 없습니다.

const Arrow = () => {};
const arrow = new Arrow(); // TypeError: Arrow is not a constructor

위와 같은 제약사항이 있기 때문에, 상황에 따라 일반 함수와 화살표 함수를 적절히 사용해야 합니다.

나머지 파라미터(Rest Parameter)

자바 스크립트에는 arguments라는 객체가 존재하는데 ES6이후 arguments 객체의 단점(유사 배열)을 보안하여 사용된 게 나머지 파라미터(Rest parameter)입니다. 나머지 파라미터는 불규칙한 개수의 파라미터를 받을 때 사용되고, 또한 arguments와 다르게 배열로서 사용되기 때문에 배열의 메서드를 모두 사용할 수 있습니다.

function rParameter(first, second, ...args) {
  console.log(`첫번째 파라메터: ${first}`);
  console.log(`두번째 파라메터: ${second}`);
  for (const arg of args) {
    console.log(`나머지 파라메터: ${arg}`);
  }
}

rParameter('한자','영자','글자','숫자','남자','여자');
//첫번째 파라메터: 한자
//두번째 파라메터: 영자
//나머지 파라메터: 글자
//나머지 파라메터: 숫자
//나머지 파라메터: 남자 
//나머지 파라메터: 여자

이처럼 나머지 파라미터는 파라미터에 점을 3개(...)을 붙여서 사용합니다. 그리고 앞서 정의된 파라미터에 argument(함수의 인자)를 할당하고 나머지 argument를 배열로 묶는 역할을 하기 때문에 가장 마지막에 정의되어야 합니다.

Reference

Codeit 모던 자바 스크립트 - https://www.codeit.kr/topics/modern-javascript

병합 연산자(Nullish coalescing operator)

??를 사용해서 null 혹은 undefined 값을 가려내는 연산자입니다.

const nco1 = undefined ?? 'Name';
const nco2 = 'is' ?? 'code';
const nco3 = null ?? 'recorder';

console.log(nco1,nco2,nco3); // Name is recorder

OR 연산자(||)와 비슷하게 동작하는 것처럼 보이지만, 1항에 false 값이 있으면 병합 연산자는 false값을 리턴하고 OR 연산자는 false가 아닌 값을 리턴하게 된다는 것을 기억해 두어야 합니다.

const or = false || 'not false';
const nco = false ?? 'not false';

console.log(`${or} | ${nco}`); // not false | false

Reference

Codeit 모던 자바 스크립트 - https://www.codeit.kr/topics/modern-javascript

모던 자바 스크립트란?

ES6(ECMAScript 2015) 이후에 나온 자바 스크립트 기술을 활용하여 개발하는 방식을 말합니다. 2015년을 기점으로 여러 변화가 있어 개발자들 사이에서 ES6+로 자주 표현됩니다. 그러나 정식 명칭은 연호를 사용해서 ECMA2015,2016,...으로 사용해요. 실무에서는 대부분 이를 사용하기 때문에 숙지하고 있는 게 좋겠죠?

변수 선언(Variable Declaration)

var - ES6 이전에 사용하던 변수 선언 방식으로, 함수 스코프, 호이스팅 등의 특징을 가집니다. var는 중복 선언이 가능하고 함수 스코프의 성질을 가지고 있어 여러 문제를 발생시켜요. 대표적으로 if와 for 문에서 에러가 발생하기 쉬워 최근에는 사용되지 않고 있는 추세예요.

함수 스코프 (function-scope)- 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 합니다. (함수스코프 코드)

호이스팅(hoisting) - 코드가 실행되기 전 함수/변수 선언이 스코프의 최상단으로 이동하는 것

console.log(a,b); // undefined, undefined

var a = 'Hello World';

console.log(a); // Hello World

var a = '중복선언';

console.log(a); // 중복선언

var b = '호이스팅';

console.log(b); // 호이스팅

위의 예시에서 보았듯이 첫 줄에서 a, b 변수를 호출했지만 호이스팅으로 인해 스코프 내부의 최상단으로 이동해 Error가 아닌 undefined가 출력됨을 알 수 있습니다. 또한 a 변수를 두 번 선언했음에도 출력이 문제없이 일어납니다.

let과 const - ES6 이후에 사용하는 변수 선언 방식으로 현재까지도 사용되고 있습니다! 블록 스코프 특징을 가지고 중복 선언이 불가능합니다.

블록 스코프 - 함수 스코프가 함수를 기준으로 스코프를 만드는 방식이었다면 블록 스코프는 블록({}) 내부를 기준으로 스코프를 만듭니다.

//중복선언 불가능
let a = 0;
let a = 10;
console.log(a); // Uncaught SyntaxError

마무리

틀린 점 지적은 언제나 환영합니다!

Reference

Codeit 모던 자바 스크립트 - https://www.codeit.kr/topics/modern-javascript