[React] Day_19 데일리 정리

 

정리의 축복이 끝이 없네 진짜-!

 

어제 합법적으로(?) 휴식을 취하고 온 림졍. 🌴

어제 못들었던 강의는 오늘에서야 다 들었는데...🫠

실은 머릿속에 들어온건 없는거 같고.. 막상 하라고 하면 어..어버버 될거 같아서

작성하는 JavaScript 2주차 정리... 후다닥 작성해보자고.. 🙃

 

 

오늘은 나름 정상적인(?) 짤로 데려와봤습니다. (도란스뽀머만 키우는거 아님. 암튼 그럼.)

 

 

JavaScript (자바스크립트) 강의 정리 2

 

ES6 정리

 

ES6(ECMAScript 6)

• 2015년에 발표된 대규모 문법패치
• 이전버전인 ES5에 새로운 문법 및 기능 도입
• 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선

 

let & const

• var 대체해서 나온 변수 선언 키워드
  cf. var : 재할당 및 재선언 가능

- 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 : 재할당 및 재선언 불가능, 초기값 X? 선언 불가능

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

 

 

화살표 함수 ( => )

• function return 없이 함수 선언 가능! (이름이 필요없다! 간결 작성 가능!)
  cf. 선언 시 this 정해짐. (function의 경우, 호출 시 정해짐)

// ES5 (과거)
function func() {
	return true
}

//ES6 (현재)
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

 

 

삼항 연산자

• 조건 ? 결과1 : 결과 2 (기본 형식)

let x = 8;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

 

 

구조 분해 할당

• 배열[] 이나 객채{} 의 값, 변수에 할당 (기본값 설정 가능)

// 배열의 경우
let [value1, value2, value3] = ["c", 4];

console.log(value1); // c
console.log(value3); // undefined

// 다른 case도 알아보자
let arr = ["9", "림졍", "es"]
let [a,b,c,d] = arr

console.log(d) // undefined
---
let [a,b,c,d = 6] = arr
console.log(d) // 6


// 객체의 경우
let user = { name: "림졍", age: 17 };
let {name, age} = user;

console.log(name, age); // 림졍 17
---
let {name: newName, age: newAge, birth = "9.30" } = user;
console.log(newName, newAge, birthday); // 림졍 17 9.30

 

 

단축 속성명

• key = value ? 생략 가능.

const name = "림졍";
const age = "17";

//const user2 = { name : name, age: age }
//생략 가능! 

 const user2 = { name, age };
 
 console.log(user2); //{ name: '림졍', age: '17' }

 

 

전개 구문

• 구조분해할당과 함께 저어어어엉말 많이 사용됨. 배열 or 객체 전개 (ft. 영역-전개.)

// 배열
let num = [1,2,3];
let newNum = [...num, 4, 5]

console.log(newNum) // [1,2,3,4,5]

// 객체
let profile = {name: "림졍", age: 17};
let profile2 = {...profile}

profile2.name = "림뎡"

console.log(profile.name) // 림졍
console.log(profile2.name) // 림뎡

 

 

나머지 매개변수

• ...arg : 매개변수가 얼만큼 들어올지 모를 때 사용

function test (a, b, ...args) {
	console.log(a, b, ...args) // 배열 펼쳐서 출력
   	console.log(args) // 배열 모아서 출력
}

test (1, 2, 3) 
// 1 2 3
// [ 3 ]
---
test (1, 2, 3, 4, 5, 6, 7) 
// 1 2 3 4 5 6 7
//[ 3, 4, 5, 6, 7 ]

 

 

템플릿 리터럴

• 백틱(`) 과 ${} 사용, 멀티 라인 구현 가능
  +) 맥북은 option + '₩' 키 눌러줘야 백틱 키 눌러짐! 쉽지 않다..!

const name = "림졍";
const age = "17";

const user2 = { name, age };

console.log(`안녕! 나는 ${user2.name}.
   
  > . <
  
    나이는 ${10+7}!
  `)
  
  /* 안녕! 나는 림졍.
   
  > . <
  
    나이는 17! */

 

 

named export vs default export

 

- named export

• 하나의 모듈에서 여러 항목을 내보내기 가능
• 하나의 파일에서 여러 변수/클래스 등 export 가능
• 내보낼 항목들을 이름으로 구분, 필요할 때 해당 이름을 사용하여 가져옴

- default export

• 모듈에서 하나의 기본 값을 내보낼 때 사용
• 모듈에서 단 하나의 값만 export 가능
• 이름 없이 내보내기 가능 → 가져올 때 자유롭게 이름 지정 가능

 

 

일급 객체로서의 함수

 

일급 객체로서의 함수

• 자바스크립트에서 '함수 = 일급객체(first-class object)'
  → ∴ 함수? 객체처럼 다룰 수 있다!(= 다양한 조합 및 유연하게 사용 가능!)
• 장점 : 간결한 코드 작성 및 쉬운 유지보수
  +) 리팩토링 : 불필요한 복잡함 제거 + 코드 구조, 더 깔끔하고 명확하게 만드는 작업 

// 리펙토링 예시
function createDivider(num) {
  return function(x) {
    return x / num;
  }
}

function add(x,y) {
  return x+y;
}

const divideTwo = createDivider(2);
const divideFive = createDivider(5);

const result = add(divideTwo(10), divideFive(50));
console.log(result); // 5 + 10 = 15

 

 

변수에 함수 할당

• 할당 가능 → why? 함수는 값으로 취급되기 때문!

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

 

 

함수를 인자로 다른 함수에 전달

• 함수가 값으로 취급되므로 다른 함수의 인자로 전달 가능
• 콜백 or 고차 함수 작성 시 사용
  - 콜백 함수 (callback) : 어떤 함수의 매개변수로 쓰이는 함수
  - 고차 함수 (higher - order function) : 함수를 인자로 받거나 함수를 리턴하는 함수

function callFunction(func) {
  func(); //함수를 매개변수로 받고, 그대로 실행함
}
const sayHello = function() {
  console.log('Hello!');
}; // callFunction이 고차함수, 여기서 sayHello가 콜백 함수

callFunction(sayHello); // "Hello!" 출력

 

 

함수를 반환

• 함수는 값으로 취급되므로 다른 함수로 반환 가능
• 팩토리 (factory) 함수나 클로저(closure) 작성 시 사용

- factory 함수

• 새로운 객체 or 함수를 생성하여 반환하는 함수.
• 매번 호출될 때마다 새 객체 or 함수 인스턴스 반환 (동작 like 공장)
• 객체의 프로퍼티로 함수를 할당

// 함수 case
function createDivider(num) {
  return function(x) {
    return x / num;
  }
}

const divideTwo = createDivider(2);
console.log(divideTwo(10)); // 5

// 바보같은 림졍림졍아... 백틱과 작은따옴표를 헷갈리지 마렴...
// 객체 case
function createUser(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender,
    introduce: function() {
      console.log(`안녕! 나는 ${this.name}이고, ${this.age}살 ${this.gender}야.`);
  }
};
}

const user1 = createUser('림졍', 17, '여자');
user1.introduce(); // 안녕! 나는 림졍이고, 17살 여자야.

 

- closure 

• 함수가 반환된 후에도 그 함수가 선언될 당시의 환경(변수들) 을 기억하는 특성
  +) 그 당시의 환경 = 렉시컬 환경 (참고.)

// 'outerFunction'의 매개변수 'outside'는 클로저 덕에 'innerFunction'에서 계속 참조 가능.
// 'innerFunction', 실행 시 자신의 매개변수 'inside'와 클로저로 기억된 'outerFunction'의 변수들 동시 사용 가능
function outerFunction(outside) {
  return function innerFunction(inside) {
      console.log(`outer: ${outside}, inner: ${inside}`);
  }
}

const createFunction = outerFunction('out');
createFunction('in'); //outer: out, inner: in

 

 

객체의 프로퍼티로 함수 할당

• 함수, 객체의 메서드로 호출 가능

const fruits = {
  name: '딸기',
  color: 'Red',
  taste: 'Sweet & Sour',
  tastenotes: function() {
    console.log(`${this.name}의 taste는 ${this.taste}`);
  }
};

fruits.tastenotes(); // 딸기의 taste는 Sweet & Sour

 

 

배열의 요소로 함수 할당

• 함수, 배열에서 사용 가능!

const Arrays = [
  function(a, b) {
    return a * b;
  },
  function(a, b) {
    return a / b;
  }
];

console.log(Arrays[0](5, 10)); // 50
console.log(Arrays[1](10, 5)); // 2

 

 

Map 과 Set

 

등장배경

• JS, 많은 복잡한 프로그램 제작 가능 (객체&배열 활용.)
• but 현실의 여러 문제 프로그래밍적으로 반영하기엔 새로운 데이터 형태 요구됨.

∴ 기존(객체&배열)보다 데이터의 구성, 검색, 사용 효율적 처리하기 위해 등장!

 

Map

• key-value 쌍을 저장하는 객체와 비슷! 각 쌍의 key 와 value 값을 저장
• 객체와 달리 key 로 all 데이터 타입 사용 가능 → key 가 정렬된 순서대로 저장되기 때문, 추가산 순서대로 반복할 필요 X!
  (tmi_객체는 key 값으로 문자 형태를 갖는다.)

 

Map을 사용하여 수행 가능한 작업 (4)

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map크기 및 존재 여부 확인(size)

 

Map의 주요 메서드 및 프로퍼티

 

- 맵 만들기 : Map()

const myMap = new Map();

 

- 값 추가 : set() [map.set(key, value)]

myMap.set("key", "value");

console.log(myMap.get("key")); //'value'

 

- 값 검색 : get()

console.log(myMap.get('key')); // 'value' 출력

 

- 반복 : keys(), values(), entries() 메소드 사용 ( 키 /  값 / 키-값 쌍 반복 )

myMap.set("하나", 1);
myMap.set("둘", 2);
myMap.set("셋", 3);
myMap.set("넷", 4);

for (let val of myMap.values()) {
  console.log(val);
  // value;
  // 1;
  // 2;
  // 3;
  // 4;
}

for (let val of myMap.keys()) {
  console.log(val);
  // key;
  // 하나;
  // 둘;
  // 셋;
}
myMap.delete("key");

for (let val of myMap.entries()) {
  console.log(val);
  // [("하나", 1)][("둘", 2)][("셋", 3)][("넷", 4)]
}

 

 

그 외...

• map.get(key) : key 값 반환 (if key 존재 X → undefined 반환)
• map.has(key) : key 존재 → true / 존재 X → false 반환
• map.delete(key) : key 값 삭제
• map.clear() : 맵 안의 모든 요소 제거
• map.size :  요소 개수 반환

 

for - of 반복분

• for - of는 ES6에 추가된 새로운 컬렉션 전용 반복 구문.
• 위의 구문을 사용하기 위해서는 컬렉션 객체가 Symbol.iterator 속성을 가지고 있어야만 함. (직접 명시 가능)

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}

 

 

iterator = 반복자!

• 요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조로 이해하면 된다!
• 아래 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문임.

console.log(myMap.size); //4
console.log(myMap.entries()) //iterator로 감싸져서 나옴
// [Map Entries] { [ '하나', 1 ], [ '둘', 2 ], [ '셋', 3 ], [ '넷', 4 ] }
console.log(myMap.has("two")) //키 기반 검색(false)

 

 

Set

• 고유한 값을 저장하는 자료구조
• 키 저장X! only 값 저장. 값이 중복되지 않는 유일한 요소로만 구성

 

Set을 사용하여 수행 가능한 작업 (4)

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

const mySet = new Set();

mySet.add(4);
mySet.add(6);
mySet.add(4);
mySet.add(5);

console.log(mySet); //Set(3) { 4, 6, 5 }
console.log(mySet.size) //3
console.log(mySet.has(4)); //true

 

 

Iterator (반목문)

• set은 key 가 없으므로 무조건 values만!

// 위에랑 이어서
for (let item of mySet.values()) {
  console.log(item);
  //4 6 5
}

 

 

 

마무리 - 드디어 절반 나갔다...! (강의 진도는 끝나벌임..🥲)

 

ㅅ...ㅅㅏㄹ...ㄹㅕ...ㅈㅜㅓ.....!

 

 

얼레벌레 작성했더니 하루가 꼬박 걸려버린 2주차..!

달리기반 수업은 또 언제 따라가고...

개인과제는 벌써 끝냈다는 사람들도 많다던데.. 나는 언제 다 하려나..? 🤷🏻‍♂️

여튼 열분... 내일 꼭 돌아올게요?

(내일도 JS.. 열심히 적어야겠지..? 그냥 개인과제 적을까..? 아 고민된다. ㅇ<-<)

 

 

그래서 오늘의 KPT 회고는요?

• Keep :  포기안하고 2주차 끝낸 림졍! 대다내!
• Problem : 근데 이제는 효율적으로 작성해봐야지 ^-^?
• Try : 할땐 하고, 쉴땐 쉬자! 가보작호-!

.

.

.

끝!