모던 자바스크립트

LEE GYUHO·2023년 10월 3일
JavaScript
0

📌모던 자바스크립트 이해

  • 📘자바스크립트의 데이터 타입

    • number
    • string
    • boolean
    • undefined
    • null
    • object
    • symbol(심볼은 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용)
    • bigint(아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입)

  • 📘And와 Or의 연산 방식
    (And의 우선순위가 더 높다 / 소괄호를 사용하여 우선순위를 명확하게 나타내 주는 것이 좋다)

    falsy한 값 : undefined, null, 0, NAN, '', false

    truthy한 값 : 그 외의 나머지 값

    And연산에서 왼쪽 값이 truthy한 값이면 오른쪽 값을 리턴하고
    왼쪽 값이 falsy한 값이면 왼쪽 값을 리턴한다.

    Or연산에서 왼쪽 값이 truthy한 값이면 왼쪽 값을 리턴하고
    왼쪽 값이 falsy한 값이면 오른쪽 값을 리턴한다.

    funtion print(value) {
  const message = value || 'Codeit';
  
  console.log(message);
}

print();
print('JavaScript');

    이렇게 응용도 가능하다.
    전달된 값이 없을 때는 Codeit을, 전달된 값이 있으면 그 값이 출력되도록 할 수 있다.

  • 📘Null 병합 연산자 ??

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

console.log(example1, example2, example3); // I love Codeit

    위와 같이 연산자 왼편의 값이 null이나 undefined라면 연산자 오른편의 값이 리턴되고 연산자 왼편의 값이 null이나 undefined가 아니라면 왼편의 값이 리턴된다.

  • 📘변수와 스코프

    var x; //함수 스코프 (function scope)

    let y; // 블록 스코프 (block scope)
    const z; // 블록 스코프 (block scope)
    코드 블록 기준

  • 📘함수 선언과 함수 표현식

function printCodeit (파라미터) {
  console.log('Codeit');
}

printCodeit();
//함수 선언 (함수 선언 전에 호출을 할 수 있다.(호이스팅))


const printCodeit = function () {
  console.log('Codeit');
};

printCodeit();
//함수 표현식 (함수 선언을 값처럼 사용하는 방식)
  • 📘기명 함수 표현식 (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


//함수 이름은 함수 내부에서 함수 자체를 가리킬 때 사용할 수 있고 함수를 외부에서 함수를 호출할 때 사용할 수는 없다.
const sayHi = function printHiInConsole() {
  console.log('Hi');
};

printHiInConsole(); // ReferenceError

  • 📘즉시 실행 함수 (IIFE : Immediately Invoked Function Expression)
    함수 선언과 동시에 즉시 실행되는 함수
    초기화 기능, 재사용이 필요 없는 일회성 동작을 구성할 때 활용

    • 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식

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

    • 즉시 실행 함수는 함수에 이름을 지어주더라도 외부에서 재사용할 수 없다

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

sayHi(); // ReferenceError

    • 즉시 실행 함수에서 사용하는 변수들은 함수 내에서만 유효하기 때문에 이런 점을 활용하면, 일시적으로 사용할 변수의 이름들을 조금 자유롭게 작성할 수도 있다

  • 📘값으로서 함수

    • 함수는 변수나 다른 데이터 구조 안에 할당될 수 있고 다른 함수의 파라미터로 전달될 수도 있으며 다른 함수의 리턴값이 될 수도 있다.

    • 다른 함수의 파라미터로 전달된 함수를 콜백 함수(Callback Function)이라고 한다

    function makeQuiz(quiz, answer, success, fail) {
  if(prompt(quiz) === answer) {
    console.log(success());
  }else {
    console.log(fail());
  }
};

function getSuccess() {
  return '정답!';
};

function getFail() {
  return '오답!';
};

const question = '5 + 3 = ?';

makeQuiz(question, '8', getSuccess, getFail)

    여기서 getSuccess함수와 getFail함수가 콜백 함수이다.

    • 함수를 리턴하는 함수를 고차 함수(Higher Order Function)라고 한다.
    function getPrintHi() {
  return function() {
    console.log('Hi!?');
  };
};

const sayHi = getPrintHi();
sayHi(); //Hi!?

getPrintHi()(); //이렇게 쓸 수도 있다.

  • 📘파라미터(Parameter)

    function greeting(name) {
  console.log(`Hi! My name is ${name}!`);
};

greeting('JavaScript');
greeting('Codeit');
greeting('World');

    여기서 name이 파라미터 / JavaScript, Codeit, World 이것들이 아규먼트(Argument)이다.

    function greeting(name = 'Codeit', interest) {
  console.log(`Hi! My name is ${name}!`);
  console.log(`I like ${interest}!`);
};

greeting('JavaScript');
// Hi! My name is JavaScript!
// I lik undefined! 
.
.

function greeting(name = 'Codeit', interest = 'JavaScript') {
  console.log(`Hi! My name is ${name}!`);
  console.log(`I like ${interest}!`);
};

greeting(undefined, 'Python');
// Hi! My name is Codeit!
// I lik Python!

  • 📘아규먼트(Argument)

    function printArguments(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(arguments); // Arguments[] 이런 식으로 나온다
};

greeting('Young', 'Mark', 'Koby'); // Young, Mark, Koby
greeting('Captain'); // Captain, Undefined, Undefined
greeting('Jayden', 'Scott'); // Jayden, Scott, Undefined
greeting('Suri', 'Jack', 'Joy', 'Noel'); // Suri, Jack, Joy

위 함수에서 console.log(arguments);를 하게되면 출력이 된다.
arguments객체는 유사배열로 배열의 메소드는 사용할 수 없지만 length, indexing, for..of문은 가능하다.


* 📘Rest Parameter

아규먼트객체는 유사배열이기 때문에 배열의 메소드를 사용할 수 없다. 
하지만 파라미터 앞에 ...을 붙여주면 배열로 변하기 때문에 배열의 메소드를 사용할 수 있다.

```js
function printArguments(...args) {
  console.log(args.splice(0, 2)); //['Young', 'Mark']
  console.log(arguments.splice(0, 2)); //Error
};

printArguments('Young', 'Mark', 'Koby'); // Young, Mark, Koby



function printRank(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for(const arg of others) {
    console.log(`참가자: ${arg}`);
  }
};

printRank('Phil', 'Won', 'Emma', 'Min', 'Luke'); 
// 우승: Phil, 준우승: Won, 참가자: Emma, 참가자: Min, 참가자: Luke

코드를 작성할 때 Rest Parameter를 우선적으로 사용하고 불가피한 상황에서 Arguments객체를 사용하는 것이 권장하는 방법이다.

  • 📘화살표 함수(Arrow Function)

    • 이름이 없는 익명함수이다.

    • 어떤 이름을 가진 변수에 할당하거나 다른 함수의 argument로 함수를 선언할 때 주로 사용한다.
     const getTwice = function(number) {
  return number * 2;
 };

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

 const getTwice = number => number * 2;
    • parameter가 1개인 경우 소괄호를 생략할 수 있다.

    • 내부의 동작 부분이 리턴문 한개로만 이루어져 있다면 중괄호와 리턴 키워드를 생략할 수 있다.

    • 화살표 함수는 arguments 객체가 없다.

  • 📘This
    자바스크립트에서 This는 함수를 호출한 객체를 가리키는 키워드이다.

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

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: getFullName,
};

const admin = {
  firstName: 'Alex',
  lastName: 'Kim',
  getFullName: getFullName,
};

console.log(user.getFullName()); // Tess Jang
console.log(admin.getFullName()); // Alex Kim

arrow function에서 this의 값은 일반함수처럼 호출한 대상에 따라 상대적으로 변하지 않고, arrow function이 선언되기 직전에 유효한 this 값과 똑같은 값을 가지고서 동작한다.

📌자바스크립트 문법과 표현

  • 📘문장과 표현식

    • 문장: 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리

       let x; 
  x = 3;

  if (x < 5) {
    console.log('x는 5보다 작다');
  } else {
    console.log('x는 5와 같거나 크다');
  }

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
	
		1번째줄, 2번째줄, 4~8번째줄, 10~12번째줄 모두 문장이다

    • 표현식: 결과적으로 하나의 값이 되는 모든 코드

       5 + 7 // 12

 'I' + ' Love ' + 'Codeit' // I Love Codeit

 true && null // null

 const title = 'JavaScript';
 const codeit = {
   name: 'Codeit'
 };
 const numbers = [1, 2, 3];

 typeof codeit // object
 title // JavaScript
 codeit.name // Codeit
 numbers[3] // undefined

 선언된 변수를 호출하거나, 객체의 프로퍼티에 접근하는 것도 결국에는 하나의 값으로 평가된다. 
 그래서 길이와는 상관없이 결과적으로 하나의 값이 되는 코드를 모두 표현식이라고 한다.

    • 표현식이면서 문장, 문장이면서 표현식

      // 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.
title = 'JavaScript'; // JavaScript

// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.
sayHi(); // sayHi 함수의 리턴 값

// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, undefined 값을 가지는 표현식이다.
console.log('hi'); // undefined

    • 표현식인 문장, 표현식이 아닌 문장

      let x; 
 x = 3;

 console.log(if (x < 5) {
   console.log('x는 5보다 작다');
 } else {
   console.log('x는 5보다 크다');
 });

 const someloop = for (let i = 0; i < 5; i++) {
   console.log(i);
 };

      console.log 메소드의 아규먼트로 if문을 전달하거나 someloop라는 변수에 for 반복문을 할당하게 되면, Error가 발생한다.
      조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가되기 때문이다.

      참고로 자바스크립트에서 특별한 경우를 제외하면 일반적으로 표현식인 문장은 세미콜론으로, 표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)로 그 문장의 범위가 구분된다.

  • 📘삼항 연산자(조건 연산자)
    조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

    const CUT_OFF = 80;

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

console.log(passChecker(75)); // 불합격!

  • 📘Spread 구문 (Spread Syntax)

    const numbers = [1, 2, 3];

console.log(numbers); // [1, 2, 3]

.
.

const numbers = [1, 2, 3];

console.log(...numbers); // 1, 2, 3
    const webPublishing = ['HTML', 'CSS'];
 const interactiveWeb = [...webPublishing];
 // const interactiveWeb = [...webPublishing, 'JavaScript']; 이렇게도 가능

 interactiveWeb.push('JavaScript');

 console.log(webPublishing); // ['HTML', 'CSS']
 console.log(interactiveWeb); // ['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]
     const members = ['태호', '종훈', '우재'];

 const newObject = { ... members };

 console.log(newObject); // { 0: '태호', 1: '종훈', 2: '우재'}

    • 배열을 Spread 하면 새로운 배열을 만들거나 함수의 아규먼트로 쓸 수 있었지만, 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수는 없다.

    • 객체를 spread할 때는 반드시 객체를 표현하는 중괄호 안에서 활용해야 한다

  • 📘모던한 프로퍼티 표기법

    const title = 'Codeit';
const birth = 2017;
const job = '프로그래밍 강사';

const user = {
  title: title,
  birth: birth,
  job: job,
}

프로퍼티 네임과 변수의 이름이 같다면 이렇게 줄여서 쓸 수 있다.
const user = {
  title,
  birth,
  job,
}
    const user = {
  firstName: 'Tess';
  lastName: 'Jang';
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
   },
 };

console.log(user.getFullName());

이런 경우는 이렇게 줄여서 쓸 수 있다.

const user = {
  firstName: 'Tess';
  lastName: 'Jang';
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
   },
 };

 console.log(user.getFullName());

  • 📘계산된 속성명(computed property name)

const user = {
  [표현식]: 값,
};
---
const user = {
  ['COde' + 'it']: 'value',
};

console.log(user); // {Codeit: "value"}

  • 📘옵셔널 체이닝(Optional Chaining)

    • 옵셔널 체이닝 연산자(?.)
      옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그 다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법
    const user2 = {
  name: 'Young',
}

console.log(user2.cat); // undefined
printCatName(user2); // TypeError: Cannot read property 'name' of undefined

위와 같은 에러를 방지하기 위해서 사용

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

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

같은 내용이다
function printCatName(user) {
  console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.');
}

const user2 = {
  name: 'Young',
}

printCatName(user2); // 함께 지내는 고양이가 없습니다.

이렇게 null 병합 연산자까지 사용하여 응용하여 사용할 수도 있다.

  • 📘Destructuring(구조 분해)

    • 배열 Destructuring

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

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];
// 할당하는 값을 rank[i]로 하는 이유는 배열에 들어있는 순위가 바뀔 수 있기 때문이다.
const [macbook, ipad, airpods, coupon] = rank;
// 이렇게 해도 같은 값이 나온다.
// rank 자리에 배열이 아닌 값을 할당하거나 아무것도 할당하지 않으면 오류가 뜬다.
const [macbook, ipad, airpods, ...coupon] = rank;
//이렇게도 사용이 가능하다.
//할당하는 배열의 길이가 선언된 변수의 개수보다 적으면 남은 변수에는 undefined가 할당된다.
//함수의 파라미터처럼 기본값 설정도 가능하다. ex) coupon = '없음'

console.log(macbook)
console.log(ipad)
console.log(airpods)
console.log(coupon)
      let macbook = '효준';
let ipad = '유나';

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

let temp = macbook;
macbook = ipad;
ipad = macbook;
//이렇게 하던 것을 구조 분해를 이용하면

[macbook, ipad] = [ipad, macbook];
//이렇게 간편하게 할 수 있다.

    • 객체 Destructuring

      const macbook = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이',
}

const title = macbook.title;
const price = macbook.price;

const { title, price } = macbook;
//구조 분해로 바꾼 것이다.
const { title: product, price } = macbook;
//이렇게 해주면 title을 새로운 이름인 product로 바꿔줄 수 있다.

console.log(title);
console.log(price);

    • 함수 Destructuring

      function getArray() {
  return ['컴퓨터', '냉장고', '세탁기'];
}

const [el1, el2, el3] = getArray();

console.log(el1);
console.log(el2);
console.log(el3);
      function printWinners(...arg){
 const [macbook, ipad, airpods, ...coupon] = arg;

 console.log('이벤트 결과');
 console.log(`맥북의 주인공은 '${macbook}'`);
 console.log(`d아이패드드의 주인공은 '${ipad}'`);
 console.log(`에어팟팟의 주인공은 '${airpods}'`);
 console.log(`코드잇 3개월 수강권 주인공은`);

 for(let user of coupon){
   console.log(`'${user}'님`)
 }

 console.log(`이상 총 ${coupon.length}명 입니다.`)
 }

 printWinners('효준', '효신', '재훈', '소원', '현승', '종휸');

      이렇게 사용도 가능하다.

      function printWinners([macbook, ipad, airpods, ...coupon]){
 console.log('이벤트 결과');
 console.log(`맥북의 주인공은 '${macbook}'`);
 console.log(`d아이패드드의 주인공은 '${ipad}'`);
 console.log(`에어팟팟의 주인공은 '${airpods}'`);
 console.log(`코드잇 3개월 수강권 주인공은`);

 for(let user of coupon){
   console.log(`'${user}'님`)
 }

 console.log(`이상 총 ${coupon.length}명 입니다.`)
 }
 
 const ranks = ['효준', '효신', '재훈', '소원', '현승', '종휸']
 printWinners(ranks);

      이렇게 변수 선언 부분을 파라미터로 사용도 가능하다.

      const macbook = {
 title: '맥북 프로 16형',
 price: 3690000,
 color: 'silver',
 memory: '16GB',
 storage: '1TB SSD 저장 장치',
 display: '16형 Retina 디스플레이',
 };

function printSummary(object){
console.log(`선택한 상품은 '${object.title}'입니다.`);
console.log(`색상은 ${object.color}입니다.`);
console.log(`가격은 ${object.price}원 입니다.`);
};

printSummary(macbook);
      const macbook = {
 title: '맥북 프로 16형',
 price: 3690000,
 color: 'silver',
 memory: '16GB',
 storage: '1TB SSD 저장 장치',
 display: '16형 Retina 디스플레이',
 };

function printSummary(object){
const { title, color, price } = object; 

console.log(`선택한 상품은 '${title}'입니다.`);
console.log(`색상은 ${color}입니다.`);
console.log(`가격은 ${price}원 입니다.`);
};

printSummary(macbook);
      const macbook = {
 title: '맥북 프로 16형',
 price: 3690000,
 color: 'silver',
 memory: '16GB',
 storage: '1TB SSD 저장 장치',
 display: '16형 Retina 디스플레이',
 };

function printSummary({ title, color, price }){
console.log(`선택한 상품은 '${title}'입니다.`);
console.log(`색상은 ${color}입니다.`);
console.log(`가격은 ${price}원 입니다.`);
};

printSummary(macbook);

      이벤트에서도 사용이 가능하다

      const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
event.target.classList.toggle('checked');
});

      타겟 프로퍼티만 사용한다면 이렇게 바꿔줄 수도 있다.

      const btn = document.querySelector('#btn');

btn.addEventListener('click', ({ target }) => {
target.classList.toggle('checked');
});

      중첩 객체 구조 분해(Nested Object Destructuring)

      const btn = document.querySelector('#btn');

btn.addEventListener('click', ({ target }) => {
const { classList } = target;
classList.toggle('checked');
});

  • 📘에러와 에러 객체
    에러가 발생하면 에러가 발생한 이후의 코드는 실행되지 않는다.
    에러 객체에는 name, message 프로퍼티가 존재한다.

    • ReferenceError: 존재하지 않는 변수나 함수를 호출할 때

    • TypeError: 잘못된 방식으로 자료형을 다루려고 할 때

    • SyntaxError: 문법에 맞지 않은 코드를 작성한 경우
      코드를 실행하기도 전에 에러를 발생한다.

    • 에러객체를 만드는 방법

      console.log('시작!');

 const error = new TypeError('타입 에러가 발생했습니다.');

 console.log(error.name);
 console.log(error.message);

 console.log('끝!');

    • 에러를 직접 발생시키는 방법

      console.log('시작!');

 const error = new TypeError('타입 에러가 발생했습니다.');

 throw error;

 console.log(error.name);
 console.log(error.message);

 console.log('끝!');

    • try catch 문 (예외 처리 (Exception Handling))
      실행 가능한 코드에서 발생한 에러를 다룬다. (Syntax 에러는 실행이 안되는 에러)

      try{
  // 코드
} catch (error) {
  // 에러가 발생했을 때 동작할 코드
}
//파라미터에 있는 error에 에러가 발생했을 때 생성되는 에러객체가 담긴다.
//파라미터 이름은 원하는 대로 변경이 가능하다.(error, err, e 많이 쓴다)
//console.error(error) 이렇게 하면 원래 나오던 에러 메세지처럼 출력할 수 있다.
      try{
  console.log('에러 전');

  const codeit = '코드잇';
  console.log(codeit)

  codeit = 'codeit';

  const language = 'JavaScript';
  console.log(language);
  } catch (error){
    console.log('에러 후');
  }
// 에러 전
// 코드잇
// 에러 후
      function printMembers(members) {
    try {
      for(const member of members) {
        console.log(member);
      }
    } catch(err) {
      console.error(err);
      alert(`${err.name}가 발생했습니다. 콘솔창을 확인해주세요.`);
    }
  }

  const teamA = ['상혜', '혜진', '지혜', '혜선'];
  printMembers(teamA);

  const codeit = { name: 'codeit' };
  printMembers(codeit);

  const teamB = ['영훈', '재훈', '종훈', '정훈'];
  printMembers(teamB);

    • finally 문

      try {
   // 실행할 코드
 } catch (error) {
   // 에러가 발상했을 때 실행할 코드
 } finally {
   // 항상 실행할 코드
 }
      try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발생했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finally문에서 에러가 발생했을 때 실행할 코드
}

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

  • 📘배열 메소드 forEach, map
    반복 횟수: 메소드를 처음 호출할 때 그 당시 요소의 갯수

    • forEach
      (단순한 반복 작업)

      const members = ['영훈', '윤수', '동욱', '태호'];

for(let member of members){
  console.log(`${member}님이 입장하셨습니다.`);
}
---
members.forEach(function (member){
  console.log(`${member}님이 입장하셨습니다.`);
});
---
members.forEach((member) => {
console.log(`${member}님이 입장하셨습니다.`);
});
---
members.forEach((member, i) => {
console.log(`${i} ${member}님이 입장하셨습니다.`);
});
---
const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((member) => {
  console.log(`${member}님이 입장하셨습니다.`);
  members.push('코드잇');
});

console.log(members); 
// 영훈님이 입장하셨습니다.
// 윤수님이 입장하셨습니다.
// 동욱님이 입장하셨습니다.
// 태호님이 입장하셨습니다.
// ['영훈', '윤수', '동욱', '태호', '코드잇', '코드잇', '코드잇', '코드잇']
---
const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((member) => {
  console.log(`${member}님이 입장하셨습니다.`);
  members.pop();
});

console.log(members); 
// 영훈님이 입장하셨습니다.
// 윤수님이 입장하셨습니다.
// ['영훈', '윤수']

    • map
      (반복작업을 통해 새로운 배열이 필요한 경우)

      const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

const fullNames = firstNames.map((firstNames, i) => {
  return lastNames[i] + firstNames;
});

console.log(fullNames); // ['강영훈', '이윤수', '손동욱', '성태호']
---
const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

const fullNames = firstNames.map((firstNames, i) => lastNames[i] + firstNames);

console.log(fullNames); // ['강영훈', '이윤수', '손동욱', '성태호']

  • 📘배열 메소드 filter, find

    • filter
      true 혹은 false로 평가되는 조건식을 리턴해준다.
      배열을 반복하면서 콜백함수가 리턴하는 조건식이 true가 되는 요소만 모아서 새로운 배열을 return한다.
      (값으로 보여주고 싶으면 spread 구문(...)을 사용해주면 된다.)
    const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]
    • find
      filter와 동작하는 방식은 비슷하지만 find는 리턴값이 값이다.
      find는 조건을 만족하는 하나의 값만 찾으며 값을 찾으면 종료한다.
    const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

  • 📘배열 메소드 some, every
    true 혹은 false를 반환한다.

    • some
      조건을 만족하는 요소가 1개 이상 있는지

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

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

console.log(someReturn); // true;

    • every
      모든 요소가 조건을 만족하는지
      조건을 만족하지 않는 요소가 1개 이상 있는지

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

// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

console.log(everyReturn); // false;

  • 📘배열 메소드 reduce

    • reduce
    const numbers = [1 ,2, 3, 4];

numbers.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue);

//acc = Accumulator (누산기)
    const numbers = [1, 2, 3, 4];

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0);

console.log(sumAll); // 10

  • 📘배열 메소드 sort, reverse

    • sort
      sort 메소드를 사용할 때 한 가지 주의해야될 부분은 메소드를 실행하는 원본 배열의 요소들을 정렬한다는 점이다.
    const numbers = [1, 10, 4, 21, 36000];

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

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]
    • reverse
      reverse 메소드는 말 그대로 배열의 순서를 뒤집어 주는 메소드 입니다.
      sort 메소드와 마찬가지로 원본 배열의 요소들을 뒤집어 버린다는 점은 꼭 주의헤야 합니다.
    const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

  • 📘Set

    • Set은 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷합니다.

    • Set은 중복되는 값을 허용하지 않는다.

    const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}
    • Set은 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷합니다.
      • set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
      • set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
      • set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
      • set.clear(): Set 안의 모든 요소를 제거하는 메소드.
      • set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)
    // Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

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

// delete 메소드
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

📌 모듈

  • 📘모듈

    • 모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.

    • type속성에 module이라는 값을 지정해주면 이 파일들은 각각 모듈 스코프를 갖게 돼서 결과적으로 그 js파일 내부에서 선언한 변수나 함수는 다른 외부 파일과 스코프를 공유하지 않게 된다.

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

  • 📘모듈 문법

    • export: 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.
    • import: 외부 모듈의 기능을 가져올 수 있다.
    // 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
    // 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // 함수
sayHi('John'); // Hello, John!
    • 이름 바꾸기
    import { title as printerTitle, print } from './printer.js';

const title = 'Codeit';

print(title);

    • import한것과 같은 변수명을 사용해야할 때 import한 변수의 이름을 바꿔주면 된다.

    • 여러 module을 import 하다보면 중복되는 것이 있을 것이다. 그때 as 키워드로 이름을 변경해주면 된다.

    • 한번에 다루기

    import * as printerJS from './printer.js';
import {
  title as membersTitle,
  data as membersData
} from './members.js';

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);
    • 전체를 가져오는 방식은 불필요한 것도 가지고 오는 비효율이 발생하기 때문에 자주 활용되지는 않는다.
    const title = 'CodeitPrinter';

function print(value) {
  console.log(value);
}

export { title, print };
//export { title as printerTitle, print }; 이렇게 이름을 미리 바꿔서 export 할 수도 있다.
    • Default export
      • export default를 하면 하나의 대상만 export할 수 있다.
      • 모듈 파일 내에서 한번만 사용 가능하다.
      • import를 할 때 as를 같이 써줘야 한다.
    import {
  default as codeit,
  title as membersTitle,
  data as membersData
} from './members.js';
    import codeit, {
  title as membersTitle,
  data as membersData
} from './members.js';

    default as를 생략하고 이렇게도 사용 가능하다.

profile
LEE GYUHO
누구나 같은 팀으로 되길 바라는 개발자가 되자
이전 포스트

위클리 페이퍼 4주차

다음 포스트

자바스크립트 웹 개발 기본기

0개의 댓글