[학습 목표]
자바스크립트 es6 문법에서 새로 추가된 문법에 대해 학습해요.
일급객체로서의 함수가 어떤 의미인지, 왜 중요한지 알며 실습을 통해 활용능력을 갖출 수 있어요.
Map과 Set에 대한 개념에 대해 학습하고, 각각에 대한 활용능력을 갖출 수 있어요.
1. 각종 es6 문법 소개 ★
(1) let, const
var를 대체해서 나온 변수 선언에 사용 되는 키워드. 같은 변수를 중복 선언시 오류 발생.
◆ let : 재할당은 가능하고, 재선언은 불가능 합니다.
◆ const : 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능합니다.
값의 변화가 없는 변수 선언 시 사용 합니다.
const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1
value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.
const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared◆ var : 호이스팅, 재할당, 재선언이 가능 합니다.
(2) 화살표 함수 (Arrow Function)
function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해집니다.
// function이나 return 키워드 없이 함수를 만드는 방법
// ES5
function func() {
return true
}
//ES6
const func = () => true
const func = () => {
return true
}
/*
() => {}
parm => {}
(parm1, parm2, ...parms) -> {}
// 익명 화살표 함수
() => {}
*/(3) 삼항 연산자 (ternary operator)
condition ? expr1(참) : expr2(거짓)
(4) 구조 분해 할당 (Destructuring) ★
배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 할당는 문법 입니다.
◆ 배열
// 배열의 경우 순서가 중요합니다.
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr; // 배열의 자리순으로 변수에 할당합니다.
console.log(a,b,c) // value1 value2 value3
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c,d] = arr
console.log(d) // undefined 값이 없는 경우 'undefined' 출력합니다.
let [a,b,c,d = 4] = arr
console.log(d) // 4
◆ 개체
// 객체의 경우 key를 수정합니다
let user = {name: "nbc", age: 30};
let {name, age} = user;
// let name = user.name;
// let age = user.age;
console.log(name, age) // nbc 30
// 새로운 이름으로 할당. 값은 기존 객체의 갑을 유지합니다.
// let {키1 : 키1`, 키2 : 키2`} = 객체명;
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
// let {키1, 키2, 키3} = 객체명;
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
// 값이 없는 경우 키에 값 부여 가능
// let {키1, 키2, 키3 = 값3} = 객체명;
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today
(5) 단축 속성명 (property shorthand) ★
// 객체의 key와 value 값이 같다면, 생략 가능합니다.
const name = "nbc"
const age = "30"
const obj = {
name, // name : name
age: newAge
}
const obj = {
name, // name : name
age // age: age
}
(6) 전개 구문 (Spread) ★
전개구문 = spread opperator
기존의 구조를 버리고 새로운 구조로 덧입혀야할 때 사용합니다. 풀어버리는 기능은 다양하게 사용될 수 있습니다.
...배열이or객체명
// 배열
let arr = [1,2,3];
// 기존의 구조를 버리고 새로운 구조로 덧입혀야할 때 사용합니다.
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
console.log(...newArr) // 1 2 3 4
// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2(7) 나머지 매개변수(rest parameter)
function func (a, b, ...args) { // ...args : 추가적으로 더 들어올 수 있음을 명시합니다.
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7
(8) 템플릿 리터럴 (Template literals)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
// 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식.
// ${}를 사용하기 위해 백틱(`)으로 감싸야 합니다.
"string"
'string'
new String("string")
`string text`
`string text
string text line2`
`string text ${value} text`
(9) named export vs default export
// default Export
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"// named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능
export const Name1 = () => {
}
export const Name2 = () => {
}
// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x
// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"
// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"
console.log(NameModule.Name1)
2. 일급 객체로서의 함수
◆ Js에서는 함수가 일급 객체로 취급되기 때문에, 함수를 매우 유연하게 사용할 수 있습니다.
◆ 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.
◆ ★일급객체(First-class Object) : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
◆ 함수는 값을 가지므로 변수에 할당하여 사용할 수 있습니다.
함수가 일급 객체로 취급되는 5가지 경우
(1) 변수에 함수를 할당
//함수는 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력(2) 함수를 인자로 다른 함수에 전달
// 함수는 다른 함수으; 매개변수로 사용할 수 있습니다.
// 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용됩니다.
// 콜백함수 : 매게변수로서 쓰이는 함수
// 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
func();
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력◆ 콜백 함수 : 어떠한 함수의 매개변수로 쓰이는 함수입니다.
◆ 고차 함수 : 함수를 다루는 함수 . 함수를 인자로 받거나 함수를 출력으로 반환하는 함수입니다.
◆ 콜백함수는 고차함수의 한 종류 니다.
(3) 함수를 반환
// 함수는 다른 함수에서 반환할 수 있습니다.
// 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.
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}`); // this는 현제 위치에서 바로 상위인 것을 가리킵니다.
}
};
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 출력
function multiplyBy(num) {// 고차함수(function 함수를 리턴)
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));
console.log(result);// 40 출력
3. Map과 Set
데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있습니다.
1) Map
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 – 요소의 개수를 반환합니다.
(1) Map 생성 및 사용
//새로운 Map을 만들려면 Map() 생성자를 사용합니다.
const myMap = new Map();
// Map에 값을 추가하려면 set() 메소드를 사용합니다.
// 맵이름.set(키, 값)
myMap.set('key', 'value');
// Map에서 값을 검색하려면 get() 메소드를 사용합니다.
console.log(myMap.get('key')); // 'value' 출력
(2) Map의 반복★
Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있습니다.
◆ [for …of 반복문]
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).
var iterable = [10, 20, 30];
for (var valueof iterable) {
console.log(value);// 10, 20, 30
}◆ iterator : 반복자. 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조 입니다.
// myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문
const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
for (const key of myMap.keys()) {
// 매개변수로 사용되는 지역변수 'key'에 myMap의 키들을 하나씩 할당합니다
console.log(key);
} /*
one
two
three */
for (const value of myMap.values()) {
console.log(value);
}/*
1
2
3*/
for (const entry of myMap.entries()) {
console.log(`${entry[0]}: ${entry[1]}`);
}/*
one: 1
two: 2
three: 3*/(3) Map의 크기 및 존재 여부 확인
//Map의 크기를 확인하려면 size 속성을 사용합니다.
console.log(myMap.size); // 3 출력
//특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용합니다.
console.log(myMap.has('two')); // true 출력
2) Set
set은 집합같은 겁니다.
Set은 고유한 값을 저장하는 자료 구조입니다.
Set은 값만 저장하며, 키를 저장하지 않습니다.
Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
◆ Set 할 수 있는 작업
▷ 값 추가 및 검색
▷ 값 삭제
▷ 모든 값 제거
▷ Set 크기 및 존재 여부 확인
(1) Set 생성 및 사용
// Set을 만들려면 Set() 생성자를 사용합니다.
const mySet = new Set();
// 이제 Set에 값을 추가하려면 add() 메소드를 사용합니다.
mySet.add('value1');
mySet.add('value2');
// Set에서 값을 검색하려면 has() 메소드를 사용합니다.
console.log(mySet.has('value1')); // true 출력
(2) Set의 반복
// 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 출력
숙제
https://school.programmers.co.kr/learn/courses/30/lessons/12915
문제 : 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.
/**
* 문자열 리스트 strings
* 문자열의 n번째 문자로 리스트 오름차순 정렬
*
* 문자열 앞에 인덱스에 해당하는 문자를 붙인다
* ["sun", "bed", "car"], 1 이라면 → ["usun", "ebed", "acar"]
* 사전순으로 정렬한다
* ["acar", "ebed", "usun"]
* 정렬된 배열의 가장 앞 글자를 땐다
* ["car", "bed", "sun"]
* **/
function solution(strings, n) {
//const myList = strings.map(value => `${value[n]}${value}`);
const myList = [];
for (const value of strings.values()) {
myList.push(`${value[n]}${value}`);
}
myList.sort();
const answer = myList.map(str => str.substring(1));
// var answer = [];
return answer;
}
sort()에서() 안에 함수를 넣을 수 있습니다. 리팩토링
function solution(strings, n) {
// n번째 문자를 기준으로 오름차순 정렬
return strings.sort((a, b) => {
// n번째 문자가 다를 경우 해당 문자로 정렬
if (a[n] !== b[n]) {
return a[n].localeCompare(b[n]);
}
// n번째 문자가 같을 경우 사전순으로 정렬
return a.localeCompare(b);
});
}
※ 요약
◆ JavaScript에서 Map과 Set은 두 가지 다른 유형의 자료 구조입니다.
◆ Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조입니다.
◆ Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다.
◆ Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.
※Tip
◆ ` : 백티, 어퍼스트로피
멀티라인 지원
console.log(`벡틱 테스트
가나다
가나다`)
'내일배움 강의 > 완강-JS 문법 종합반' 카테고리의 다른 글
| 5주차 : DOM과 클래스, 클로저 (7) | 2024.11.11 |
|---|---|
| 3주차 : 데이터 타입(심화), 실행 컨텍스트, this (5) | 2024.11.07 |
| 4주차 : 콜백 함수와 동기/비동기 처리 (0) | 2024.11.05 |
| JavaScript 문법 종합반 1주차 (1) | 2024.11.05 |
