Twilight

나머지 파라미터(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