[내배캠] 5/10 19일차

변수와 상수, 변수의 종류, 변수의 범위

var는 왜 사용하면 안되는가?

let 과 const 는 블록 단위 scope이다.

var는 함수 scope를 가지기 때문에 블록 안에 선언을 해도 바깥 영역에서도 사용이 되기 때문이다.

호이스팅 문제 : 변수들을 위로 올리는 과정에서 문제가 생길 수 있다.

var는 undefined로 할당되기 때문에 선언 전에 변수를 불러와도 undefined라고 출력이 될 수 있다.

범위에 대한것 , 가독성 x

변수 선언은 그냥 const를 먼저 사용하고 값을 재할당할 일이 있을 때 let으로 바꿔준다!

let, var 재할당 가능

const 재할당 불가능

상수 선언의 중요성

• const로 선언하면 아 값이 변경이 되지 않는 것을 표현이 되기 때문에 의도치 않은 버그를 예방할 수 있다(다른 개발자가 이해하기 쉽다)
• 선언한 블록안에서만 쓰여서 예측 가능한 코드를 작성할 수 있다.

객체

JSON : javascript object notation <이것도 객체

객체 접근 법

• 점(.) 표기법 : user.name
• 괄호 표기법 : user[’age’]

delete user.name; //객체를 삭제하는 법

객체는 불변성을 유지하는게 중요하다.

객체 key 값만 가져오기

Object.keys(객체이름);

객체 value만 가져오기

Object.values(객체이름);

객체를 [key, value] 배열로 반환

Object.entries(객체이름);

객체에 객체를 더하기

Object.assign(대상객체, 출처객체);

배열

순차적으로 데이터가 저장된다.

map은 원본 배열의 길이만큼 새로운 배열을 반환한다. return 값이 있어야됨.

filter test를 통과하는 모든 요소를 새로운 배열로 반환한다. return

reduce는 주어진 함수를 실행한 것을 누적한 값을 반환한다. reduce는 인자가 두개가 필요한데, 첫번째 인자는 누적되는 값을 반환하는 인자이고 두번째는 배열의 값을 차례로 보여주는 값이다.

두번째 인자인 현재 값이 인덱스1(두번째)부터 시작하기때문에 실행되는 횟수는 배열의 갯수보다 -1만큼 돌게된다.

sort는 정렬을 위한 함수이다. 아무 것도 없이 sort()만 하면 사전적 순서로 배열을 반환한다. 원본 배열 자체를 바꾸는 것이다.

숫자는 비교함수가 없으면 유니코드 기반으로 정렬하고 sort(a,b)를 a-b는 오름차순 b-a는 내림차순으로 return해주면 된다

Template Literals

변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 것. 백틱으로 사용한다.(`)

`안녕하세요 저는 ${name}입니다.`;

Destructuring

구조를 분해하는 것. 객체나 배열의 속성을 추출해내는 것을 많이 쓰는 데 이때 많이 쓰인다고 한다.

• 객체

  const item = {
  	name: "coffee",
  	price: 4000,
  	taste: {
  		body : light,
  		acidity: low,
  	}
  }
  
  const { name, price } = item; //이렇게 사용하거나
  
  function greet ({ name, price }){ //인자값에 이렇게 분해해
  	console.log(`this is ${name} and price is ${age}`);
  }
  
  greet(item); //이렇게 사용 가능
  
  //taste 같이 중첩 객체를 구조분해할당하는 법
  const { name, taste:{ body } } = item;

  객체 안의 key 이름을 그대로 써야하지만 바꾸고 싶을때는

  const { name, date: firstDate } = buy;

  이렇게 이름을 바꿔줄 수 있다.
  
• 배열 배열의 destructuring은.. 대괄호로

  const colors = [ "red", "yellow", "black"];
  const [one, two] = colors;
  
  console.log(one, two); //"red", "yellow"

  이렇게 배열의 순서에 맞는 곳에 있는 값을 나타내준다.
  

Spread Operators

• 객체

객체를 복사하고 싶을 때, spread operator를 쓰면 쉽게 복사할 수 있다.

객체나 배열을 복사할때 정말 많이 쓰인다.

const obj = {
	a : 1,
	b : 2,
}

const newObj = { ...obj }; //spread operators

이렇게 복사하면 서로 독립적인 객체가 된다.

그냥

const newOdj = obj;

이런 식으로 복사를 하게 되면 newObj를 가지고 값을 변경하면 원본 객체인 obj까지 값이 변경되는 불상사가 일어나기 때문이다.

→ 왜?

그 값의 주소 값을 복사해서 가져온 거기 때문. 같은 공동 영역을 쓰고있는데 퍼간 애가 변경해서 원래 애가 피해보게 되는것.

객체를 합칠 때는

const obj1 = { name: 'a', age: 1 };
const obj2 = { address: 'b', age: 2 };

const mergeObj = {...obj1, ...obj2};

console.log(mergeObj); //{ name: "a", age: 2, address: "b" };

이렇게 사용하게 된다. 하지만 key값이 같은 것이 있다면 뒤에 있는 객체가 앞의 객체의 값을 덮는다.

• 배열

배열을 합칠때도..

const first = [1,2,3];
const second = [4,5,6];

const combine = [...first, ...second];

이렇게 합칠 수 있다. ****

spread operator를 사용하면 불변성을 지킬수 있다.

rest operator

spread operator와 비슷하다.

...변수명

이렇게 쓰면된다.

얘는 함수의 매개변수에 쓰인다, 여러값을 그룹핑할때 쓰인다.

• 매개변수로써 쓰일 때

const sum = (...numbers) => { //이렇게 하면
	return numbers.reduce((acc,cur)=> acc+cur);
}

const result = sum(1,2,3,4,5); //배열이 아니지만
console.log(result);

함수의 매개변수로 넣은 값은 배열이 아니지만 rest operator를 사요하면 numbers가 배열이 된다.

• 그룹핑할 때

const person = {
	name : 'a',
	age : 15,
	country : 'kor',
}

const { name, ...rest } = person;

console.log(rest); //{ age: 15, country: 'kor' }

이렇게 name을 제외한 나머지 값들이 나오게 된다.

화살표 함수

const add = (a, b) => {
	return a + b;
}

const add = (a, b) => a + b;

const print = a => console.log(a);

삼항연산자

score > 50 ? "good" : "bad";

단축평가

논리연산자를 활용(||, &&, ? 등등)

• 논리 합 연산자

return user.name || "신원미상";

이런 식이 있을 때, 왼쪽 값이 falsy한 값일 때 오른쪽이 실행된다.

• 논리 곱 연산자

loggedIn && console.log("로그인된걸 환영합니다.);

왼쪽 값이 truthy한 값일 때 오른쪽이 실행된다.

• optional chaining

console.log(user.profile?.details.age);

이렇게 이 값이 존재하는지 모르겠을 때 이렇게 ?를 붙여서 값이 없다면 그냥 undefined를 출력시키게 해준다.

변수에도 쓸수있지만, 함수에도 옵셔널 체인닝을 쓸수 있다.

user.printHello?.();

• null 병합 연산자

논리 합 연산자와 비슷함.

console.log(userLocation ?? "없는 위치");

이 코드의 경우 userLocation이 존재하지 않으면(null이나 undefined면) 우측에 있는 값을 반환하게 한다.

이 경우에 논리 합 연산자와 비슷할 수 있으나,

0의 값에서 갈리게 된다.

0은 falsy한 값, 즉 truthy하지 않기 때문에 논리 합 연산자에선 0이 있으면 우측 값을 반환하지만, null 병합 연산자는 0은 빈 값이 아닌 0이란 값이 존재한다고 해석하기 때문에 0의 값이 나오게 된다.

모듈

ES6 modules

자바스크립트는 브라우저 환경과 node 환경이 존재한다.

node 환경에서의 모듈 import 방식은 CommonJS 방식과 ES6 방식이 있다.

React 에서는 주로 ES6방식을 사용한다.

• 사용방법 export 구문으로 함수를 내보내 import 구문으로 다른 파일에서 함수를 불러와 사용할 수 있다.
  

• 모듈을 사용해야 하는 이유
  • 명확한 종속성 관리 소스코드를 script 태그를 사용해서 로드하게 되는 방식을 사용하면 종속성과 로딩 순서를 수동으로 관리해야했다. 프로젝트가 커질수록 관리하기 어려워진다. 하지만 ES6모듈을 사용하면 이런 불편함이 사라진다.
    
  • 코드 캡슐화와 충돌 방지 캡슐화는 함수안에 중요한 정보를 감추고 함수명만 보이게 할 수 있으며 import할 때 함수 이름이 같아도 서로 이름이 충돌하는걸 막아준다.(닉네임을 사용한다던지)
    
  • 호율적인 코드 로딩 모듈 시스템을 통해 필요한 기능만 선택적으로 불러올 수 있다. 이는 애플리케이션의 초기로딩 시간을 단축시킨다. 30개의 모듈이 들어있는 js파일에서 모듈 2개만 사용하고 싶을때 전통적인 js에선 모든 것을 가져왔어야 했는데 코드 스플리팅을 통해 원하는 만큼만 불러올수 있게 된다.(지연로딩 : 필요한것부터 로딩하고 나머지는 천천히)
• 이름 바꾸기와 기본 내보내기
  • 별칭 사용

    import { addNumberAandB as add } from './utils.js';

  • 기본 내보내기 한 모듈에서 하나의 기본 값을 내보내고 쉽게 가져온다.

    export default function multi(x, y){
    	return x * y;
    }
    
    import multiply from './math.js';
    console.log(multiply(6,7));

    이 코드 같은 경우엔 export defalut가 하나밖에 없기 때문에 import할 때 중괄호를 사용하지 않고 이름도 바꿔서 가져와도 상관없다(어짜피 하나만 가져오는것이라서)
    
• 전체 모듈 가져오기
  • 전체 내용 가져오기

    import * as MathFunc from "./math.js";
    
    console.log(MathFunc.add(10, 5));
    console.log(MathFunc.multi(2, 5));

    이렇게 모든걸 한번에 가져올 수 있다.
    

Promise

비동기 작업의 최종 완료 또는 실패를 나타내는 객체이다. 비동기 작업이 수행될 때 그 결과를 나중에 받기 위한 ‘약속’으로 사용된다.

• Pending(대기중) : 초기상태, 아직 상태가 결정되지 않은 상태
• Fulfilled(이행됨) : 연산이 성공적으로 완료되어 결과를 반환한 상태
• Rejected(거부됨) : 연산이 실패하거나 오류가 발생한 상태

Promise 객체를 사용하면 비동기 작업의 결과에 따라 콜백함수를 연결할 수 있다.

.then(), .catch(), resolve, reject

Async/Await

• async

함수 선언 앞에 붙여 정의한다. 이 함수는 “항상” Promise를 반환함.

async function fetchData(){
	return "data loaded";
}

//위와 아래 함수는 똑같다.
async function fetchData(){
	return Promise.resolve("data loaded");
}

• await

프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단하고 프로미스가 해결되면 자동으로 함수의 실행을 재개

async function fetchData(){
	const data = await fetch("url");
	const json = await data.json();
}

위 함수 안에 코드를 봤을 때, data가 일단 먼저 실행이 되야 json을 받아오기 때문에 url에있는 데이터를 일단 fetch하는 것을 실행하기 위해 앞에 await을 붙여준다. 그러면 data가 완료가 되고나서 json을 받아오게 하는 것이다. 아직 완료될 때까지 기다리지 않으면 pending 상태에서 다루게 된다..

오늘 배운 것, 느낀 점

오늘은 react를 시작하면서 개인과제가 시작된 날이었다. 또한 분반으로 진행되는 특강도 시작되었다. react 1주차의 강의는 javascript의 개념을 다시 한번 되짚어 본다는 느낌이 강했고 어떤 기술이 react에서 더 잘 사용되는지 확인할 수 있었다. 또 특강에서는 챌린지 반에서는 어떤것을 배우고 어떤 기조로 수업을 진행할 건지와 vscode의 익스텐션을 까는것으로 마무리 지었다. 전체적으로 시작하는 느낌이 강했는데, 새로운 팀원 분들과 한달 남짓하게 같이 공부하게 되었으니 일단 다시 힘을 내봐야겠다! react 시작을 해보자! 아자아자

내일은 주말이지만 팀프로젝트 ReadME와 조금의 리팩토링을 시도해봐야겠다. 그리고 velog에 게시글 올리는 것 까지가 목표..!