JS 문법 종합반 2주차

ES6 문법이란?

ES6는 JS의 버전 중 하나로 2015년에 발표되었다.2015년과 다르게 대규모 문법적 향상이 있었기에 언급이 되었다.

 

ES6 문법

1. LET(변수) CONST(상수)

한 번 선언하고 할당한 값에 다시 재할당을 할 수 있느냐 없느냐가 가장 큰 차이점이다.

 

2. function

화살표 함수는 function () {}를 () => {}로 줄인 것이다.

 

3. 삼항 연산자

condition ? true인경우 : false인 경우

 

4. (활용도 굿) 구조분해할당 : de(not)structure(구조)

배열이나 객체의 속성을 분해해서 하나하나 떼어내서 변수에 담을 수 있게 한 것

 

4-1 배열의 경우

let [value1, value2] = [1, "new"]

value1에 1을, value2에 "new"를 할당하는 것. [value1, value2 = 4] 여기서 value2 = 4는 초기값이므로, 실행시키면 new가 나온다.

 

4-2 객체인 경우

let {name, age} = { name = "유현지", age = 31 };

let {name: newName, age} = { name = "유현지", age = 31 };

이렇게 하면 newName에 값이 들어간다.

 

5. 단축 속성명

let name = "abc"

const me = { name = name, age = 31 };

이런 상황일 때 

 

let name = "abc"

const me = { name, age = 31 };

이렇게 줄일 수 있다. key-value가 같으면 생략할 수 있다.

 

6. (활용도 굿) 전개구문 = spread operator

destructuribg과 함께 가장 많이 사용하는 es6 문법 중 하나이다.

let arr = [1, 2, 3];

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

console.log(...arr); //1 2 3

이런 식으로 ...을 붙여서 사용하는데, 대괄호와 콤마를 없애준다. 이걸 응용해서 배열에 요소를 추가하고 싶을 때

let arr = [ ...arr, 4 ]; 

이렇게 사용할 수 있는 것이다. 

객체도 마찬가지로

const me = { name, age = 31 };

const me2 = { ...me };

이렇게 하면 동일하게 나온다.

 

7. (활용도 굿) 나머지 매개변수

function example(a, b, c, ...args) {

console.log(a, b, c); 

console.log(...args); 

};

이런 식으로 할 수 있는데, 만약 여기서 ...이 없다면 

example(1, 2, 3, 4, 5, 6, 7)을 했을 때 출력이 배열로 나오게 된다. 하지만 ...이 있다면

1 2 3

4 5 6 7 이런 식으로 나오게 되는 것이다. 즉 ...은 대괄호, 중괄호 등의 형식을 생략해주는 것이라고 생각하면 편할 것 같다.

 

8. (활용도 어마어마) 템플릿 리터럴

console.log( ` 안녕 ${ 3+3 } `  );

이런 식으로 사용할 수 있는데, ${ }이 중괄호 안에 js를 넣는 것이다.

그리고 백틱은 문자열을 여러 줄 출력하는 것이 가능하다.

백틱과 템플릿 리터럴을 공부하는 것을 추천

 

일급 객체로서의 함수

일급 객체란 다른 객체들과 일반적으로 같다. 

특징

1. 변수에 함수를 할당할 수 있다.

- 함수가 마치 값으로 취급된다.

- 함수가 나중에 사용될 수 있도록 조치가 되었다.

- const hello = function (){}

 

2. 함수를 인자로 다른 함수에 전달할 수 있다.

- 콜백함수 : 매개변수로써 쓰이는 함수

- 고차함수 : 함수를 인자로 받거나 return하는 함수

- 매개변수로 받은 변수가 사실, 함수다.

 

3. 함수를 반환할 수 있다.

function example(a) {

return function (b) {

return b+a;

};

};

const examples = example(3);

console.log(examples(10)); 이런 느낌

 

4. 객체에도 함수가 들어갈 수 있는데, value에 넣을 수 있다.

화살표 함수는 this를 바인딩 하지 않는다.

 

5. 배열의 요소로 함수를 할당

말 그대로 배열에 함수를 넣는 형식이다.

// 배열의 요소로 함수를 할당
const myArr = [ 
	function (a, b) {
		return a + b;
	}, // 0번째 요소 
    function (a, b) {
		return a = b;
	}, // 1번째 요소
];
// 더하기
console.log(myArr[0](1, 3));
// 빼기
console.log(myArr[1] (10, 7));

 

function example(a) {

return function (b) {

return b+a;

};

};

 

function example(a,b) {

return b+a;

};

const exampleS = example(3); //이건 examples 함수의 매개변수에 3을 넣는다는 것이다.

console.log(exampleS(10));  //이건 앞에서 3을 넣은 함수의 리턴에 있는 함수의 매개변수에 10을 넣는다는 것이다.

function (10) {

return 10+3;

};

 

mep 과 set은 데이터의 구성, 검색, 사용을 효율적으로 처리해, 기존의 객체 또는 배열보다 훨씬 빠르고 효율적으로 처리하는 것이 목적이다.

 

map은 키가 정렬된 순서로 저장되기 때문에 key에 어떤 데이터타입(유형)도 다 들어올 수 있다.

기능은 검색, 삭제, 제거, 여부확인이 있다.

const myMap = new Map();

myMap.set('key','value');

이런 식으로 사용할 수 있으며

myMap.get('key'); 로 검색할 수 있다.

 

map은 대량 데이터를 처리 하려고 하는 것이기 때문에 반복적인 부분이 중요하다.

이러한 부분을 위한 메소드가 있는데, 각각 keys, values, entries로, 키,값 및 키-쌍을 반복할 수 있다. 

 

map은 for of로 반복적으로 데이터를 처리하는데, for of를 사용하기 위해서는 객체가 Symbol.interator속성을 가지고 있어야 한다. 여기서 interator란 반복자라는 말로 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조이다.

for(const key of myMap.keys()){

console.log(key)

}

이런 식으로 사용할 수 있다.

const myMap = new Map();

myMap.set("one",1);

myMap.set("two",2);

myMap.set("three",3);

for(const key of myMap.keys()){

console.log(key);

}

이것을 출력하면 one, two, three가 나오게 된다.

key를 value로 바꾸면 뒤의 숫자들이 나온다.

entries로 바꾸고 console을 entry로 바꾸면 ["one",1] 이렇게 나오는 것이다.

 

map의 크기는 myMap.size로 알 수 있고, key기반 검색은 myMap.has로 할 수 있다.

 

set

마지막으로 set은 자료구조중에 하나로, 고유한 값을 저장하는 자료구조이다.

키를 저장하지 않고 값만 저장하며, 값이 중복되지 않는 유일한 요소로만 구성이 된다.

값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인이라는 기능을 가지고 있다.

const mySet = new set();

myMap.add("value1");

myMap.add("value2");

myMap.add("value3");

이런 식으로 저장할 수 있으며, value밖에 저장이 안 되기 때문에 

for(const value of myMap. values()){

console.log( value );

}

이런 식으로 작성할 수 있다.