[ES6] 기본 문법 (2)

1. 반복문

1) for - in

for - in 반복문은 객체의 키 값에 만 접근이 가능하다.

let array = [ 10, 20, 30, 40 ];

for(let val in array) {
    console.log(val);  // key
    console.log(array[val]); // value
}

2) for - of

for -of 반복문은 객체의 value에 접근이 가능하다.

let array = [ 10, 20, 30, 40 ];

for(let val of array) {
    console.log(val); 
}

단, 모든 객체를 상대로 사용이 가능하지는 않다. value 값이 생기면 key가 생기는 배열같은 객체만 가능하다. 즉, key와 value가 동시에 지정된 배열에는 사용이 불가능하다. 이럴 경우에는 for - in 반복문을 사용하는 것이 옳다.

let obj = {
    a: 1,
    b: 2,
    c: 3
}


for(let val of obj) {
    console.log(val); 
}

 

 

 

2. Rest Operator

Rest Operator는 인자 앞에 '...' 문자열이 붙는, 모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법이다. 예를 들어, 인자의 수가 정해진 함수를 선언하고, 인자의 수를 넘게 입력하여 함수를 호출하게 될 경우에, 모든 값이 출력이 되지 않는다.

function printNums(num1, num2) {
    console.log(num1, num2);
}

printNums(1,2,3,4,5);


----------------------
1 2
----------------------

함수의 모든 인수를 포함하는 객체인 arguments를 사용할 경우에는 모든 값이 해당 객체에 담겨진다.

function printNums(num1, num2) {
    console.log(arguments);
}

printNums(1,2,3,4,5);


----------------------
[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
----------------------

만약 인자에 Rest Operation을 적용할 경우, 적용한 인자에 나머지 모든 값이 들어가게 된다.

function printNums(num1, ...num2) {
    console.log(num1, num2);
}

printNums(1,2,3,4,5);


----------------------
1 [ 2, 3, 4, 5 ]
----------------------

 

 

 

3. Spread Operator

Spread Operator가 사용되는 가장 큰 특징은 크게 두가지가 있다.

• 배열의 요소를 apply 메서드의 사용없이 함수의 인자로 사용할 수 있다. (1)
• 함수를 호출할 때 사용하기 때문에 인자의 중간에 사용이 가능하다. (2)
• 이미 존재하는 배열을 새로운 배열의 요소로 손쉽게 넣을 수 있다. (3)
• 원본 값에 영향을 주지 않도록 배열을 복사 할 수 있다. (4)
• 이미 존재하는 객체의 요소를 새로운 객체의 요소로 넣을 수 있다. (5)

 

(1)

function sum (x, y, z) {
    return x+y+z;
}

console.log(sum(1,2,3));

let arr = [ 10, 20, 30 ];

console.log(sum(arr));  // undefined
console.log(sum.apply(null, arr));  // apply()
console.log(sum(...arr));  // Spread Operator


----------------------
6
10,20,30undefinedundefined
60
----------------------

(2)

function sum (a, b, c, d, e) {
    return a+b+c+d+e;
}

let arr = [ 20, 30 ];

console.log(sum(10, ...arr, 40, 50));


----------------------
150
----------------------

(3)

let face = [ 'eyes', 'nose', 'mouth'];
let head = [ 'hair', ...face, 'ears'];

console.log(head);


----------------------
[ 'hair', 'eyes', 'nose', 'mouth', 'ears' ]
----------------------

 

(4)

let array = [ 1, 2, 3 ];
let arrayCopy1 = array;  // 원본 배열 삽입
let arrayCopy2 = [ ...array ]; // Spread Operator

arrayCopy1.push(4);
console.log(arrayCopy1);  // 원본 배열에도 영향
console.log(arrayCopy2);  // 원본 배열에 영향을 미치지 않음
console.log(array);


----------------------
[ 1, 2, 3, 4 ]
[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]
----------------------

(5)

let drinks = {
    coffee: 'latte',
    coca: 'cola'
}

let newDrinks1 = {
    lemon: 'tea',
    orange: 'juice',
    drinks
}

let newDrinks2 = {
    lemon: 'tea',
    orange: 'juice',
    ...drinks
}

console.log(newDrinks1);
console.log(newDrinks2);


----------------------
{ lemon: 'tea',
  orange: 'juice',
  drinks: { coffee: 'latte', coca: 'cola' } }
  
{ lemon: 'tea', orange: 'juice', coffee: 'latte', coca: 'cola' }
----------------------