2주차 강의
-
ES6 신규 문법
구조분해할당(destructuring)
-
배열의 경우
let [val1, val2] = [1, "new"]; console.log(val1); console.log(val2); //결과 1 new배열의 원소를 순서대로 할당이 가능.
undefined와 null
null은 명시적으로 할당된 빈 값
undefined는 변수(공간)은 선언되었지만 값이 할당되지 않은 상태
-
-
객체의 경우
let {name, age} = { name : "sun", age : 25 } console.log(name, "는" , age) //결과 sun 는 25string과 number 타입으로 빼왔다.
let user = { name : "sun", age : 25 } let { name : newName, age: newAge } = user; console.log(newName, newAge); // sun 25
- 단축 속성명 : property shorthand
객체를 정의할 때 key와 value의 이름이 같으면 생략할 수 있는 문법 name : name 이라 단축 속성명 사용.const name = "sun"; const age =25; const obj = {name, age}; console.log(obj); //{ name: 'sun', age: 25 }
- 전개 구문 : spread operator
. . .//배열 let arr = [1,2,3]; let arr2 = [...arr, 4, 5]; console.log(arr2); //객체 const user = { name : "sun", age : 25 } let user2 = {...user, gender : "w"}; console.log(user2); //(5) [1, 2, 3, 4, 5] //{name: 'sun', age: 25, gender: 'w'} - 나머지 매개변수 : rest parameter
함수에 전달된 나머지 인수들을 배열로 받는 매개변수 문법. 특정 인수만 명시적으로 받고, 나머지는 한꺼번에 받아서 배열로 처리한다.function exmple (a, b, c, ...arg){ console.log(a, b, c); console.log(arg); } exmple(1,2,3,4,5,6,7); //1 2 3 //(4) [4, 5, 6, 7] <- ...arg로 받은 인수를 배열로 처리
- 템플릿 리터럴 ```
템플릿 리터럴은 멀티 라인도 지원함.let TestValue = "" console.log(`hello world ${3+3}`); console.log(`템플릿 리터럴이란, ${TestValue = "백틱"}`); //hello world 6 //템플릿 리터럴이란, 백틱
일급 객체(First-Class Object)로서의 함수
→ 말이 일급 객체로서의 함수고… 결국 함수도 다른 객체들처럼 일반적으로 적용 가능(return값이 되거나, 매개변수가 되거나 등등…) 하다는
js에서는 함수가 일급 객체이기 때문에 함수를 매우 유연하게 사용할 수 있다.
화살표함수는 this를 바인딩하지 않는다!
const person = {
name : "a",
age : 31,
sayHello : ()=>{
console.log(`hi, i'm ${this.name}`)
}
}
person.sayHello();
//hi, i'm undefinedconst person = {
name : "a",
age : 31,
sayHello : function(){
console.log(`hi, i'm ${this.name}`)
}
}
person.sayHello();
//hi, i'm afunction으로 하면 값이 나오는데 화살표함수 시에는 값이 안나온다!
- 화살표 함수는 자체적인
this를 바인딩하지 않고, 상위 스코프의this를 사용합니다. 그래서person객체의 메서드로 사용할 때this가 객체를 가리키지 않고 전역 객체를 참조하게 되어undefined가 출력됩니다. (window 객체나 globalthis 객체는 쓸 수 있다…) - 반면에 일반 함수는 호출 시점에
this가 해당 객체에 바인딩되므로,person.sayHello()를 호출할 때this는person객체를 가리키며,this.name은"a"값을 가리킵니다.
Map
Map, Set의 목적 : 기존의 객체 또는 배열보다, 데이터의 구성, 검색, 사용을 효율적으로 처리.
- Key/Value
- Key에 어떠한 데이터타입도 다 들어올 수 있다.
- Map은 키가 정렬된 순서로 저장되기 때문
- 기본
set()과 get()
const MyMap = new Map();
MyMap.set('one', 1);
MyMap.set('two', 2);
MyMap.set('three', 3)
console.log(MyMap.get('one'));- Map의 반복
keys(), values(), endtires() 메소드를 사용하여 키, 값및 키-값 쌍을 반복할 수 있음.
iterator: 반복
[for… of 반복문]
컬렉션 전용 반복 구문. Map에서 사용이 가능하다.
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);
}
for (const key of MyMap.values()){
console.log(key);
}
for (const key of MyMap.entries()){
console.log(key);
}
-실행결과
one
two
three
1
2
3
(2) ['one', 1]
(2) ['two', 2]
(2) ['three', 3]console.log(MyMap.size)//map의 길이
console.log(MyMap.has("two"))//key 기반 검색
-실행결과
3
trueSet
고유한 값을 저장하는 자료구조, 값만 저장한다. 중복되지 않는 값
const mySet = new Set();
mySet.add('val1');
mySet.add('val1');
mySet.add('val2');
console.log(mySet.size);
console.log(mySet.has('val1'));
for(const val of mySet.values()){
console.log(val);
}
for(const val of mySet.entries()){
console.log(val);
}2주차 숙제 풀이
문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.
// string , n 주어지고 n번째 인덱스 기준으로 오름차순 정렬.
let strings = ["sun", "bed", "car"];
let n = 1;
let Sorted = () =>{
let result = [];
for(let str of strings.values()){
result.push(str[n] + str);
}
result.sort();
for(let i=0;i<result.length;i++){
result[i] = result[i].slice(1);
}
return result;
}
console.log(Sorted(strings, n))n번째 글자를 0번째 인덱스에 붙인 결과를 result 에다 담아서 .sort한 뒤 slice를 사용해 맨 앞글자 삭제 후 return 해주기.
