오늘은 급하게 강의를 2주차 에서 3주차 3-4 까지 들었다. 그 중에서 3주차는 내일 다시 정리해볼 예정이고 오늘은 2주차를 이 TIL을 통해 정리를 할 것 이다.
선언 : 변수명을 자바스크립트 엔진에 알리는 것.
할당 : 변수에 값을 저장하는 것( = 할당연산자)
let 과 const의 특징
LET : 재할당은 가능하고 , 재선언은 불가능 하다.
let value = "value1"
console.log(value) // value1
value = "value2" // 재할당 가능
console.log(value) // value2
let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared
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 좀 알아보기
이 친구는 재할당, 재선언이 가능하다. 참고로 '호이스팅' 도 된다. 이건 3주차에 다시 정리를 진행하겠다.
var name = "name1"
console.log(name) // name1
var name = "name2"
console.log(name) // name2
화살표 함수
이 친구는 function 이나 return 키워드 없이 함수를 만드는 방법이다.
// ES5
function func() {
return true
}
//ES6
const func = () => true
const func = () => {
return true
}
() => {}
parm => {}
(parm1, parm2, ...parms) -> {}
// 익명 화살표 함수
() => {}function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.
삼항 연산자 (ternary operator)
condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓
구조 분해 할당 (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
let [a,b,c,d = 4] = arr
console.log(d) // 4// 객체의 경우
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 {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30
let {name, age, birthDay} = user;
console.log(birthDay) // undefined
let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today살짝 쉽게 풀이를 하면 코드를 적으면서 내가 필요한거를 묶은다음 쉽게 그것만 골라 뽑을 수 있는 것이다.
단축 속성명 (property shorthand)
객체의 key 와 value 값이 같다면, 생략이 가능하다.
const name = "nbc"
const age = "30"
const obj = {
name,
age: newAge
}
const obj = {
name,
age
}전개 구문 (Spread)
배열이나 객체를 전개하는 문법이다. 구조분해할당과 함께 정말 많이 사용된다!
// 배열
let arr = [1,2,3];
let newArr = [...arr, 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여기서 ( . . .) 이건 전개 연산자 이다. 배열이나 객체의 내용을 쉽게 복사하거나 결합하는 데 사용한다.
나머지 매개변수(rest parameter)
function func (a, b, ...args) {
console.log(...args)
}
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7템플릿 리터럴 (Template literals)
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이다.
백틱( ` ` ) 과 ${ } 로 표현이 된다.
"string"
'string'
new String("string")
`string text`
`string text
string text line2`
`string text ${value} text`문자열 리터럴: 쌍따옴표(") 또는 홉따옴표(')로 정의.
String 객체: new String()을 사용하여 객체로 생성 (일반적으로 권장되지 않음).
템플릿 리터럴: 백틱(`)을 사용하여 여러 줄 문자열과 문자열 보간을 지원.
named export vs default export
1. default Export(기본 내보내기)
// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"export default : 내보내기 할 수 있는 키워드
import : 가져오기 할 수 있는 키워 ( 단 가져올때는 파일 이름을 제대로 적어줘야 한다.)
2. 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)일급 객체로서의 함수
자바스크립트에서 함수는 일급 객체 라고 한다. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있다. 일반 객체와 달리 함수는 특별한 능력을 가지고 있다.
일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. [위키백과]
함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있다. 그래서 자바스크립트에서 함수는 매우 중요한 개념(이렇게 따로 빼야할 정도로 중요) 이다. 아래에서 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아보자.
변수에 함수를 할당
함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력
함수를 인자로 다른 함수에 전달
함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 이것은 콜백(callback)이나 고차 함수 ( higher-order function ) 를 작성하는데 사용된다.
여기서 간단하게 콜백 함수, 그리고 , 고차 함수 란?
콜백 함수 : 어떠한 함수의 매개변수로 쓰이는 함수를 말한다. 이건 4주차에 다룰 예정이다.
고차 함수 : 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말한다. 흔히 함수를 다루는 함수라고도 한다. 정리하자면 콜백함수는 고차함수라고도 할 수 있다.
function callFunction(func) {
func();
}
const sayHello = function() {
console.log('Hello!');
};
callFunction(sayHello); // "Hello!" 출력함수를 반환
함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.
function createAdder(num) {
return function(x) {
return x + num;
}
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력객체의 프로퍼티로 함수를 할당
함수는 객체의 프로퍼티로 할당될 수 있다. 객체의 메소드로 함수를 호출할 수 있다.
const person = {
name: 'John',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // "Hello, my name is John" 출력배열의 요소로 함수를 할당
함수는 배열의 요소로 할당될 수 있다. 이것은 함수를 배열에서 사용할 수 있게 한다.
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) {
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)); // 40 출력이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해준다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화 된 형태로 작성할 수 있다.
Map과 Set
JavaScript에서 **객체(object)**와 **배열(array)**을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있습니다. 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족해요. **Map**과 **Set**은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있습니다.
이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있어요. 이제 JavaScript에서 **Map**과 **Set**을 사용하는 방법을 살펴보겠습니다 🚀🚀(너무 길어서 복붙좀,,)
Map
키 -값 쌍을 저장하는 객체와 비슷하다. 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 – 요소의 개수를 반환합니다.
- (이것도 너무 길어서 복붙좀...)
<Map 생성 및 사용>
새로운 Map을 만들려면 Map() 생성자를 사용한다.
const myMap = new Map();이제 MAP에 값을 추가하려면 set() 메소드를 사용한다.
myMap.set('key', 'value');MAP 에서 값을 검색하려면 get() 메소드를 사용한다.
console.log(myMap.get('key')); // 'value' 출력<Map의 반복>
Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.
[for …of 반복문] (제 개인적으로 이게 좀 많이 중요한 내용같다)
💡 [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.keys()가 반환하는 값이 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]}`);
}<Map의 크기 및 존재 여부 확인>
Map의 크기를 확인하려면 size 속성을 사용한다.
console.log(myMap.size); // 3 출력
특정 키가 map에 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.
console.log(myMap.has('two')); // true 출력
Set
set은 고유한 값을 저장하는 자료 구조입니다. set은 값만 저장하며, 키를 저장하지 않습니다. set 은 값이 중복되지 않는 유일한 요소로만 구성됩니다. set을 사용하면 다음과 같은 작업을 수행할 수 있습니다.
- 값 추가 및 검색
- 값 삭제
- 모든 값 제거
- Set 크기 및 존재 여부 확인
<Set 생성 및 사용>
새로운 set을 만들려면 set() 생성자를 사용한다.
const mySet = new Set();
이제 set에 값을 추가하려면 add() 메소드를 사용한다.
mySet.add('value1');
mySet.add('value2');
set에서 값을 검색하려면 has() 메소드를 사용한다.
console.log(mySet.has('value1')); // true 출력
<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);
}
<Set의 크기 및 존재 여부 확인>
set의 크기를 확인하려면 size속성을 사용한다.
console.log(mySet.size); // 3 출력
특정 값을 set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.
console.log(mySet.has('value2')); // true 출력
JavaScript에서 map과 set는 두 가지 다른 유형의 자료 구조이다. map은 키 -값 쌍을 저장하는 객체와 비슷하며, set는 고유한 값을 저장하는 자료 구조이다. map 및 set는 모두 값 추가, 검색, 삭제, 및 모든 값 제거를 수행할 수 있다. map 및 set 를 사용하여 효율적인 데이터 수겅 및 검색을 수행할 수 있다.