[ Javascript ] ECMAScript 6

ECMAScript 6

매개변수

기본 매개변수는 자주 사용되는 기술이기 때문에, ECMAScript6부터는 기본 매개변수를 쉽게 만들 수 있는 문법을 제공합니다.

 

ECMAScript6의 기본 매개변수 예

function test(a, b = 52, c = 273) {
    console.log(a + " : " + b + " : " + c);
}

test(1, 2); // 1 : 2 : 273

다만 이전 기본 매개변수처럼 순서가 정말 중요합니다. 매개변수를 입력하지 않으면 뒤에 있는 매개변수에 값이 입력되지 않으므로, 뒤에 있는 매개변수에만 사용합니다.

function(<매개변수>, <매개변수>, <매개변수> = <값>, <매개변수> = <값>) { }

 

---

 

화살표 함수

화살표 함수는 기존의 코드를 더 쉽게 사용할 수 있는 '문법의 추가'로 발전된 형태입니다.

 

익명함수를 사용할 때 아래처럼 사용을 했었는데 이를 간단하게 사용할 수 있는 것이 ECMAScript6에서 추가된 화살표 함수(Arrow Function)입니다.

// 익명함수
function() {}

// 화살표 함수
() => {}

하지만 완전히 차이가 없는 것은 아닙니다. 내부에서 사용하는 this키워드의 의미가 다르게 작용합니다.

• 익명 함수 : 함수 자체에 바인딩되어 있는 객체(window객체 또는 prototype객체가 될 수도 있습니다.)
• 화살표 함수 : 전역 객체(웹 브라우저 환경에서는 window객체)

 

화살표 함수를 사용할 때의 전제 조건

• prototype을 사용하지 않고, ECMAScript6에서 추가된 클래스를 사용할 때
• jQuery의 문서 객체 조작에서 this키워드가 아니라, event.currentTarget을 사용할 때

요약하면 'this키워드를 주의해서 사용하자'입니다. 함수 내부에서 this키워드를 사용하지 않는다면 완전하게 치환해서 사용해도 무방합니다.

:: 코드가 한줄이라면 중괄호를 생략해도 되며, return키워드를 사용하지 않아도 값을 리턴해줍니다.

 

화살표 함수 사용 예

const abc = (a, b) => a * b;

console.log(abc(1, 2)); // 2
console.log(abc(3, 4)); // 12

이런식으로 사용이 가능합니다.

 

---

 

함수에서의 전개 연산자

ECMAScript6에서 전개 연산자라는 것이 추가되었습니다. 마침표 3개 (...)를 찍어 표기하는 연산자입니다.

전개 연산자는 함수 또는 배열에 적용할 수 있습니다.

 

함수를 선언할 때의 전개 연산자

전개 연산자는 '가변 매개변수 함수'를 만들 때 사용합니다.

 

arguments객체 예

function test() {
    console.log(arguments[0]); // 1
    console.log(arguments[1]); // 2
    console.log(arguments[2]); // 3
}

test(1, 2, 3);

 

전개 연산자를 사용한 가변 매개변수 함수 예

function test(...number) {
    console.log(number[0]); // 1
    console.log(number[1]); // 2
    console.log(number[2]); // 3
}

test(1, 2, 3);

 

일반 매개변수와 전개 연산자 매개변수 조합 예

function test(a, b, ...number) {
    console.log(a); // 1
    console.log(b); // 2
    console.log(number); // 3, 4, 5, 6, 7, 8, 9
}

test(1, 2, 3, 4, 5, 6, 7, 8, 9);

전개 연산자를 사용한 매개변수를 앞에 붙여두면 어디까지가 가변 매개변수인지 명확하지 않기 때문에 '가장 뒤에 딱 하나만' 사용해야 합니다.

 

---

 

함수를 호출할 때의 전개 연산자

함수를 호출할 때도 전개 연산자를 사용할 수 있습니다.

 

기존 함수의 매개변수에 배열을 전개해 넣는 방법 예

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2, 3, 4];
test.apply(null, array); // 1 : 2 : 3 : 4

모든 함수에는 apply()메서드가 있습니다. apply()메서드는 첫 번째 매개변수로는 '함수 내부에서 활용할 this 키워드 객체', 두 번째 매개변수로는 '매개변수 배열'을 넣게 됩니다. 단, 첫 번째 매개변수를 잘못 사용하면 문제가 되는 경우도 많고, 코드의 가독성이 매우 떨어집니다.

 

그래서 ECMAScript6에서는 전개 연산자로 함수를 호출할 때 배열을 전개해서 넣을 수 있게 했습니다.

 

배열을 전개해서 매개변수로 전달하기

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2, 3, 4];
test(...array); // 1 : 2 : 3 : 4

그냥 매개변수를 전달할 때 배열 앞에 전개 연산자를 입력하면 됩니다.

 

전개 연산자를 활용한 함수 호출 활용 예

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2];
// 앞에 다른 매개변수를 넣고, 뒤를 배열로 채우기
test(263, 52, ...array); // 263 : 52 : 1 : 2

// 배열을 병합해서 매개변수로 전달하기
test(...array, ...array); // 1 : 2 : 1 : 2

전개 연산자를 사용하면 코드가 정말 단순해 집니다.