본문 바로가기
카테고리 없음

[코드잇 스프린트 5주차] 모던 자바스크립트

아니원 2023. 10. 3. 15:57

✏️ 모던 자바스크립트 이해하기

1-01. 모던 자바스크립트란? 

- Modern JavaScript : 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트

 

1-03. ECMAScript 더 알아보기

- JavaScript vs ECMAScript

  • JavaScipt는 프로그래밍 언어(ECMAScript를 준수해서 만든 결과물) vs ECMAScript는 프로그래밍 언어의 표준(설명서)
  • 모든 스크립트 언어라면 ECMAScript를 꼭 지켜야 한다
  • JavaScript는 ECMAScript를 기반 + 다른 부가적 기능

✏️ 자바스크립트의 동작 원리 

2-01. 데이터 타입의 특징과 종류

- 자바스크립트는 유연한 데이터 타입을 가지고 있다. (변수에 데이터 타입 저장 x)

- 추가적으로 생겨난 자료형(기본형) -> 잘 쓸 일은 없다,,

  • Symbol : 유일한 값을 만들 때 -> 어떤 값과 비교해도 자기 자신이 아니라면 true가 될 수 없음!
  • BigInt : 엄청 큰 수를 다룰 때

 

2-03. typeof 연산자

- typeof null의 return값은 object다.

- 자바스크립트에서 함수는 객체로 취급된다.

- typeof 함수의 return값은 function!

 

2-05. 불린인 듯 불린 아닌 불린같은 값 

- Falsy 값 : false, null, undefined, NaN, 0, ' '

- Truthy 값 : false로 형변환되는 값 제외한 나머지 값들

- [ ](빈 배열)과 { }(빈 객체) 는 truthy값이다!

- 문자열을 숫자로 형 변환하면 NaN !!

 

2-07. AND와 OR의 연산 방식

console.log('Codeit' && 'JavaScript'); //JavaScript

- && 연산자는 왼쪽 값이 false인 경우 -> 그대로 왼쪽 값을 return (하나라도 false면 바로 return)

- 왼쪽 값이 true인 경우 -> 오른쪽 값을 return

console.log(null && undefined); //null
console.log(0 || true); //true
console.log('0' && NaN); //NaN
console.log({} || 123); //{}

- || 연산자는 왼쪽 값이 true면 -> 그대로 왼쪽 값을 return (하나라도 true면 바로 return)

- 왼쪽 값이 false면 -> 오른쪽 값을 return

 

2-08. AND와 OR의 연산 우선순위

- AND > OR

 

2-10. null 병합 연산자 ??

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

- ?? : null 또는 undefined값을 고르지 않는 연산자

- 왼쪽부터 검사해서 null / undefined값이 아니면 바로 return

- OR과의 차이 : 왼쪽값이 falsy값이더라도 null / undefined가 아니라면 return해줌! -> null이랑 undefined만 가려내는 것!

 

2-11. 변수와 스코프

- var : 호이스팅 가능(선언 부분만 끌어올려지므로 값을 할당했더라도 값에는 접근 x), 함수 스코프

- let : 값의 재할당이 필요한 경우, 블록 스코프

- const : 재할당이 필요하지 않은 경우

✏️ 함수 다루기 

3-01. 함수를 만드는 방법

// 1. 함수 선언(Function Declaration)
function 함수이름(파라미터) {
  동작
  return 리턴값;
}

// 2. 함수 표현식(Function Expression)
const printCodeit = function () {
  console.log('Coodeit');
};

- 함수 표현식 : 함수 선언을 하나의 값처럼 사용하는 것 !

- 함수 선언 방식은 호이스팅 가능 vs 함수 표현식은 불가능

- 함수 선언 방식은 함수 스코프

- 함수 표현식은 할당된 변수에 따라 스코프가 정해짐

 

3-03. 이름이 있는 함수 표현식

// 함수 이름을 따로 붙여주지 않는 경우에는 변수명 == 함수명
const sayHi = function () {
  console.log('Hi');
};

// 함수 이름을 붙여주는 경우 -> 그러나 이 함수 이름은 함수 자체 내부에서만 사용 가능!
const sayHi = function printHiInConsole() {
  console.log('Hi');
};

 

3-04. 즉시 실행 함수 (IIFE)

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

- 함수 자체를 소괄호로 감싸고 뒤에 소괄호를 붙여주면 함수 선언과 동시에 실행됨

- 함수에 이름을 붙여주더라도 외부에서 재사용 불가

- 처음에 프로그램이 실행될 때 수행되는 코드에 주로 사용

 

3-05. 값으로서 함수

- 자바스크립트에서 함수는 객체다.

- 함수는 변수나 다른 데이터 구조 안에 할당될 수 있다.

- 콜백함수 : 다른 함수의 파라미터에 전달되는 함수

function getPrintHi() {
  return function () {
    console.log('Hi!?');
  };
};

getPrintHi(); //함수 자체를 return하는 것이기 때문에 콘솔에 출력x
getPrintHi()(); //고차함수 한번에 호출 가능

- 다른 함수의 return값이 함수가 될 수도 있음

- 자바스크립트는 일급 함수를 가진 프로그래밍 언어!

 

3-09. Arguments

- 함수 내에서 Arguments 객체(유사 배열) 사용 가능 -> arguments 개수에 따라 유연하게 동작하는 함수 구현할 때 사용

- arguments[0] 과 같이 사용 가능

 

3-10. Rest Parameter

- Rest Parameter : 배열이기 때문에 배열 메소드 사용 가능 -> arguments의 배열 메소드를 사용 못한다는 점 보완

- 일반 파라미터와 사용할 때는 반드시 가장 마지막에 사용해야 함!

function printArg(first, second, ...args){
  for(const arg of args){
    console.log(arg);
  }
};

 

3-13. Arrow Function

const getTwice = (num) => {
  return num*2;
}

const getTwice = num => num*2;

- 함수 코드를 간결하게 작성하기 위해 사용

- 파라미터가 1개인 경우에만 () 생략 가능

- return문 한 줄로 구성된 함수인 경우 -> {}와 return 생략 가능

- arguments 객체가 없음

 

3-15. What is this?

- this : 함수를 호출한 객체를 가리키는 키워드

- this의 기본값 : window 객체

- 객체의 메소드를 만들 때 중요한 역할

function getFullName(){
  return `${this.firstName} ${this.lastName}`;
}

console.log(user.getFullName());
console.log(admin.getFullName());

- 객체의 메소드를 만들때는 arrow function 대신 일반 함수 권장! (arrow function은 호출한 객체를 가리키지 x)

✏️ 자바스크립트의 문법과 표현 

4-01. 문장과 표현식

- 문장 (statements) : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 (ex. 선언문, 조건문 등)

- 표현식 (expressions) : 결과적으로 하나의 값이 되는 모든 코드 (하나의 값, 연산식 등)

- 표현식인 문장 vs 표현식이 아닌 문장 -> 문장을 변수에 할당하거나 함수의 아규먼트로 전달해보면 구분 가능 (할당되거나 전달되면 표현식o)

 

4-02. 조건을 다루는 표현식

- 조건 연산자 = 삼항 연산자

score > CUT_OFF ? '합격' : '불합격'; //조건 ? true 표현식 : flase 표현식

 

4-04. Spread 구문

- 여러 개로 묶어진 배열을 각각의 값으로 펼치는 것

const num = [1, 2, 3];
console.log(...num); //1 2 3

//배열 복사
const num_copy = [...num, 4, 5];

//배열 합치기
const num3 = [...num, ...num_copy]

//객체로 만들기
const newObj = {...num}; //{0:1, 1:2, 2:3}

- 직관적으로 배열 다룰 수 있음

- 하나의 값을 펼친 여러 값의 목록이기 때문에 값이 아니다!

 

4-05. 객체 Spread 하기

- ES2018에서 일반 객체에도 Spread 구문을 사용할 수 있도록 업데이트됨

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte, //Spread 문법!
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}

- 객체 spread는 함수의 아규먼트 / 새로운 배열 만들 때 사용 불가 !!

 

4-07. 모던한 프로퍼티 표기법

const title = 'hw';
const birth = '2002';
const job = '없음';

const user = {
  title, //title : title 처럼 같을 때는 생략 가능 !
  birth,
  job,
  getFullName(){
    return `${birth}`;
  },
  [변수값] : 값,
  [함수의 return값] : 값,
}

 

4-09. 옵셔널 체이닝

function printCatName(user) {
  console.log(user.cat?.name);
}

- cat 프로퍼티가 없는 user 객체에도 유연하게 사용 가능

- user.cat이 undefined나 null이 아니면 그 다음 프로퍼티 값을 return, 아니면 undefined를 return

 

4-10. Destructuring (구조 분해) - 배열

const rank = ['유나', '효준', '민환', '재하', '규식'];
const [macbook, ipad, airpods, ...coupon] = rank;

- 꼭 두 배열의 개수를 맞춰줄 필요는 없다.

 

4-12. Destructuring (구조 분해) - 객체

const macbook = {
  title : '맥북 프로',
  price : 3690000,
  memory : '16GB',
}

const {title, price} = macbook;
const {title : product, ...rest} = macbook; //title 프로퍼티를 product란 변수로 지정하고 싶을 때

- 순서와 상관없이 해당 변수 이름과 똑같은 프로퍼티를 가지고 있으면 그 프로퍼티 값이 할당되는 방식

 

4-16. 에러와 에러 객체

- 자바스크립트는 에러가 발생하면 에러에 대한 정보가 담긴 에러 객체 생성

- 에러 객체 이름(name) : 구체적인 메세지(message) 형태

const error = new TypeError('타입 에러가 발생!'); //에러 객체 만들기
throw error; //일부러 에러 발생시키기

 

4-17. try catch문

try{
  // 코드
} catch (error) { //예외 처리 (Exception Handling)
  // 에러가 발생했을 때 동작할 코드
} finally{
  // try..catch문 뒤에 항상 실행할 코드
}

- try 블록 내에서 에러가 발생한 코드 line 이후의 코드들은 실행 x -> 에러 발생했으면 바로 catch 코드가 실행되는 것

- finally문에서 에러가 발생했다고 다시 위에 catch로 넘어가지는 않는다.

 

4-18. try catch 활용하기

- 에러가 발생하더라도 catch문으로 에러일 때 코드를 다뤄주면 -> 이후 코드도 실행 가능

=> 훨씬 더 안정적인 프로그램을 만들 수 있는 것

✏️ 자바스크립트의 유용한 내부 기능 

5-01. 배열 메소드 I : forEach와 map

const members = ['순영', '석민', '승관', '민기'];

// arr.forEach() : return값은 undefined
members.forEach((member, idx, arr) => {
  console.log(`${member}님이 입장하셨습니다.`);
});

// arr.map() : return값들로 구성된 새로운 배열을 return
const fullNames = members.map((member, idx) => {
  return 'idx번째 멤버 : member[idx]'
});

- 처음에 forEach/map()을 호출했을 때 배열의 개수만큼만 반복! -> 안에서 배열 원소 추가해도 상관x

- 배열 원소 삭제하는건 그 만큼 반복 안함 ,,

 

5-04. 배열 메소드 II : filter와 find 

// arr.filter() : 조건문이 true인 요소만 모아놓은 배열을 reuturn
const apples = devices.filter((el) => el.brand === 'Apple');

//arr.find() : 조건문을 만족하는 유일한 값을 찾고 싶을 때
const apples = devices.find((el) => el.brand === 'Apple');

- filter()는 무조건 배열 전체를 반복

- find()는 조건 만족하는 원소 하나 찾으면 break! 더이상 확인 안함

 

5-07. 배열 메소드 III : some과 every

const numbers = [1, 3, 5, 7, 9];

// arr.some() : 조건을 만족시키는 요소가 하나라도 있는지
const someReturn = numbers.some((el) => el > 5); //true

// arr.every() : 모든 요소가 조건을 만족시키는지
const everyReturn = numbers.every((el) => el > 5); //false

- some()은 조건을 만족하는 첫 번째 요소를 찾으면 바로 return

- every()는 조건을 만족하지 않는 요소를 찾으면 바로 return

- 빈 배열(truthy)을 넣으면 무조건 some은 false, every는 true를 return! -> 빈 배열을 넣으면 every()는 애초에 콜백함수를 호출하지 않는다,, 그래서 기본값으로 설정한 true를 return하는 것! (false를 찾을 때만 false를 return하도록 설계되어 있음)

 

5-09. 배열 메소드 IV : reduce

const numbers = [1, 2, 3, 4];
/*
* acc : 콜백함수가 직전의 원소에 대해 return한 값
* initialAccValue : 첫 번째 콜백함수는 acc값이 정해지지 않았기 때문에 따로 파라미터로 전달
*/
members.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue);

- initialAccValue를 설정해주지 않으면 배열의 0번 인덱스 값이 디폴트로 들어가고, 1번 인덱스부터 reduce 실행!

 

5-11. sort, reverse

// arr.sort() : 문자열 순서에 따라 정렬하는 게 디폴트
const numbers = [1, 10, 4, 21, 36000];
numbers.sort(); // [1, 10, 21, 36000, 4]

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // [36000, 21, 10, 4, 1]

- sort()의 콜백함수 작성시 return값에 따른 순서

  • return < 0 : a가 b보다 앞에
  • return == 0 : a, b 그대로
  • return > 0 : b가 a보다 앞에

- arr.reverse() : 배열의 원소 순서를 뒤집어 준다.

- sort / reverse는 원본 배열을 바꾸는 것 !

 

5-12. Map, Set

- Map과 Set은 메소드를 이용해서 값을 다룰 수 있다.

- Map : 이름(key)이 있는 데이터를 저장한다는 점에서 객체와 비슷

// Map 생성
const codeit = new Map();

// set(key, value)
codeit.set('title', '문자열 key');

// get(key) : key를 이용해 value 찾기
console.log(codeit.get('title')); // 문자열 key

// has(key) : key가 존재하는지
console.log(codeit.has('title')); // true
console.log(codeit.has('name')); // false

// size 프로퍼티
console.log(codeit.size);

// delete(key) : key에 해당하는 값 삭제
codeit.delete('title');

// clear() : Map 안에 모든 요소 삭제
codeit.clear();

- Set : 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷

- Set의 개별값에는 직접 접근 불가

- Set은 중복된 값 허용 x

// Set 생성
const members = new Set();

// add(value) : value값 추가
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}

// has(value) : Set 안에 value가 있는지 검사
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

// size 프로퍼티
console.log(members.size);

// delete(value)
members.delete('종훈'); // false, Set 내에 없는 값이므로 제거 실패
members.delete('태호'); // true

// clear() : Set 안에 모든 값 삭제
members.clear();

✏️ 자바스크립트 모듈 

6-01. 모듈이란?

- 모듈화(Modularization) : 하나의 큰 파일보다는 각 기능별로 여러 개의 파일(모듈)로 분리해서 관리하는 것

- 모듈화 장점

  • 코드 효율적으로 관리 가능
  • 다른 프로그램에서 재사용 가능

 

6-02. 모듈 파일의 조건

- 모듈 스코프 : 모듈 파일만이 가지는 독립적인 스코프 -> 모듈에서 선언한 변수나 함수는 그 파일에서만 사용할 수 있어야 함 !

<body>
    <script type = "module" src = "index.js"></script>
</body>

- 모듈 스코프 설정하는 법 : type 속성을 "module" 설정

- 모듈 문법 사용할 때는 꼭 서버를 통해서 파일을 실행해야 함 !!

 

6-05. 모듈 문법

- 모듈 문법 : 다른 모듈에 있는 함수나 변수를 사용할 수 있도록 하는 문법

- 내보내기

//다른 모듈에서 사용할 수 있도록 선언 하는 부분 앞에 export를 쓴다
export const title = "Codeit";

- 불러오기

import { title } from '/printer.js';

- 모듈 문법을 사용해서 html 파일에서는 자바스크립트 파일 하나만 불러오는 방식으로 사용!

 

6-07. 이름 바꾸기

- 이미 다른 모듈 파일에서 사용하고 있는 변수명을 쓰고 싶을 때 -> 모듈에서 불러오는 변수명을 변경해주기!

import {title as printerTitle} from './printer.js';

 

6-09. 한꺼번에 다루기

import * as printerJS from './printer.js';
console.log(printerJS.title);

- 객체 프로퍼티처럼 다룰 수 있음.

//각 선언마다 붙이지 말고 한꺼번에 모아서
export {title as printerTitle, print};

- export할 때 미리 변수 이름을 바꿔줄 수 있다.

 

6-11. default export

export default 'codeit';

import {
  default as codeit, //반드시 as로 변수 이름 지정해줘야함!
} from './members.js'

- Default Export : 하나의 대상만 export하는 방식

- Named Export : 여러 대상을 export하는 방식

- 하나의 모듈 내에서 딱 한 번만 사용 가능

import codeit, {
	//Named export
} from ~

- default export는 이런식으로 { } 밖으로 꺼낼 수 있음!

2023/10/03

뭔가 이번 챕터는 '모던'이라는 말에 맞게 코드를 간편하게 쓸 수 있는 기법들에 대해 많이 배운 것 같다!

배열 메소드 익숙해지도록 노력해야지,, ps하는 데도 한번씩 써보는 걸 목표로 해야겠다!

그리고 모듈로 나누기,, 흠 아직은 어떤 기준으로 파일을 나눠서 관리해야 할지 잘 모르겠지만 위클리 때 한번 시도해 봐야겠다 !@

 

저작자표시

티스토리툴바