[Node.js_4기] Today_I_Learn : JavaScript학습 (24/01/01)

목차

 

1. 학습 내용

2. 내용 정리

3. 예제

4. 생각 정리

 

1. 학습 내용 

es6으로 일어난 js대격변으로 사용가능해진 문법들,

일급객체(first-class-object)로서의 함수 사용,

Map과 Set

 

2. 내용 정리 

1. ES6 문법: 
let : 재할당을 허용하지만 재선언은 허용하지 않음

const : 재할당과 재선언을 모두 허용하지 않음

var : 재할당, 재선언 허용 / 호이스팅(선언이 스코프 최상단으로 끌어올려지는 듯한 현상)
화살표 함수 : 함수 선언, 특히 한 줄 반환 및 단일 매개변수 함수에 대해 간결한 구문을 제공
삼항 연산자는 : 조건문을 표현하는 간결한 방법을 제공
구조 분해 할당★ : 각각 순서와 키 중요도에 따라 배열과 객체 모두에 사용
객체의 단축 속성 이름을 사용하면 간결한 선언이 가능
스프레드 구문★ : 배열이나 객체의 요소를 확장하는 데 사용
나머지 매개변수(...)는 나머지 함수 인수를 배열로 수집
템플릿 리터럴(``)은 JavaScript 코드 삽입을 허용하고 여러 줄 문자열을 지원

 

2. 일급 객체로서의 함수

함수를 객체처럼 취급해서 써먹는다. 즉, 함수를 매우 유연하게 사용.

(1) 변수에 함수 할당 : 함수를 값처럼 취급. 나중에 사용될 수 있게 조치됨.

(2) 함수를 다른 함수의 인수로 전달 : 매개변수로 받은 변수가 함수였다!

(3) 함수 반환(고차 함수) : 함수를 인자로 받거나 return

(4) 객체의 속성으로 함수 할당 : `${function}`

(5) 배열의 요소로 함수 할당 : [func1, func2]

 

3. Map과 Set

기존 객체와 배열보다 효율적으로 데이터를 구성, 검색, 사용하기 위해 Map과 Set 데이터 구조를 추가.

Map :

key/value쌍

모든 데이터 유형을 key로 허용

key가 정렬된 순서로 저장

set(), get(), keys(), values(), entries()등의 메서드로 조작

keys(), values(), entries() 메서드는 itterator속성을 가지기 때문에 이들 메서드로 for of 반복문 사용 가능

Set : 

고유한 값만을 저장하는 자료구조(키 저장 x)

값이 중복되지 않는 유일한 요소로만 구성됨

values()로 for of 반복

 

3. 예제 

1. es6문법

구조분해할당

let user = {
    name:'npc',
    age:30,
    birthday:'yesterday'
}
let {name, age, birthday='birthday'} = user;
console.log(name); //npc
console.log(age); // 30
console.log(birthday); // yesterday

전개구문

let user ={
	name:'npc',
	age:30,
};
let user2 = {...user};
console.log(user)
console.log(user2) // 풀었다 다시 묶어버리기

템플릿 리터럴

const temp = 'temp'
console.log('hello world')
console.log(`hello world 
${3*3} 
${temp}`)

 

2. 일급 객체로서의 함수

(2)
function callFunction(func){
	func() // 함수 실행시 내부에서 함수가 실행된다!
}

(3) 
function createAdder(num){
    return function(x){ // 이부분
        return x+num
    }
}

(4) 
const person = {
    name:'존',
    age:31,
    isMarried:true,
    sayHello:function(){
       console.log(`hello, my name is ${this.name}`) 
    }
}
person.sayHello(); // 응답 : hello, my name is john

3. Map과 Set

<1. Map>
const myMap = new Map();
myMap.set('key', 'value');
console.log(myMap.get('key')); // 'value' 출력
// 반복
for (const key of myMap.keys()) {
  console.log(key); 
}
// 크기 존재 확인
console.log(myMap.size); // 2
console.log(myMap.has('two')); // true

<2. Set>
// 생성
const mySet = new Set();
// 추가
mySet.add('value1');
mySet.add('value2');
// 검색
console.log(mySet.has('value1')); // true 출력
// 반복 : for of, values()
for (const value of mySet.values()) {
  console.log(value);
}
// 크기, 존재
console.log(mySet.size); // 2 출력
console.log(mySet.has('value2')); // true 출력

 

4. 생각 정리 

대격변 패치로 js 프로그래밍이 더욱 모던해짐.