[ES6] 기초 정리

front/react

[ES6] 기초 정리

배고파요 2025. 12. 27. 12:24

728x90

📍 JS에서도 클래스 사용할 수 있음.

constructor
- --> JS 에서 클래스 생성할 때 쓰는 함수. --> 이름 변경 불가 --> 불변.
- 선언하면 바로 인스턴스가 생기나봄.

<script>
class Car{
        constructor(car_brand){ // 클래스 생성자
            this.brand = car_brand;
        }

        hello(){
            return `제 차의 브랜드는 ${this.brand} 입니다.`
        }
    }
const mycar = new Car("Hyundae");
console.log("mycar.brand. --  " + mycar.brand); // mycar.brand. --  Hyundae


let hello = mycar.hello();
console.log(hello); // 제 차의 브랜드는 Hyundae 입니다.


class Model extends Car{
    constructor(car_brand, car_model){ //생성자 매개변수 2개 넣을 수도 있지.
        super(car_brand); 
        this.model = car_model;
    }
    hi(){
        return this.hello() + `, 차종은 ${this.model} 입니다. `;
    }
}

const mycarmodel = new Model("Hyundae", "캐스퍼");
let hi = mycarmodel.hi();
console.log(hi); // 제 차의 브랜드는 Hyundae 입니다., 차종은 캐스퍼 입니다. 

</script>

참고
- 맥북에서 백틱 :: option키 + 백틱

📍 화살표함수를 표현하는 방법

// 화살표 함수


<script>
    hello = function (){
        return "공부 화이팅!!";
    }

    let a = hello();
    console.log(a);

    arrowHello = () => {
        return "화살표 함수 사용하기";
    }

    let b = arrowHello();
    console.log(b);

    moreComfortable = () => "더 간결히 표현";
    console.log( moreComfortable() );

    // 매개변수가 있는 화살표 함수
    arHello = (val) => `${val} 화이팅!!`;
    console.log( arHello("안녕!! ") );

    // 매개변수가 하나라면, 매개변수 앞에 괄호까지도 생략 가능.
    arHello = val => `${val} 화이팅이야!!`;
    console.log( arHello("안녕하세요!! ") );
</script>

📍 일반 함수의 this vs. 화살표함수의 this

<script>
this.name = "전역 변수에서의 name !!"; 
// 전역에 this.name 이 있으면 화살표 함수에서 불러짐.
const obj = {
    name: "왕초보 홈페이지 만들기",
    normalFunc : function() { // 일반 함수 // this :: 호출한 객체(obj)
        console.log("normalFunc this.name. :  ", this.name); // normalFunc this.name. :  "왕초보 홈페이지 만들기"
        // obj에 대한 게 this 로 나옴. 
        console.log(this); // {name: "왕초보 홈페이지 만들기", normalFunc: function, arrowFunc: function}
    },
    arrowFunc : () => { // 화살표 함수 // this :: 정의된 위치의 this.
        // 화살표 함수는 자기 자신의 this 를 가지지 않음. 
        // 자기가 선언된 위치의 this 를 그대로 가져옴.
        // arrowFunc 는 ** 전역 스코프 ** 에서 만들어짐.
        // 전역의 ** this ** 를 사용함.
        console.log("arrowFunc  this.name... :  ", this.name); // arrowFunc  this.name... :  "전역 변수에서의 name !!"
        // window에 대한 게 this 로 나옴.
        console.log(this); // Window {document: #document, NaN: NaN, window: Window, Infinity: Infinity, undefined: undefined, …}
        
    } 
};

obj.normalFunc();
obj.arrowFunc();

</script>

📍 var , let , const 차이점.

	var	let	const
scope	function scope	block scope	block scope
재선언 (중복선언)	가능	불가	불가
재할당 (이미 만든 변수에 값을 새롭게 넣기)	가능	가능	불가

<body>
    <div id="aaa">aaa</div>  
<script>
    // var, let 의 차이
    // scope 의 차이가 있음.
    if(true){
        var x = 10;
        let l = 10;
        console.log("l -- " + l); // l -- 10
    }
    console.log(x); // 10
    // console.log(l); // ReferenceError: Can't find variable: l
    // var 는 function 스코프를 가짐. 
    // let 은 block scope 를 가짐. 

    // hoisting 끌어올리기, 호이스팅
    console.log(a);
    var a = 5;
    /*
    undefined 가 나오는데. 이건 사실상
    var a;
    console.log(a);
    var a = 5; 
    와 같은 형태가 됨. 
    아직 a값이 채워지지 않은 상태에서 console 에 찍은 것과 같다 생각하면 됨.
    */
    //console.log(b); // ReferenceError: Cannot access uninitialized variable.
    let b = 10; // TDZ :: Temporal Dead Zone :: 일시적 사각 지대.
    /*
    실제적으로는 
    let b;
    console.log(b);
    let b= 10; 과 같다고 볼 수 있는데, 
    var 에서는 undefined 로 초기화가 되는데, let 에서는 초기화가 안된다는 점.
    */

    // var 는 같은 scope 내에서 중복 선언 가능.
    var c = 1;
    var c = 2;
    console.log(c); // 2 

    /*
    // let 은 같은 scope 내에서 중복 선언 불가능. 
    let d = 1;
    let d = 2;
    console.log(d); // SyntaxError: Cannot declare a let variable twice: 'd'.
    */

    var e = 100;
    console.log(window.e); // 100

    let f = 100;
    console.log(window.f); // undefined

    // const 에서는 값을 재할당 불가. // 한번 정하면 변경할 수 없음.
    const g = 1;
    // g = 2;
    // console.log(g); // TypeError: Attempted to assign to readonly property.

    const aaa = document.getElementById("aaa");
    console.log("aaa - 1 :: ", aaa);
    aaa.innerHTML = "bbb";
    console.log("aaa - 2 :: ", aaa);
    // const 는 위치를 참조할 때 써야함. 
    // 참조하는 위치 (div 등등) 의 속성값을 바꾸는 것은 상관없음.
</script>

</body>

📍 js 에서의 map 은 배열의 매서드임.

각 요소를 가공해서 새로운 배열을 만듦

<script>
    const numbers = [1,2,3,4];
    const doubled = numbers.map ( x => x * 2 );
    console.log(doubled);
    /* Array (4)
        0 2
        1 4
        2 6
        3 8
    */
    
</script>

📍 리액트에서는 map 메서드를 어떻게 쓰나???

import { createRoot } from 'react-dom/client'

const fruitlist = ['apple', 'banana', 'orange'];

function MyList() {
  return (
    <ul>
      {fruitlist.map(fruit => 
          <li key={fruit}>{fruit}</li>
      )}
    </ul>
  );
}

createRoot(document.getElementById('root')).render(
  <MyList /> 
)

📍 ⭐️⭐️ js 에도 자바의 Map 이 있음.

const map = new Map(); // 형태로 씀.
map.set("a", 1);
map.set("b", 2);
console.log(map.get("a")); // 1

📍 구조 분해 할당

<script>
    // 구조분해할당
    const human = ['홍길동', '남자', '22'];

    // 과거방식
    const o_name = human[0];
    const o_gender = human[1];
    const o_age = human[2];
    console.log(o_gender); // 남자

    // 신규.
    const [name1, gender1, age1] = human;
    console.log(gender1); // 남자

    const [name, , age] = human;
    console.log(name); // 홍길동

    function dateInfo(d){
        const date = d.getDate();
        const month = d.getMonth() +1;
        const year = d.getFullYear();
        return [date, year, month];
    }
    const [date, month, year] = dateInfo( new Date() );
    console.log(date, month); // 27 2025
    // 배열로 해서 return 되는 거라서, 순서가 중요함.
    // ------------------------------- //
    // person 객체 선언.
    const person = {
        p_name : "홍길동",
        p_gender : "man",
        p_age : 22
    }
    let {p_name, p_gender} = person;
    let {p_age, country = "한국"} = person;
    console.log(p_gender, p_age, country); // man 22 "한국"
    // 객체에서는 순서에 상관 없고, 한개만 추출도 가능.

</script>

📍 스프레드 연산자

⭐️⭐️ const numbers = [one, two, ...rest];
스프레드할 때, 같은 key 값을 가지고 있으면 --> 가장 마지막으로 변경됨.

// 스프레드 연산자
const a = [1,2,3];
const b = [4,5,6];

const c = [...a, ...b];
console.log(c); // [1, 2, 3, 4, 5, 6] 

const numbers = [1,2,3,4,5];
const [one, two, ...rest] = numbers;
console.log(one, two, rest, rest[2]); // 1 - 2 - [3, 4, 5] - 5

📍 ⭐️⭐️⭐️ 얕은 복사 임.

// 객체에서 스프레드 연산자 사용하기
const man1 = {
    name : "홍길동",
    address : "서울",
    age : 22,
    info : { type : "good" } // ** 객체 안에 객체가 또 있어!! 여기 주의!! **
}

const man2 = {
    name : "둘리",
    brithday : "1996-01-24",
    gender : "남"
}

const man = {...man1, ...man2};
console.log(man); // {name: "둘리", address: "서울", age: 22, brithday: "1996-01-24", gender: "남"}
// 중복된 key 값이 있으면, 마지막껄로 덮어써짐.
console.log(man1.name); // 홍길동
man.name = "콩순이";
console.log(man1.name); // 홍길동
console.log(man2.name); // 둘리
console.log(man.name); // 콩순이

// 얕은 복사 주의 !!! ::  객체 안에 또 객체가 있을 때만 "참조"가 공유됨
console.log(man1.info.type); // good
console.log(man.info.type); // good
man.info.type = "bad";
console.log(man1.info.type); // bad
console.log(man.info.type); // bad

📍모듈

module을 가져올 때!! 꼭 <script type="module"> 선언해주기 !!

구분	default export	named export
여러개 export	하나만 가능함!	여러개 가능!
import 이름 동일 여부	자유롭게 변경 가능	반드시 동일하게 !
내 코드에서 무엇?	message.js 에서 export default message; 선언한 부분!!	person.js 에서 export const ~ ; export {} 선언한 부분!!

<script type="module">
import { name2, age } from "./person.js";
// alert(`내 이름은 ${name2} 이고, 나이는 ${age} 입니다!`, {name2}, {age} );
console.log( age, name2 ); // 22 - 둘리
</script>


<script type="module">
import mess from "./message.js"; // import 이름은 바꿔도 됨.
//alert( mess() );
console.log( mess() ); // 홍길동은 22세 입니다
</script>

// person.js

// 변수를 export 하기
// 방법 1
export const name = "홍길동"
export const age = 22

// 방법 2
const name2 = "둘리"
const age2 = 30
export {name2, age2}



// message.js
// 함수를 export 하기
const message = () => {
    const name = "홍길동";
    const age = 22;
    return name + `은 ` + age + `세 입니다`;
}

export default message;

📍 템플릿 문자열

백틱 (`) 사용해서 값 넣는 거!
템플릿 내에서 바로 계산 가능 !! -->
let total = `토탈은 ${price * quantity} 입니당`;
삼항연산자 가능 !! -->
const message = `어드민 상태값 :: ${ !isAdmin ? '어드민' : '유져'}`;

<pre class="demo"></pre>
<div class="demo"></div>

<script>
    const name = "홍길동";
    const age = 30;
    const mess1 = "안녕하세요, " + name + "입니다. \n나이는 " + age + "이예용!";

    console.log( mess1 ); 
    /* 안녕하세요, 홍길동입니다. 
       나이는 30이예용! */

    const mess2 = `하이루! ${name}님
    방가방가 입니당! 나이는 ${age} 이군용!`;
    console.log(mess2);
    /* 하이루! 홍길동님
            방가방가 입니당! 나이는 30 이군용!
    */

    //document.getElementsByClassName("demo")[0].innerHTML = mess;
    document.querySelectorAll(".demo").forEach( (el,idx) => {
        el.innerHTML = eval("mess" + (idx+1));
    });

    let price = 1000;
    let quantity = 7;
    let total = `토탈은 ${price * quantity} 입니당`;
    console.log(total); // 토탈은 7000 입니당

    const isAdmin = true;
    const message = `어드민 상태값 :: ${ !isAdmin ? '어드민' : '유져'}`;
    console.log(message); // 어드민 상태값 :: 유져
</script>

출처 :

https://www.youtube.com/watch?v=JNMarqNQQv4&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=2

https://powerdev.tistory.com/68#google_vignette

개발 공부를 위한 블로그 입니다.

오류가 있다면 댓글로 알려주세요!

감사합니다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'front > react' 카테고리의 다른 글

[react] css 사용 관련 (inline css, css obj, import css, import css module, composes, global css className) (1)	2026.01.02
[react] createPortal, Suspense (0)	2026.01.01
[React] 이벤트 핸들러 (0)	2026.01.01
[react] 컴포넌트, Props 에 대해서... (0)	2025.12.28
[react] JSX 란? (표현식, 속성, if문은 어떻게 사용하는지) (0)	2025.12.28

현재글[ES6] 기초 정리

250x250

gloria94682015

Today :
Yesterday :

gloria94682015

[ES6] 기초 정리

'front > react' 카테고리의 다른 글

'front/react'의 다른글

티스토리툴바

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

[ES6] 기초 정리

'front > react' 카테고리의 다른 글

'front/react'의 다른글

관련글

티스토리툴바