시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..)

자바스크립트

by e7e 2023. 6. 14. 12:48

class 의미의 function 키워드, this에 대한 생각을 쪼메 기피 했다면 아무래도 피로도가

있을 수 있으니, 개념의 의미보단 활용의 의미가 큰 새로 추가 된 Template String,

Spread Operator(전개연산자), Destructuring Assignment(구조분해할당)에 대해서

괜시리 시간을 내어 일단 알아보고 자주 쓸 수 있도록 하장!

Spread Operator(전개연산자)

...(쩜3개) 전개연산자가 쓰이는 모습을 먼저 아래코드를 실행, 결과체크롱 감 자바~보장!

프론트 프레임워크(angular,react,vue)에서 요따구 패턴으로 꽤나 사용된당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    let blackPink = [];
    blackPink = [...blackPink,"로제"];
    alert("blackPink 1: " + blackPink);
    blackPink = [...blackPink,"제니"];
    alert("blackPink 2: " + blackPink);
    blackPink = [...blackPink,"리사"];
    alert("blackPink 3: " + blackPink);
    blackPink = [...blackPink,"지수"];
    alert("blackPink 4: " + blackPink);

    let bts = [];
    bts = [...bts,"진","슈가","제이홉","RM"];
    alert("bts 1: " + bts);
    bts = [...bts,"지민","뷔","정국"];
    alert("bts 2: " + bts);

    const newGroup = [...bts,...blackPink];
    alert("newGroup" + newGroup);
</script>

진지하게 소스와 결과를 감시했다면 분명 음.. 이런식이얌! 하고 느낌이 와아쓸꺼당!

배열에 값 추가와 여러개 배열을 1개의 배열로 합치는 게 아주 쉽게 느껴진당!

Stop! 자아암깐깐!

만약 let으로 선언된 걸(blackPink,bts) const로 고친다면?, 배열의 값이 위에선 원시타입인데,

값으로 객체(object)가 온다면 어떤 문제가 예상되는가? 꼬옥 생각해보고 실험해보장!

아래처럼 쓴다면 함수(function)에 매개변수를 넘길 때, 갯수에 관계없이 편하게

쓸수 있을 것이당. 물론 똑똑하다면 호출할 때 넘길 매개변수들을 배열로 묶어서 1개만

보내는 방식으로 사용해도 된당. 사용여부는 순전히 본인 선택이당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
const myFunc = (onePick,...pArgs) => {
    console.log("   %s",onePick);
    for(let i=0; i<pArgs.length; i++){
        console.log("%i  %s",i,pArgs[i]);
    }
}

myFunc("예지","리아","류진",["채령","유나"]); //인기 ITZY
</script>

전개 연산자를 객체 생성 중괄호({})안에서 쓴다면 어떻게 될깡?

아래 코드도 실행결과를 누느로 화긴하고, 본인 같으면 어떻게 쓸까를 생각해 보장.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
const justArr = ["태양","지드래곤","대성","탑"];
const testObj = {...justArr};
console.log("testObj",testObj);// 꼬옥 누느로 화긴화삼


// 아래 => 뒤에 꼬옥 괄호가 필요한 이유는? 힌트: 생략업는 원모습은?
const objSum = (...objs) => ({...objs}) 

const miley = {name:"마일리 사이러스",song:"flower"};
const gaga = {name:"레이디 가가",song:"rain"};

console.log("objSum",objSum(miley,gaga));

</script>

생각하는 로직방식은 그 장점이 확실하게 보이지 않는다면 구찌 맘에 안들면 따라할 필요가 없당!

자신의 방식을 발전시키고 공유해서 본인 스스로 한발 더 나아가장! 따라만 하면 미래없음!

Destructuring Assignment(구조분해할당)

말이 멋지당. 웬지 트랜스포머처럼 자유자재로 변신 할 것 같은 느낌이당!

아니당! 필요한 것만 쏙쏙 뽑아내기 위해서 맹글어졌당. 당신은 뽑기의 다린이당

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    const songlist = [
        {singer:"로제",title:"Gone"},
        {singer:"제니",title:"Sole"}
    ];

    const blackPink = {
        brand:"블랙핑크",
        members:["로지","제니","리사","지수"],
        songs : songlist
    }

    /**** 객체(Object)에서의 구조분해  ****/
    // {singer:"로제",title:"Gone"} 에서 title속성값만 title변수로 받깅
    let { title } = songlist[0];  
    alert("title: " + title);
 
    // title속성을 title2 변수에 받깅, 요따구로는 거의 안쓴당!
    let { title:title2 } = blackPink.songs[1];
    alert("title2: " + title2);

    let { songs, members } = blackPink;
    console.log("songs",songs);
    console.log("members", members);

    /**** 배열에서의 구조분해  ****/
    let [rozi,...others] = blackPink.members;
    console.log("rozi",rozi);
    console.log("others",others);
</script>

낯설당! 많이! 하지만 못 알아먹을 정도는 아니당!

모듈 사용을 위해 import를 사용해서 모듈 내부의 일부만 꺼내어 사용했던 기억! 훌륭하당!

특히 배열에서의 구조분해할당은 오호! 하고 재밌을 정도당

더 다양한 사례를 보고 싶다면 MDN Destructuring 을 참고하면 좋은데,

사용예가 현업에 쓰기엔 너무 과하단 느낌이 드는 것들이 많으니 주의하장!

Template String

빽틱(`)을 이용한 템플릿 스트링은 문자열 연산에 + 기호의 난잡함과 멀티라인의

가독성까지 잡아줘서 그저 고맙당! 마니 마니 쓰도록 하장!

Tagged Templates라는 것도 있는 뎅, 급하지 않으니 나중에 보도록 하장!

아래 코드의 소스와 실행결과를 연결시켜 보는 것만으로 바로 느낌이 올 것이당.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    let str1 = "로제";
    let str2 = "제니";

    // 이전 문자열 더하기 스타일
    let oldStyle = str1 + "님 " + str2 + "님 넘 반가워용";
    alert("oldStyle " + oldStyle);

    // 빽틱(`)을 이용한 새로운 문자열 더하기 스타일
    let newStyle = `${str1}님 ${str2}님 넘 반가워용`;
    alert("newStyle " + newStyle);

    //함수를 이용 멀티라인 문자열 템플릿 구성
    const template= data =>{
        return `
            <div id=${data.id}>
                <h1>${data.content}</h1>
                <h3>${data.author}</h3>
            </div>
        `
    }

    alert(template({
        id:"e72",
        content:"This is My Story",
        author:"roze"
    }));
</script>

한가지 주의 해야 할 것이 있는 데 만약 템플릿 스트링을 스프링 JSP 파일 안에서 쓴다면

스프링 EL 표현과 자바스크립트 템플릿 스트링 표현 문법이 정확히 일치해서

문제가 발생한당. 자바스크립트 변수를 자바가 해석하려 하기 때문이당!

템플릿 스트링 $앞에 \(역슬래시)만 붙여주면 문제는 바로 클리어 된당!

확장자가 .js인 경우에는 자바가 해석하지 않기 때문에 \(역슬래시)는 필요없당당.

전개연산자, 구조분해할당, 템플릿 스트링은 항상 STAND BY YOU 되어 있어야 할 것시당!

손을 잡아라!~ 항상 당신을 있어보이게 빛내줄 친구가 되어 줄것이다.

https://www.youtube.com/watch?v=gzNcFx_4p8M

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 20 (prototype 프로토타입) (2)	2023.06.16
시베리안 허숙희의 자바스크립트 비기닝 19 (this 키워드) (0)	2023.06.15
시베리안 허숙희의 자바스크립트 비기닝 17 (function을 class로...) (2)	2023.06.14
시베리안 허숙희의 자바스크립트 비기닝 16 (Built-In 객체) (2)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 15 (즉각실행함수) (0)	2023.06.13