Week5 - 모던 자바스크립트

oauch·2023년 9월 28일

코드잇 스프린트 1기

목록 보기
10/11
post-thumbnail

🧩 ECMAScript

JavaScript = 프로그래밍 언어
ECMAScript = 자바스크립트의 표준 (이하 ES)

둘이 같은거는 아닙니다.

ECMAScript = 설명서
자바스크립트 = 결과물
🔥 이런 느낌?

자바스크립트는 ES6 이전, 이후로 나뉠 수 있다.
그만큼 ES6부터 큰 변화가 일어났다.
이름도 ES6부터는 (2015년부터) ECMAScript 2015로 년도를 붙이기 시작

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

🧩 데이터 타입의 특징 / 종류

📌 Symbol

  • 유일한 값을 만들때
  • 다음과 같이 다른 어떤 값을 비교해도 true가 될 수 없다.
const bee = Symbol('Hello world');

bee === 'Hello';			// false
bee === 'world';			// false
bee === 'Hello world;		// false
  • 같은 값을 비교해도 false
const bee1 = Symbol('Hello world');
const bee2 = Symbol('Hello world');

console.log(bee1 === bee2);		// false

📌 BigInt

  • 엄청 큰 숫자를 다룰때

🔥 신기한 사실

  • typeof null = object
  • typeof function = function (object를 내뱉는거 아니라는거 명심)

📌 Boolean인데 Boolean이 아니다?

False(Falsy) = false, null, undefined, NaN, 0, ''
True(Truthy) = 나머지 값들, 빈 배열값 [], 빈 객체값 {}


📌 Truthy / Falsy 연습

  • AND 연산자
    • 왼쪽값 Falsy = 왼쪽값 출력
    • 왼쪽값 Truthy = 오른쪽값 출력
  • OR 연산자
    • 왼쪽값 Falsy = 오른쪽값 출력
    • 왼쪽값 Truthy = 왼쪽값 출력
console.log(null && undefined);		// null
console.log(0 || true);				// true
console.log('0' && NaN);			// NaN
console.log({} || 123);				// {}

📌 AND / OR의 연산 우선순위

  • AND > OR 우선순위가 AND가 더 높다

📌 null 병합 연산자

  • ?? : null 혹은 undefined 값을 가려내는 연산
  • 연산자 왼쪽값이 null이거나 undefined라면 연산자 오른쪽값 출력
  • 연산자 왼쪽값이 null이거나 undefined가 아니라면 연산자 왼쪽값 출력

🧩 함수 선언 (Function Declaration)

function 함수이름(파라미터) {
    동작
    return 리턴값;
 }

🧩 함수 표현식 (Function Expression)

const printBee = function() {
   console.log('Bee');
};

🧩 기명 함수 표현식 (Named Function Expression)

  • 기명 함수 표현식은 함수 이름을 함수내부 에서만 사용가능하고, 외부에서 호출하면 오류가 발생한다.
// 원래 사용하던 함수
const sayHi = function () {
  console.log('Hi');
};

console.log(sayHi.name); // sayHi
// 기명 함수 표현식
const sayHi = function printHiInConsole() {
  console.log('Hi');
};

console.log(sayHi.name); // printHiInConsole

🧩 즉시 실행 함수

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

실행결과 : Hi!
  • 소괄호로 1번 더 감싸주면 함수호출을 하지 않아도 바로 실행이 된다.
  • Immediately Invoked Function Expression (IIFE)
  • 초기화 기능에 많이 사용

🧩 조건 연산자 (=삼항 연산자)

  • 조건 연산자는 if문 else문과 같은 기능을 갖고 있다.
  • 조건식 ? true 값 : false 값
const CUT_OFF = 80;

function passChecker(score) {
  return score > CUT_OFF ? '합격!' : '불합격!';
}

console.log(passChecker(90));	// 합격!

🧩 Spread 문법

  • ... 을 사용
  • Rest Parameter와 비슷해 보이지만, Rest Parameter는 여러개의 값을 하나로 묶어 주는 기능을 한다면
  • Spread 문법은 묶여 있는 값을 각각의 개별 값으로 펼치는 방식
  • 객체를 Spread 할 때는 반드시 중괄호 안에 있어야 한다.
const webPub = ['HTML', 'CSS'];
const interactWeb = [...webPub, 'JavaScript'];

console.log(webPub);		// HTML, CSS
console.log(interactWeb);	// HTML, CSS, JavaScript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr3);	// 1, 2, 3, 4, 5, 6

🧩 계산된 속성명(computed porperty name)

const propertyName = 'birth';
const getJob = () => 'job';

const codeit = {
  ['topic' + 'Name']: 'Modern JavaScript',
  [propertyName]: 2017,
  [getJob()]: '프로그래밍 강사',
};

console.log(codeit);

🧩 옵셔널 체이닝 연산자(?.)

  • 옵셔널 체이닝 연산자 왼편의 값이 undefined / null이 아니라면 그 다음 프로퍼티 값을 리턴하고
  • 그렇지 않을 경우 undefined를 반환
function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

const user2 = {
  name: 'Young',
}

printCatName(user2);

🧩 구조 분해(Destructuring)

const rank = ['효준', '유나', '민환', '재하'];

// const macbook = rank[0];
// const ipad = rank[1];
// const airpods = rank[2];
// const coupon = rank[3];
const [macbook, ipad, airpods, coupon] = rank;	// 구조분해

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);
  • const [macbook, ipad, airpods, coupon] = rank
  • rank 부분이 배열이 아니거나 값이 없으면 오류 발생

  • const [macbook, ipad, airpods, ...coupon] = rank;
  • Rest Parameter 처럼 사용 할 수 있는데, 꼭 마지막 변수에 사용하여야 한다.
// 교환 하는 방법
let macbook = '효준';
let ipad = '유나';

console.log('MacBook 당첨자:', macbook);
console.log('iPad 당첨자:', ipad);

[macbook, ipad] = [ipad, macbook];

console.log('MacBook 당첨자:', macbook);
console.log('iPad 당첨자:', ipad);

🧩 forEach

const numbers = ['1', '2', '3', '4'];

numbers.forEach(function (number) {
  console.log(`${number}번`);
})
  • forEach(배열의 요소, 인덱스, 배열)
  • 아규먼트로 콜백 함수를 작성하게 되면, 콜백 함수의 첫번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 함수를 실행

🧩 map

  • forEach와 같은 결과가 나오지만, 새로운 배열을 리턴한다.
const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

firstNames.forEach((firstName, i) => {
  return lastNames[i] + firstName;
})

🔥 단순한 반복 작업만 필요하다 -> forEach
🔥 반복 작업을 통해 새로운 배열이 필요하다 -> map


🧩 filter

  • map과 유사한 형태이지만, return문으로 어떤 값을 전달하는게 아니라 true / false로 평가되는 조건식을 return
  • return 값 = 배열
  • 조건을 만족 하는 모든 값을 가져온다.
const devices = [
  { name: 'GalaxyNote', brand: 'Samsung'},
  { name: 'MacBookPro', brand: 'Apple'},
  { name: 'iPad', brand: 'Apple'},
  { name: 'GalaxyWatch', brand: 'Samsung'},
  { name: 'GalaxyBuds', brand: 'Samsung'},
  { name: 'AirPods', brand: 'Apple'},
]

const apples = devices.filter((device) => device.brand === 'Apple');

console.log(apples);

🧩 find

  • filter와 유사하다. 하지만 return 값이 다르다.
  • return 값 = 값
  • 조건을 만족하는 1개의 값만 가져온다. (인덱스가 가장 가까운거)
const devices = [
  { name: 'GalaxyNote', brand: 'Samsung'},
  { name: 'MacBookPro', brand: 'Apple'},
  { name: 'iPad', brand: 'Apple'},
  { name: 'GalaxyWatch', brand: 'Samsung'},
  { name: 'GalaxyBuds', brand: 'Samsung'},
  { name: 'AirPods', brand: 'Apple'},
]

const apples = devices.find((device) => device.brand === 'Apple');

console.log(apples);

🧩 some

  • 배열에서 조건을 만족하는 요소가 1개이상 있는지 확인하는 메소드
  • 조건을 만족하는 값을 찾는 순간 true를 리턴하고 반복 종료

🧩 every

  • 모든 요소가 조건을 만족하는지 확인하는 메소드
  • 조건을 만족하지 않는 요소가 1개 이상 있는지 <- 이런 표현 가능
  • 조건을 만족하지 않는 값을 찾는 순간 false를 리턴하고 반복 종료
const numbers = [1, 3, 5, 7, 9];

// some 메소드
const someReturn = numbers.some((el) => el > 5);

// every 메소드
const everyRetrun = numbers.every((el) => el > 5);

console.log(someReturn);    // true
console.log(everyRetrun);	// false

🧩 reduce

  • 배열의 각요소를 반복하면서 누적된 값을 계산하고 누적된 최종 결과를 return
const numbers = [1, 2, 3, 4];

const sumAll = numbers.reduce((acc, el, i) => {
  console.log(`${i}번 index의 요소로 콜백함수가 동작중`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('-------------');
  
  return acc + el;
}, 0);

console.log(`합계:`, sumAll);

🧩 Map

  • key, value로 이루어진다.
  • 메소드를 통해서 값을 추가하거나 삭제 할 수 있다.

    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 안의 모든 요소를 제거하는 메소드.
    map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

🧩 Set

  • 여러 개의 값을 순서대로 저장한다.
  • 배열의 메소드 활용 할 수 없고, Map과 비슷하지만 Set만의 메소드가 따로 존재
  • 중복을 허용하지 않음

    set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
    set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
    set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
    set.clear(): Set 안의 모든 요소를 제거하는 메소드.
    set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

profile
oauch
해보고 싶은거 하기
이전 포스트

Week4 - 인터렉티브 자바스크립트

0개의 댓글