오늘 한 일
- [내배캠] Javascript 문법 2주차 강의
- ES6 문법
- 일급 객체로서의 함수
- Map, Set
배운 것
ES6 문법
1. 구조 분해 할당(distructuring)
let [value1, value2] = [1, "new"] value1에는 1, value2에는 new 할당
- 새로운 이름으로 저장
let user = {
name: "홍길동",
age: 30,
}
let { name: newName, age: newAge } = user;
console.log(newName); // 홍길동
console.log(newAge); // 30- 단축 속성명
객체에서 key와 value가 같으면 생략 가능
const obj = { name, age }
2. 전개 구문(spread operator)
... 사용하여 분해
let arr = [1, 2, 3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]3. 나머지 매개변수(rest parameter)
...args변수의 갯수를 모를 때
function Func (a, b, c, ...args) {
console.log(a, b, c);
console.log(...args);
}
func(1, 2, 3) // 1 2 3 /
func(1, 2, 3, 4, 5, 6, 7) // 1 2 3 / 4 5 6 74. 템플릿 리터럴(template literals)
- 백틱과
${}로 표현- 멀티라인 지원
- 자바스크립트 코드, 변수, 연산 등 가능
const testValue = "안녕하세요";
console.log(`hello world ${testValue}`); // hello world 안녕하세요일급 객체로서의 함수
1. 변수에 함수 할당 가능
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력2. 함수를 인자로 다른 함수에 전달 가능
- 콜백함수 : 매개변수로서 쓰이는 함수
- 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
func();
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력3. 함수 반환
함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다.
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력4. 객체의 프로퍼티로 함수 할당
함수는 객체의 프로퍼티로 할당 가능, 객체의 메소드로 함수 호출 가능
const person = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // "Hello, my name is John" 출력☑️ 화살표 함수는 this를 바인딩하지 않는다.
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 출력☑️ 함수는 일급 객체로 다룰 수 있어서 코드를 더 간결하고 모듈화된 형태로 작성할 수 있다.
Map
Key-Value pair
- Key에 어떤 데이터타입(유형)도 가능
- Map은 키가 정렬된 순서로 저장
- 검색, 삭제, 제거, 여부 확인
1. Map 생성 및 사용
- Map 생성 :
Map()생성자 사용
const myMap = new Map();- Map 값 추가 :
set()메소드 사용
myMap.set('key', 'value');- Map에서 값 검색 :
get()메소드 사용
console.log(myMap.get('key')); // 'value' 출력2. Map의 반복
- Map에서
keys()**,values(),entries()메소드를 사용하여 키, 값 및 키-값 쌍 반복 가능 - iterator : 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조.
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 value of myMap.values()) {
console.log(value);
}
for (const entry of myMap.entries()) {
console.log(`${entry[0]}: ${entry[1]}`);
}3. Map의 크기 및 존재 여부 확인
- Map의 크기 확인 :
size속성 사용
console.log(myMap.size); // 3 - 특정 키가 Map에 존재 여부 확인 :
has()메소드 사용
console.log(myMap.has("two")); // true Set
- 고유한 값을 저장하는 자료구조
- 값만 저장하고 키를 저장하지는 않는다.
- 값이 중복되지 않는 유일한 요소로만 구성 (중복된 값은 삭제)
- 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인
1. Set 생성 및 사용
- Set 생성 :
Set()생성자 사용
const mySet = new Set();- Set 추가 :
add()메소드 사용
mySet.add('value1');
mySet.add('value2');- 값 검색 :
has()메소드 사용
console.log(mySet.has('value1')); // true2. Set의 반복
values()메소드를 사용하여 값 반복 가능
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
for (const value of mySet.values()) {
console.log(value);
}3. Set의 크기 및 존재 여부 확인
- Set의 크기 확인 :
size속성 사용
console.log(mySet.size); // 3- 특정 값이 Set에 존재 여부 확인 :
has()메소드 사용
console.log(mySet.has('value2')); // true오늘의 회고
강의를 들으면 이해는 가는데, 주차별 숙제를 위해 코딩연습을 하면 머리가 하얗게 백지가 된다. 답변과 해설을 들으면 그래도 어느정도 이해는 간다. 언제쯤 문제를 보면 답이 보일까? 아예 떠오르는게 없다보니 좀 답답하네...
내일 할 일
- [내배캠] Javascript 문법 3주차 강의
Frontend Engineers