JS 2주차 정리 :: ES6 문법 8가지 (구조분해할당, ...전개구문) | 일급객체 | Map | Set

1. ES6 문법 소개 및 실습 1

(1) let, const

- 2015년 이전 : var 사용

- let(변수), const(상수) 등장 : 선언 한번만, var는 여러번 해도 오류 안남

 

(2) arrow function

: var add = function() {} ---- var add()=>{ }

 

(3) 삼항 연산자

: condition? true인경우 : false인 경우

 

(4) 구조분해할당 (de(not) + structure + ing)

- 구조 찢어버리기

- 배열, 객체 속성을 분해해서 변수에 담기

--배열

//구조분해-배열
let [val1, val2] = [1,"new"] ; //val1 = 1, val2 =new

let arr = ["val1", "val2", "val3"];
let [a,b,c] = arr;       // a= val1, b =val2, c=val3
let [a,b,c,d] = arr;     // d= undefined
let [a,b,c,d=4] = arr;   // d= 4 
let [a,b,c=5,d=4] = arr; // c=val3

--객체

//구조분해-객체
let user ={ name: "홍", age :20 };

//구조분해할당
let {name, age} = { name: "홍", age :20 }; //name : string, age: number 데이터타입

//새로운 이름으로 할당
let user ={ name: "홍", age :20 };
let { name : newName, age : newAge} = user //newName: 홍, newAge:20

//객체 없는 값 : undefined
let user ={ name: "홍", age :20 };
let {name, age, birthday} = user; // birthday: undefined
let {name, age, birthday="today"} = user; // birthday: today(초기값)

2. ES6 문법 소개 및 실습 2

(1) 단축 속성명 : property shorthand (자주쓰임!)

: const obj ={ name, age }

// key-value 똑같으면 생략 가능

// 배열 같아보이지만 key-value의 명칭이 같은 객체임

// 단축 속성명 
const name ="홍";
const newAge ="30";

//key-value
const obj ={ 
name : name,
age : newAge
}

//key-value (name - name) --> name 으로 단축
const obj ={ 
name : name, --> name
age : newAge
}

//key-value (name - name) --> name 으로 단축
const obj ={ 
name,
age : newAge
}

//같은 맥락으로 newAge-> age라고 하면
const obj ={ 
name,
age 
}

//배열 같아보이지만 key-value의 명칭이 같은 객체임
const obj ={ name, age }

 

(2) 전개구문 : spread operator

- 구조분해할당 과 가장 많이 사용됨

//전개구문
let arr = [1,2,3]; 
console.log(...arr); //1,2,3


// 기존에 있는 형태에서 변형할때 자주 쓰임
let arr = [1,2,3];
let newArr = [...arr,4]; // [1,2,3,4]


// 객체
let user = { name : '홍', age : 20 }
let user2 = {...user} //user와 같은 형태

 

(3) 나머지 변수 : rest parameter

//나머지 매개변수 : ...arg
function exampleFunc(a,b,c){
	console.log(a,b,c);
}
exampleFunc(1,2,3);// 1,2,3

//...arg 사용 (전개구문 o)
function exampleFunc(a,b,c,...arg){
	console.log(a,b,c);  // 1,2,3
    console.log(...arg); // 4,5,6
}
exampleFunc(1,2,3,4,5,6);// 1,2,3

//arg 사용 (전개구문 x)
function exampleFunc(a,b,c,arg){
	console.log(a,b,c);  // 1,2,3
    console.log(arg);    // [4,5,6] : 배열로 들어감!
}
exampleFunc(1,2,3,4,5,6);// 1,2,3

(4) 템플릿 리터럴 : template literal

- 변수 `${ }`

//템플릿 리터럴
const testValue = "안녕";
console.log(`hello ${testValue}`); //hello 안녕

//멀티라인 지원(로그, 문자열 출력시 편리함)
console.log (`
Hello
	my name is ~
    
    Nice to ~
`);

3. 일급 객체로서의 함수 1

(1) 변수에 함수 할당 가능 --> 함수가 일급객체여서 가능하다

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

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

const sayHello = function(){
	console.log("hello");
}

(2) 함수를 인자로 다른 함수에 전달 가능 --> 함수가 일급객체여서 가능하다

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

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

//기본형태
fucntion callFuntion(func){
 func();
}

//함수를 인자로 다른 함수에 전달

fucntion callFuntion(sayHello){
 func();
}

const sayHello = function(){
	console.log("hello");
}

(3) 함수를 반환 가능

//기본형태
fucntion createAdder(num){
  return function(x){
    return x+ num;
  }
}

//함수를 반환가능
const addFive = createAdder(5);
console.log(addFive(10)); //15

//[해석]
const addFive = createAdder(5);
//[같음]
const addFive = function (x){ return x+5} ;

4. 일급 객체로서의 함수 2

(1) 객체 : 함수 내 this 사용

//기본형태
const person ={
	name : '홍',
    age : 30
    isMarried : true,
    sayHello : function(){
    	console.log('my name is ' + this.name);  //this : person객체를 가르킴
        console.log(`my name is ${this.name}`); //위랑 같은 코드 
    },
    sayHello_arrow: ()=>{ //화살표 함수
    	console.log(`my name is ${this.name}`); //★ ${this.name} : undefined (3주차때 알려줌)
    }
}

person.sayHello(); //my name is 홍

- this를 쓰고 싶으면 일반 함수를 써야

- 화살표함수는 this를 바인딩하지 않음 : 그래서 값이 undefined 나옴 (3주차에서 공부예정)

 

(2) 배열의 요소로 함수 할당

//배열 :함수로 할당
const myArr =[
   function (a,b) { return  a+b ;}, //0번째 요소
   function (a,b) { return  a-b ;}, //1번째 요소
]

console.log(myArray[0](1,3));  // 더하기 :4 
console.log(myArray[1](10,7)); // 빼기 : 2

// 두번째 예제
function multiplyBy(num){
	return funciton(x){
     	return x* num;
    }
}

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

const multiplybyTwo = multiplyBy(2); // [FUnction (anonymous)] : 내부 function출력--> 함수로 호출 multiplybyTwo(10) 
const multiplybyThree = multiplyBy(3);

console.log(multiplybyTwo(10));   //20
console.log(multiplybyThree(10)); //30

//같음
const multiplybyTwo = multiplyBy(2);
const multiplybyTwo = function(x) { return x* 2;}
//같음
const multiplybyThree = multiplyBy(3);
const multiplybyThree = function(x) { return x* 3;}


//add 함수 활용
const result = add( multiplybyTwo(5),multiplybyThree(10)); // 40

5. Map 

- 자료구조 (데이터 구성, 검색, 사용을 효율적 처리 > 기존의 객체, 배열)

- key / value 

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

- 기능 : 검색, 삭제, 제거, 여부 확인

//
const myMap = new Map(); //새로운 map 생성
myMap.set('key','value'); // map에는 set을 통해 데이터 넣어주기

//...
//...
myMap.get('key'); //검색 가능

- Map 반복 (for ~ of) 메서드 : keys(), values () , entries () --> [Symbol.iterator]속성을 가짐 ( iterator: 반복자)

(1) for ( const key of 맵.keys()) {~~} 

//반복 (for ~of)
const myMap = new Map();
myMap.set('one',1);
myMap.set('two',2);
myMap.set('three',3);

console.log(myMap.keys()); // MapIterator {'one', 'two', 'three'}

//keys()
for(const key of myMap.keys()){
	console.log(key); //one, two,three
}

//values()
for(const values of myMap.values()){
	console.log(values); //{1,2,3}
}

//entries()
console.log(myMap.entries()); //MapIterator {'one' => 1, 'two' => 2, 'three' => 3}

for(const entry of myMap.entries()){
	console.log(entry); //['one',1], ['two',2],['three',3]
}

//크기(길이)
console.log(myMap.size); // 3

//특정값 key기반 검색 
console.log(myMap.has("two")); //true

 

6. Set 

- 자료구조 (데이터 구성, 검색, 사용을 효율적 처리 > 기존의 객체, 배열)

- 고유한 값 저장 (값만 저장 / 키 저장x)

- 값이 중복되지 않은 요소로 구성

- 기능 : 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인

const mySet= new Set(); //Set 생성
//추가
mySet.add('value1');    //add로 추가 & value만 넣음
mySet.add('value2');
mySet.add('value2');

//길이
mySet.size; //2 (3개추가해도 value2는 2개-> 똑같은 값은 추가 안됨)

//검색
mySet.has("value1"); //true
mySet.has("value3"); //false


//반복
for (const value of mySet.values()){
 console.log(value); //value1,value2
}

** MDN > Set > 기본 집합 연산 구현 (검색어 :isSuperser) 추가 공부공

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#implementing_basic_set_operations

// 교집합은 다음으로 흉내 낼 수 있음
const intersection = new Set([...mySet1].filter((x) => mySet2.has(x)));

// 차집합은 다음으로 흉내 낼 수 있음
const difference = new Set([...mySet1].filter((x) => !mySet2.has(x)));

 

 

끝.

 

[출처]

스파르타코딩,  JavaScript 문법 종합반 2주차