[2주차 JS 문법] ES6 문법, 일급 객체, Map, Set

1. ES6 문법

// ES6
// (1) 2015년도 이전 => var, let(변수), const(함수)

// (2) arrow function
// (3) 삼항 연산자: 조건 ? 이거 : 저거

//////////////////////////////////////////////////////////////////////////////////
// 구조분해할당: destructuring
// 배열, 객체 속성
/////////////////////////////////////////////////////////////////////////////////

// (1) 배열의 경우
let [value1, value2, value3] = [1, "new"];

console.log(value1, value3); //1 undefined

let arr = ["e", "4", "sd"];
let [a, b, c, d = 4] = arr;

console.log(a, b, c, d); //e 4 sd 4

// (2) 객체인 경우
let { name, age } = {
  name: "ji",
  age: 20,
};

console.log(name, age); //각각 지정된 변수로 값 추출 가능
// ji 20

let person = {
  name: "나니",
  age: 30,
};

let { name: newName, age: newAge, birthday = "521" } = person;

console.log(newName, newAge, birthday);
// 나니 30 521

///////////////////////////////////////////////////////////////////////////
// 단축 속성명: 객체 만들때 key와 value 값이 같으면, 생략해서 사용가능
///////////////////////////////////////////////////////////////////


const nickname = "두";
const gender = "여";

// person2 = {
//   nickname: nickname,
//   gender: gender
// }
person2 = { nickname, gender };

console.log(person2); //{ nickname: '두', gender: '여' }

////////////////////////////////////////////////////////
//전개 구문 = spread operator
// destructuring과 같이 사용되는 es6 문법 중 하나
//////////////////////////////////////////////////////

let num = [1, 2, 3]

console.log(num) //[1, 2, 3]

console.log(...num) //1, 2, 3

/////////////////////////////////////////////
//나머지 매개변수(rest parameter) : ...arg
///////////////////////////////////////////

function test(a, b, c, ...args) {
  //이런 식으로 매개변수가 얼만큼 들어올지 모를 때 ...args 사용해서 매개변수 받을 수 있음
  console.log(a, b, c, ...args)
  console.log(args) //배열형태로 출력
}

test(1, 2, 3, 4, 5, 6, 7, 8)
//1,2,3,4,5,6,7,8
//[ 4, 5, 6, 7, 8 ]


///////////////////////////
//템플릿 리터럴
////////////////////////////
// 백텍 사용해서 멀티 라인도 구현 가능.

console.log(`안녕하세요 저는 ${person2.nickname}입니다.
   
  > . <
  
    제 나이는 ${20+50}입니다.
  `)

  /*
안녕하세요 저는 두입니다.

  > . <

    제 나이는 70입니다.
  */

/////////////////////////////////////////
//named export vs default export
/////////////////////////////////////

//(1) default export
// default export는 모듈에서 하나의 기본 값을 내보낼 때 사용합니다. 이 방식은 모듈에서 단 하나의 값만 내보낼 수 있으며, 이름 없이 내보낼 수 있어 가져올 때 자유롭게 이름을 지정할 수 있습니다


//(2) named export
// named export는 하나의 모듈에서 여러 항목을 내보낼 수 있습니다. 내보낼 항목들을 이름으로 구분하여 필요할 때 해당 이름을 사용하여 가져옵니다.
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

2. 일급 객체로서의 함수

// 일급 객체로서의 함수
// 자바스크립트에서 함수는 일급객체(first-class object)라고 함.
// 즉, 함수를 객체처럼 다룰 수 있다는 뜻.

// (1) 변수에 함수를 할당
// 함수는 변수에 할당할 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.
const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

// (2) 함수를 인자로 다른 함수에 전달
// 함수는 다른 함수에 인자로 전달될 수 있습니다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있습니다.
// 콜백(callback)이나 고차 함수(higher - order function) 작성 시 사용
// 콜백 함수: 어떤 함수의 매개변수로 쓰이는 함수
// 고차 함수: 함수를 인자로 받거나 함수를 리턴하는 함수

function callFunction(func) {
  func(); //함수를 매개변수로 받고, 그대로 실행함
}
// callFunction이 고차함수, 여기서 sayHello가 콜백 함수

callFunction(sayHello); // "Hello!" 출력

// (3) 함수를 반환
// 함수는 다른 함수에서 반환될 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다.
// 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용합니다.

// factory 함수: 새로운 객체 또는 함수를 생성하여 반환하는 함수입니다. 이름에서 알 수 있듯이 "공장"처럼 동작하며, 매번 호출될 때마다 새 객체나 함수 인스턴스를 반환합니다.
function createPerson(name, age) {
    return {
        name: name,
        age: age,
        introduce: function() {
            console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
        }
    };
}

const person1 = createPerson('Alice', 25);
person1.introduce(); // Hi, I'm Alice and I'm 25 years old.

const person2 = createPerson('Bob', 30);
person2.introduce(); // Hi, I'm Bob and I'm 30 years old.
///////////////////////////////////////////////////////객체 반환////////////////////////

function multiplyBy(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplyBy(2);
console.log(double(5)); // 10

const triple = multiplyBy(3);
console.log(triple(5)); // 15
///////////////////////////////////함수 반환///////////////////////////////////

//렉시컬 환경 :  코드가 작성된 위치에 기반하여 변수를 저장하고 참조하는 구조

//Closure: 클로저는 함수와 함수가 선언될 당시의 **렉시컬 환경(Lexical Environment)**을 함께 기억하는 기능을 말합니다.
// 클로저는 함수가 외부 함수의 변수에 접근할 수 있게 하며, 외부 함수가 종료되더라도 그 변수를 사용합니다.

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer: ${outerVariable}, Inner: ${innerVariable}`);
    };
}

const newFunction = outerFunction('outside');
newFunction('inside'); // Outer: outside, Inner: inside
/*
위 코드에서 outerFunction은 outerVariable을 매개변수로 받고, innerFunction을 반환합니다. 
중요한 점은 innerFunction이 outerVariable을 계속 기억하고 있다는 것입니다. 이것이 클로저의 핵심입니다. 
outerFunction이 끝난 후에도, 반환된 innerFunction은 여전히 outerVariable에 접근할 수 있습니다.
*/

function counter() {
    let count = 0;
    
    return function() {
        count++;
        console.log(count);
    };
}

const increment = counter();
increment(); // 1
increment(); // 2
increment(); // 3

// (4) 객체의 프로퍼티로 함수를 할당
// 함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.

const testi = {
  stone: "black",
  sky: "blue",
  tree: "brown",
  summary2: () => console.log(`돌은 ${this.stone}`),
  summary: function () {
    console.log(`돌은 ${this.stone}`)
  }
};

testi.summary(); //돌은 black

testi.summary2(); //돌은 undefined
// 화살표 함수는 this를 바인딩하지 않기 떄문에 undefined 출력됨

// (5) 배열의 요소로 함수를 할당
// 함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.
const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

/*
함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 
함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.


함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미합니다. 
새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 
이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.
*/

function multiplyBy(num) {
  return function(x) {
    return x * num;
  }
}

function add(x, y) {
  return x + y;
}

// 리펙토링(불필요한 복잡함을 제거하고, 코드 구조를 더 깔끔하고 명확하게 만드는 작업)
const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

const result = add(multiplyByTwo(5), multiplyByThree(10)); // 40 출력

// 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.

3. Map

// Map
// JS -> 객체, 배열 등으로 많은 복잡한 프로그램을 만들 수 있지만, 현실세계에 여러가지 문제들을 프로그래밍 적으로 반영하기에는
// 새로운 자료구조(데이터의 형태)가 필요했음
// Map, Set

// Map, Set 목적: 기존의 객체나 배열보다 데이터의 구성, 검색, 사용을 효율적으로 처리하기 위함.

// (1) Map
// Map은 키-값 쌍을 저장하는 객체와 비슷합니다. Map은 각 쌍의 키와 값을 저장합니다.
// 객체는 key값으로 문자형태를 가지지만, 맵에서는 객체와 달리 키로 모든 데이터 타입을 사용할 수 있습니다
// 왜냐하면, Map은 키가 정렬된 순서대로 저장되기 떄문임.(indexing)
// Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없습니다.Map을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

// - 키-값 쌍 추가 및 검색(set)
// - 키-값 쌍 삭제(delete)
// - 모든 키-값 쌍 제거(clear)
// - **Map** 크기 및 존재 여부 확인(size)

// 💡 **[맵에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다]**

// - `new Map()` – 맵을 만듭니다.
// - `map.set(key, value)` – `key`를 이용해 `value`를 저장합니다.
// - `map.get(key)` – `key`에 해당하는 값을 반환합니다. `key`가 존재하지 않으면 `undefined`를 반환합니다.
// - `map.has(key)` – `key`가 존재하면 `true`, 존재하지 않으면 `false`를 반환합니다.
// - `map.delete(key)` – `key`에 해당하는 값을 삭제합니다.
// - `map.clear()` – 맵 안의 모든 요소를 제거합니다.
// - `map.size` – 요소의 개수를 반환합니다.

// Map() 생성자로 Map 만들기
const myMap = new Map();

// 값 추가
myMap.set("key", "value");

console.log(myMap.get("key")); //'value'

// Map 에서의 반복
//  keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복
myMap.set("하나", 1);
myMap.set("둘", 2);
myMap.set("셋", 3);
myMap.set("넷", 4);

for (let val of myMap.values()) {
  console.log(val);
  // value;
  // 1;
  // 2;
  // 3;
  // 4;
}

for (let val of myMap.keys()) {
  console.log(val);
  // key;
  // 하나;
  // 둘;
  // 셋;
}
myMap.delete("key");

for (let val of myMap.entries()) {
  console.log(val);
  // [("하나", 1)][("둘", 2)][("셋", 3)][("넷", 4)]
}
// for --- of 반복분
// for --- of는 ES6에 추가된 새로운 컬렉션 전용 반복 구문.
// 위의 구문을 사용하기 위해서는 컬렉션 객체가 Symbol.iterator 속성을 가지고 있어야만 함. (직접 명시 가능)
var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

// iterator는 반복자라는 말이에요. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해해주시면 돼요.
// 아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이에요.

console.log(myMap.size); //4
console.log(myMap.entries()) //iterator로 감싸져서 나옴
// [Map Entries] { [ '하나', 1 ], [ '둘', 2 ], [ '셋', 3 ], [ '넷', 4 ] }
console.log(myMap.has("two")) //키 기반 검색(false)

 

4. Set

// Set
// 고유한 값을 저장하는 자료구조다.
// `Set`은 고유한 값을 저장하는 자료 구조입니다.
// `Set`은 값만 저장하며, 키를 저장하지 않습니다.
// `Set`은 값이 중복되지 않는 유일한 요소로만 구성됩니다.

// - 값 추가 및 검색
// - 값 삭제
// - 모든 값 제거
// - `Set` 크기 및 존재 여부 확인

const mySet = new Set();

mySet.add(4);
mySet.add(6);
mySet.add(4);
mySet.add(5);

console.log(mySet); //Set(3) { 4, 6, 5 }
console.log(mySet.size) //3
console.log(mySet.has(4)); //true

// Iterator
// 반목문
// set은 key 가 없으므로 무조건 values만

for (let item of mySet.values()) {
  console.log(item);
  //4 6 5
}