🌷 자바스크립트 복습 [ import&export, 객체, ... ]

2024년 6월 10일 

 

 

리액트 : 선언형 vs 자바스크립트 : 명령형 

 

1) react.new 검색 -> 웹 기반 react 개발도구(npm istall과 npm run dev를 할 필요 없음)

 

 

---

주로 오른쪽 Via 방법 사용

 

 

Via 방식 : import하게 되면 웹페이지를 로드할때 해당 파일이 같이 로드 됨 !

 

defer : 나머지 HTML 문서을 읽어와 파싱한후 스크립트가 import되고 실행되도록 하는 속성

             (순서가없는 ul li가은 HTML요소가 먼저 실행되기 하기 위해서 적용 시키는 것이 좋음

              아니면 스크립트가 얘네보다 먼저 불러오게되면 얘네가 로딩이 안 될때도 있음)

<script src="assets/scripts/app.js" defer ></script>

 

type="module" : 자바스트립트 파일을 모듈로 인식하게 하는 코드 -> import / export 사용가능(=모듈이여서)

<script src="assets/scripts/app.js" type="module"></script>

 

---

리액트에서 : index.html에 <meta> <link> <noscript> 태그는 존재하지만 <script>태그는 존재하지 않음

package.json : 사용되는 라이브러리 존재 

 

---

[ import와 export ]

import : 사용할 변수 이름 {중괄호} 안에 작성  import { apiKey } from "./util";   "./util.js" -> .js 생략가능할때도있음

 

export : 1) 변수방법으로 다른 파일에서도 사용 가능 (사용할 파일에서 import하면 됨)  export let apiKey = "adnasdoasflak1";

               2) 혹은 export default "adnasdoasflak1";  default 방법으로 export 가능

                    -> 변수를 생성하지 않음, 이름을 할당하지 않고 그냥 값 자체를 export 이름없는값을 export

                    -> 즉, 기본값이 이게 되는 것 ! 파일별로 하나의 default export만 존재 가능 

                    ->이렇게 되면 import 방법도 바뀜 import apiKey from "./util.js"; 

                         default는 별다른 변수 이름이 할당되어 있지 않으므로 원하는 이름 사용 가능 대신 반드시 이름을 할당해주어야 함 !

 

🌷 이때 중요한 점 JS에서는 import, export를 사용하려면 type="module" 있어야함 (-> 리액트는 필요 없음 리액트의 장점)

 

◈ 다양한 방법의 import와 export : 2개의 변수를 한번에 import 하려면 { , } 쉼표와 중괄호 사용(이때 as를 사용해 따로 이름설정 가능)

    

---

[ 변수와 값 ]

CamelStyle : 소문자로 이름을 시작 (=userMessege)

숫자는 뒤에 맨앞에는 불가능 

 

const = 상수 

let = 새로운 값 할당 가능 

 

[ 연산자 ]

console.log(10 + 5); -> 수학 연산 가능 + - % * ...

console.log("hello" + "world"); -> + 연산자는 문자열에도 사용  가능 

console.log(10 ==== 10); -> ==== equals 연산자는 3번 사용 boolean 값

 

[ 함수와 매개변수 ]

1. function : 바로 실행되는 코드가 아니라 나중에 함수를 호출했을때 실행되는 코드를 정의하는 것 한번에 여러번 같은 함수를 여러번 호출 가능 

 ▶ 매개변수가 없는 함수 : function greet(매개변수자리 -> 없으면 생략가능) { console.log('Hello!'); } -> 함수 정의 (실행은x 호출하면 실행됨)

greet(); -> 함수 호출 (위에서만든 function greet 함수 호출+실행 됨)

 

▶ 매개변수가 있는 함수 : funtion greet2(userName, message) { console.long(userName); console.log(message); }

greet2("Max","Hello!"); -> 함수 호출시 매개변수 입력해줘야함 -> Max와 Hello가 출력됨 

 

 ▶ 매개변수에 입력값을 받는 함수 : funtion greet3(userName, message = "Hello!") { }  

greet3("Max"); -> Max와 Hello! 출력됨

greet3("Max", "What's up?"); -> Max와 Hello!에 What's up?이 오버라이드 돼서 What's up?이 출력 됨

 

 ▶ return 값을 받는 함수 

 

2. () => 화살표함수, 익명함수 

 

화살표 함수 구문에 대해 자세히 알아보기

화살표 함수를 다룰 때는 '구문 단축키'를 사용할 수 있습니다.

가장 중요한 것은 다음과 같은 대안에 대해 알고 있어야 한다는 것입니다.

1) 매개변수 목록 괄호 생략하기

화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있습니다.

1. (userName) => { ... }

가 아니라

1. userName => { ... }

라고 쓸 수 있습니다.

참고 하세요:

• 함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안 됩니다.
• () => { ... } 라고 써야 옳습니다.
• 함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안 됩니다.(userName, userAge) => { ... } 라고 써야 합니다.
•  
• userName, userAge => { ... } 라고 쓰면 안 됩니다.

2) 함수 본문 중괄호 생략하기

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있습니다.

1. number => { return number * 3;}

라고 쓰는 게 아니라

1. number => number * 3;

라고 쓸 수 있습니다.

아래와 같이 오류가 생깁니다.

1. number => return number * 3; // 이 경우 retrun 키워드는 생략되어야 하므로, 오류가 생깁니다.

1. number => if (number === 2) { return 5 }; // 이 경우 if 문은 반환될 수 없으므로 오류가 생깁니다.

3) 특수한 경우: 객체만 반환하는 경우

2)에서 설명한 짧은 대안으로 자바스크립트 객체를 반환하려고 하면, 다음과 같이 유효하지 않은 코드가 나올 수 있습니다.

1. number => ({ age: number }); // 객체를 반환하려고 합니다.

자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급하기 때문에 이 코드는 유효하지 않습니다.

객체를 생성하고 반환해야 한다고 자바스크립트에 “말하려면” 코드를 다음과 같이 수정해야 합니다:

1. number => ({ age: number }); // 추가 괄호를 써서 객체를 감싸줍니다.

객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것임을 이해합니다. 따라서 객체가 반환됩니다.

 

---

[ 객체와 클래스 ]

 

▶ 객체생성의 다양한 방법들 객체는 키:값 쌍으로 묶음

 

1) 기본적인 객체 생성 방법 { : , } -> 객체를 바로 출력 혹은 .표기법으로 값에 접근하여 출력 

 

2) 객체안에 함수 생성 

 

3) 프로퍼티 액세스도 가능 -> this 키워드 사용 

 

[ 클래스 생성 방법 ]

이름은 대문자로 시작 (자주 사용하지는 않지만 알아 두기)

 

 

---

[ 배열과 메서드 ]

배열 : [대괄호 사용];  -> 객체는 키:값을 쌍으로 묶어서 사용하지만 배열은 [값만을 순서대로 저장하여 위치에 따라 값을 엑세스]

const hobbies = ["Sports", "Cooking", "Reading"];

console.log(hobbies[0]); -> Sports 출력 

push : 새로운 값 추가 

findIndex : 특정 값의 인덱스를 찾을 수 있음 -> 화살표함수는 적어도 하나의 매개변수를 입력 받아야한다.

 

화살표 함수 간편하게 입력하는 법 

 

map : 배열의 모든 원소를 다른 원소로 변환할 수 있다 findIndex와 마찬가지로 함수를 입력 받는다. 기존 배열을 수정하지 않고(=기존 배열은 변하지 않고) map은 새 배열을 반환  즉, 어떠한 유형의 원소이든 다른 유형의 원소로 변환할 수 있다는 점을 알아 두기 !!!

 

▶ 객체를 담은 새 배열을 만들고 각 객체의 text키에 기존 배열의 값을 저장하겠단 뜻 

 

---

[ 디스트럭처링 ]

▶ 배열 및 객체의 분해 

 

1. 배열의 분해 : 배열에 담겨 있던 값을 분해를 통해 값을 가져와 각각의 상수 또는 변수에 저장하여 콘솔로 출력 

첫번째 상수 또는 변수에 첫번째 배열의 원소를 매핑 , 두번째도 마찬가지 즉 두줄이였던 코드를 한번에 작성

 

2. 객체의 분해 : {중괄호} 사용, 원하는 대로 이름을 지을 수 없음 객체에 정의된 필드 이름을 사용해야 함(->배열의분해와차이점 배열은 위치에 따라 원소를 가져오므로 원하는 이름을 지울 수 있었지만 객체는 프로퍼티 이름을 기준으로 가져오므로 동일한 프로퍼티 이름을 사용해야 한다 다만 :콜론을 사용해 오른쪽에 별칭을 사용할 수 있다)

 

함수 매개변수 목록에서 디스트럭처링

이전 강의에서 설명한 디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있습니다.

예를 들어, 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있습니다.

다음은 예시입니다:

1. function storeOrder(order) {
2. localStorage.setItem('id', order.id);
3.   localStorage.setItem('currency', order.currency);
4. }

storeOrder 함수 본문 내부의 "점 표기법"을 통해 order 프로퍼티에 접근하지 않고, 다음과 같이 디스트럭처링을 사용할 수 있습니다:

1. function storeOrder({id, currency}) { // 디스트럭처링
2. localStorage.setItem('id', id);
3.   localStorage.setItem('currency', currency);
4. }

디스트럭처링 구문은 이전 강의에서 배운 것과 같습니다. 상수나 변수를 수동으로 생성하지 않을 뿐입니다.

대신, 들어오는 객체(즉, storeOrder 에 인수로 전달된 객체)에서 id와 currency 를 "꺼내어" 사용합니다.

이 예제에서 storeOrder 는 여전히 하나의 매개변수만 받는다는 점이 매우 중요합니다! 매개변수는 두 개가 아니라, 하나의 매개변수, 즉 내부적으로 디스트럭처링된 객체만 받습니다.

함수는 여전히 다음과 같이 호출됩니다

 

1. storeOrder({id: 5, currency: 'USD', amount: 15.99}); // 1개의 매개변수 / 값!

---

[ ... 스프레드 연산자 ]

 

1) 배열에서 스프레드 연산자 사용 : 각기 다른 두개의 배열을 병합하려면 병합을 위한 새로운 배열을 생성한 후 ... 연산자를 사용하면 된다 

    즉, 배열의 값을 가져와 ,쉼표로 구분된 개별 값을 새 배열에 추가 

    만약 ... 연산자 없이 그냥 각기 다른 배열을 입력하면 각각의 배열이 합쳐짐 

 

2) 객체에서 스프레드 연산자 사용 : 객체에서도 ... 연산자 사용 가능

     즉, 전개연산자가 위객체의 모든 키-값을 쌍으로 가져와 아래객체에 키-값을 쌍으로 추가 !!!

     isAdmin -> bool 값을 저장하는 프로퍼티 

 

 

---

[ 컨트롤 구조 ]

 

---

[ 리액트 없이 DOM 조작하기 ]

const list = documnet,querySelector("ul");

list.remove();

 

[ 함수를 값으로 사용하기 ]

setTimeoout은 두개의 매개변수를 받는다 하나는 함수(function 혹은 () =>) 다른 하나는 첫번째 함수 실행할 때까지 대기할 밀리초

이미 만들어진 함수를 새로운 함수에서 사용할 경우 그냥 이름만 작성하면 됨 ! 함수 자체를 이 함수에 값으로 전달(소괄호)필요 없음

 

 

[ 함수 내부에서 함수 정의하기 ]

init();은 함수니까 호출해서 사용 가능하지만 / greet();는 init()함수 안에 존재하는 내부 함수이므로 init함수 밖에서 호출 불가능 !!

 

 

[ 참조형과 기본형 비교 ]

기본형 : 변경할수 없다 ! 값이 삭제되고 새로운 값으로 변경 됨 -> let userMessage='Hello'; userMessage= 'New Hello';

스트링에도 호출할수 있는 내장 메서드들이 존재(배열과 마찬가지로) -> userMessage.concat('!!!');

즉, 스트링 숫자형 부울을 다룰 때는 항상 새 값을 생성 기존 값을 수정할 수 없음 !!

 

참조형 : 객체와 배열은 기본형과 다름 push으로 값을 추가하면 값이 바뀜 -> 새롭게 지정은 안 되지만 값 변경은 가능 

변수에 값을 저장할 때는 값 자체를 저장하는게 아니라 해당 값의 메모리 주소에 저장한다. 배열은 메모리 어딘가에 저장된다.

주소는 객체와 배열에 등장(기본형은 아님)

 

---

import { apiKey } from "./util.js";
import apiKey from "./util.js";
import { apiKey, abc as content } from "./util.js";
import * as util from "./util.js";

console.log(util.apiKey);
console.log(content);

const userMessage = "Hello World!!!";

console.log(userMessage);
console.log(userMessage);

function createGreeting(userName, message = "Hello!") {
  console.log(userName);
  console.log(message);
  return "Hi, I am " + userName + ". " + message;
}

const greeting1 = createGreeting("Max");
console.log(greeting1);

const greeting2 = createGreeting("Manuel", "Hello, what's up?");
console.log(greeting2);

export default (userName, message) => {
  console.log("Hello");
  return userName + message;
};

const user = {
  name: "Max",
  age: 34,
  greet() {
    console.log("Hello!");
    console.log(this.age);
  }
};

console.log(user.name);
user.greet();

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hi!");
  }
}

const user1 = new User("Manuel", 35);
console.log(user1);
user1.greet();

const hobbies = ["Sports", "Cooking", "Reading"];
console.log(hobbies[0]);

hobbies.push("Working");
console.log(hobbies);

const index = hobbies.findIndex((item) => item === "Sports");

console.log(index);

const editedHobbies = hobbies.map((item) => ({ text: item }));
console.log(editedHobbies);

const [firstName, lastName] = ["Max", "Schwarzmüller"];

const firstName = userNameData[0];
const lastName = userNameData[1];

console.log(firstName);
console.log(lastName);

const { name: userName, age } = {
  name: "Max",
  age: 34
};

console.log(userName);
console.log(age);

const name = user.name;
const age = user.age;

const hobbies = ["Sports", "Cooking"];
const user = {
  name: "Max",
  age: 34
};

const newHobbies = ["Reading"];

const mergedHobbies = [...hobbies, ...newHobbies];
console.log(mergedHobbies);

const extendedUser = {
  isAdmin: true,
  ...user
};
console.log(extendedUser);

const password = prompt("Your password");

if (password === "Hello") {
  console.log("Hello works");
} else if (password === "hello") {
  console.log("hello works");
} else {
  console.log("Access not granted.");
}

const hobbies = ["Sports", "Cooking"];

for (const hobby of hobbies) {
  console.log(hobby);
}

const list = document.querySelector("ul");
list.remove();

function handleTimeout() {
  console.log("Timed out!");
}

const handleTimeout2 = () => {
  console.log("Timed out ... again!");
};

setTimeout(handleTimeout, 2000);
setTimeout(handleTimeout2, 3000);
setTimeout(() => {
  console.log("More timing out...");
}, 4000);

function init() {
  function greet() {
    console.log("Hi!");
  }

  greet();
}

init();

const message = "Hello";

const hobbies = ["Sports", "Cooking"];
hobbies.push("Working");
console.log(hobbies);