Javascript/ES6

오퍼레이션

dongling 2024. 6. 12. 21:51
728x90
반응형

✅ 핵심요약

  • Operation
    • 프로퍼티 이름조합
      • 문자열과 변수 조합하여 프로퍼티 이름으로 사용 가능
    • Default Value
      • 값이 할당되지 않았을 때 사전에 정의한 값이 할당됨
    • Default 파라미터
      • 호출 받은 함수의 파라미터에 디폴트 값을 지정 가능
    • for-of
      • for-of 문은 이터러블 오브젝트를 반복하여 처리
        • 구문 : for ( variable of iterableObject ) { code.. }
    • 거듭 제곱 연산자 (**)
      • **은 Math.pow() 메소드와 같다

1. 프로터티 이름 조합

  • 문자열과 변수를 조합하여 오브젝트의 프로퍼티 이름으로 사용할 수 있다.
let sports = "tennis";
let item = {
	["one" + "two"]: 12,
	[sports]: 1,
	[sports + "Game"]: "윔블던",
	[sports + "Method"](){
		return this[sports];
	}
};

console.log(item.onetwo); // 12
console.log(item.tennis);  // 1
console.log(item.tennisGame); // 윔블던
console.log(item.tenisMethod());  // 1

let one = "sports";
let {[one]: value} = {sports: "농구"};

console.log(value); // 농구

🔸Default Value

  • 변수, 파라미터, 프로퍼티에 값이 할당되지 않을 때 사전에 정의한 값이 할당된다.
  • 변수, 파라미터, 프로퍼티가 항상 값을 갖게 된다.
  • 일반적으로 사용도니느 디폴트 값과는 차이가 있다.
  • let 변수를 선언하면 디폴트 값으로 undefined가 설정
  • 반면 여기의 디폴트 값(default value)은 let 변수를 선언하면서 값이 설정되지 않았을 때 할당될 값을 작성해 두는 형태
let [one, two.five = 5] = [1, 2];
console.log(five); // 5

[one, two, five = 5] = [1, 2, 77];
console.log(five); // 77

let [six, seven = 7] = {six: 6};
console.log(six, seven); // 6 7

let [one, two = one +1, five = two + 3] = [1];
console.log(one, two, five); // 1 2 5
//디폴트 값 적용 순서는 왼쪽에서 오른쪽.

🔸Default 파라미터

  • 호출 받은 함수의 파라미터에 디폴트 값을 작성할 수 있다.
  • 호출하는 함수에서 파라미터 값을 넘겨주지 않거나 undefined를 넘겨주면 디폴트 값이 적용됨
let plus = (one, two = 2) => one + two;
console.log(plus(1)); // 3
console.log(plus(1, undefined)); // 3
console.log(plus(1, 70));  // 71 

let getTotal = ([one, two] = [10, 20]) => one + two;
console.log(getTotal()); // 30

let getValue = ({two: value} = {two: 20}) => value;
console.log(getValue()); // 20

🔸for-of

  • 이터러블 오브젝트를 반복하여 처리함
  • 반복하는 것은 for-in문과 차이가 없지만 대상과 방법에 차이가 있음
  • 구문 : for ( variable of iterableObject ) { code.. }
  • 오브젝트의 프로퍼티를 구분할 수 있는 값이 variable변수에 설정됨
  • iterableObject에 이터러블 오브젝트를 지정
    1. Array 반복
    2. for (var value of [10, 20, 30]) { console.log(value); } // 10 // 20 // 30
    3. String 사용
    4. for (var value of "ABC") { console.log(value); } // A // B // C
    5. NodeList 반복 
      let nodes = document.querySelectorAll("li");
for (var value of nodes) {
	console.log(node.textContent);
}

// 첫번째
// 두번째
// 세번째
    6. <ul> <li>첫번째</li> <li>두번째</li> <li>세번째</li> </ul>
    7. 디스트럭처링
    8. let values = [ {item: "선물1", amount: {apple: 10, candy: 20}}, {item: "선물2", amount: {apple: 30, candy: 40}}, ]; for (var {item: one, amount: {apple: two, candy: five}} of values) { console.log(one, two, five); } // 선물1 10 20 // 선물2 30 40

🔸for-of와 for-in 차이

  • for-in 문의 대상은 Objet 오브젝트이며 열거 가능한 프로퍼티가 대상이다. 즉, 프로퍼티의 enumerable 속성 값이 false이면 반복에서 제외된다.
  • for-of 문의 대상은 이터러블 오브젝트이며 prototype에 연결된 프로퍼티는 대상이 아니다. 
    let values = [10, 20, 30];
Array.propotype.music = function() {
	return "음악"
};
Object.protoype.sports = function() {
	return "스포츠"
};
for(var key in values) {
	console.log(key, values[key])l
};
console.log("<<<for-of>>>");
for(var value of values) {
	console.log(value);
};

[실행결과]
0 10
1 20
2 30
music function(){return "음악"}
sports function(){return "스포츠"}
<<<for-of>>>
10
20
30
728x90
반응형