[Front-end] 수업 #069일 2-5

JooSehyun·2023년 1월 31일
&&ES5 변수ES6 변수MapSpreadTableaaddEventListenerarrow functionconcatconstforfor , forEach , map 상황별 사용 정리foreachhrefletonClickpushtemplate literalvar객체 배열 반복문구조 분해 할당문자 연결배열 데이터 병합배열 데이터 합치기배열 반복문배열 병합배열 합치기복습삼항 연산자삼항 조건 연산자전개연산자조건 연산자템플릿 리터럴템플릿 리터럴 ( Template literal ) 이란?화살표함수
0
post-thumbnail

복습

1. ES5 변수 , ES6 변수 : (var , let , const)

ES5 : 가변변수 (VAR)

VAR : 재선언 가능 , 재사용 가능 , 값이 바뀌는 변수

🕵️‍♂️ 예제 :

		var a=5;
        var b=6;
        var c=a+b;

결과 : a + b = 11

        console.log('a+b='+c);
        var a=10;
        var b=7;
        var c=a*b;

결과 a * b= 70

이렇게 재선언과 재사용이 가능하다.
하지만
var 변수의 문제점이 있는데,

console.log('1번',num);
var num = 8;
console.log('2번',num);

num변수에 '8'을 부여했고 오류가 떠야 하지만 자바스크립트는 무시하고 8이 나온다. 또한 고유 스코프 안에 선언되면 외부로 나가지 않아야 하는데 var변수는 호이스팅에서 자유로운 변수이기 때문에 밖에서도 출력이 된다.

ES6 : 가변변수 (let)

let : 재선언 불가능, 재사용 가능, 값이 바뀌는 변수

🕵️‍♂️ 예제 :

let a=5;
let b=6;
let c=a+b;

결과 : a + b = 11

a=10;
b=7;
c=a*b;

결과 a * b= 70
재사용이 가능하고 값이 바뀌어도 되는 변수이다.
하지만

console.log('a+b='+c);
let a=5;
let b=6;
let c=a+b;

console.log가 먼저 나오면 let은 오류가 발생하여 실행이 되지 않고,

console.log('a+b='+c);
var=5;
var b=6;
var c=a+b;

var는 undefined 가 출력된다.

ES6 : 불변변수 (const)

const변수 : 재선언 불가, 재사용 불가, 값 바뀌지 않는 변수, 한번 정해지면 값이 바뀌지 않는다.

const b=1;
b=2

결과 "Uncaugt TypeError: Assignment to constant variable"

2. 템플릿 리터럴 ( Template literal ) 문자 연결 (숫자 + 문자 변수)

템플릿 리터럴 ( Template literal ) 이란?
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴로 표현식 / 문자열 삽입, 여러 줄의 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.
ES6 전에는 템플릿 문자열이라고 부르던 것을 ES6에서 템플릿 리터럴이라 부른다.

예를 들어 아래와 같이 템플릿과 숫자와 문자를 합치고 싶을때는 어떻게 해야하는지 알아본다.

🕵️‍♂️ 예제 :
리액트 + year + 년도 = 리액트 2023년도

먼저 year의 변수를 만든다. 

let year=2023;

나머지 변수는 따옴표("")로 표현하는 방식과 ES6에 생긴 기능인벡틱(``)으로 표현하는 방식이 있다.

따옴표("") 방식

const tit = '리액트' + year +'년도'

벡틱(``) 방식

const tit = `리액트 ${year} 년도`

둘다 결과는 리액트2023년도 이다.

두 방식에는 차이가 있는데 따옴표("") 방식은 문자만 따로 묶어 ''로 감싸주고 +를 한다.

벡틱(``) 방식은 전체를 벡틱으로 감싸주고 변수는 ${ }안에 넣어준다.

3. 삼항 연산자 or 조건 연산자

JSX 내부의 자바스크립트표현식에서 if문을 사용할 수 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { }안에 조건부 연산자를 사용하면 된다.

🕵️‍♂️ 예제 :

let score=90;
let student=score >= 80 ? '합격' : '불합격'

결과 : 합격

추가로 삼항연산자의 결과값이 화면에 나타나기를 원한다면

const tit=document.querySelector('👉선택자👈');
tit.innerHTML=student;

로 하면 선택자에 innerHTML 이 된다.

4. 객체 배열 반복문

배열은 순서가 있는 값으로 리스트와 비슷한 객체이다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않다. 배열의 요소 인덱스는 무조건 정수만 허용된다. 속성 접근자를 이용하여 배열 리스트의 요소나 배열 객체의 속성과 메서드를 호출할 수 있다.
[출처] http://velog.io/@jinyongp/JavaScript-배열-및-객체-반복문
[배열] , {객체} 이다.

const sungjuk=[
            {번호: 1, 이름:'가', 국어:100, 영어:99, 수학:98},
            {번호: 2, 이름:'나', 국어:90, 영어:55, 수학:100},
            {번호: 3, 이름:'다', 국어:70, 영어:49, 수학:93},
            {번호: 4, 이름:'라', 국어:62, 영어:80, 수학:85},
            {번호: 5, 이름:'마', 국어:59, 영어:78, 수학:65},
            {번호: 6, 이름:'바', 국어:84, 영어:68, 수학:45}
        	];

console.log(sungjuk); 로 확인하면 콘솔창에는 이렇게 뜬다.

이 배열을 for문으로 다시 한번 확인해본다.

for(let i=0; i<6; i++){
            console.log(sungjuk[i].번호,sungjuk[i].이름,sungjuk[i].국어,sungjuk[i].영어,sungjuk[i].수학);
        }


이 배열반복문을 가지고 우리는 HTML 에서 테이블로 만들어 본다.

└ 객체 배열 반복문 table 로 만들기

👇👇객체 배열 반복문으로 테이블을 만드는데 총 3가지의 방법이 있다.👇👇
1. for 문
2. forEach 문
3. map 함수

먼저 출력할 내용을 보관할 변수와 테이블 tbody에 넣을 변수를 만들어 준다.

let output='';
const tbody=document.getElementById('tbody')

👉(for문 || forEach문 || map함수 가 있을 자리)👈

tbody.innerHTML=output; 

☝마지막에 innerHTML을 해주어야 만들어 놓은 table에 넣어진다.

for 문

  • 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회한다.
  • 중간에 "break;" 문을 만나면 반복문을 중단한다.
for(let i=0; i<6; i++){
            output += `<tr>`;
            output += `<td>${sungjuk[i].번호}</td>`;
            output += `<td>${sungjuk[i].이름}</td>`;
            output += `<td>${sungjuk[i].국어}</td>`;
            output += `<td>${sungjuk[i].영어}</td>`;
            output += `<td>${sungjuk[i].수학}</td>`;
            output += `</tr>`;
        }

for문을 만들고
i는 0 ; i < 6 또는 배열.length()만큼; i를 +1 씩 증가하고
비어있는 보관할 변수에output <tr>을 처음과 끝에 열고 닫아주는 태그로 넣어주고 안에 sungjuk배열의 번호 , 이름 , 국어 , 영어 , 수학 을 <td>에 담아서 넣어준다.

forEach 문

앞서 for문을 작성했는데 보면 조건식과 실행문을 사용해야하므로 번거로운데 forEach문 는 훨씬 간결하고. 일반적인 for문보다 forEach문이 내장함수 이기 때문에 속도가 더 빠르다.
또 다른 특징은

  • 배열의 각 요소에 대해 callback을 실행한다.
  • 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없다. 이런 경우라면 for문을 사용해야 한다.
sungjuk.forEach(function(item, index){
            output += `<tr>`;
            output += `<td>${item.번호}</td>`;
            output += `<td>${item.이름}</td>`;
            output += `<td>${item.국어}</td>`;
            output += `<td>${item.영어}</td>`;
            output += `<td>${item.수학}</td>`;
            output += `</tr>`;
        });

forEach를 쓰고 함수안에 매개변수를 선언하여 따로 ${sungjuk[i].번호 로 사용하지 않고 훨씬 편하게 ${item.번호}로 작성하여 테이블화 한다.

map 함수

ES6에서 사용되는 반복문이다.

  • 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴한다.
  • 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없다. 이런 경우라면 for문을 사용해야 한다.
sungjuk.map(function(item, idx){
            output += `<tr>`;
            output += `<td>${item.번호} </td>`;
            output += `<td>${item.이름} </td>`;
            output += `<td>${item.국어} </td>`;
            output += `<td>${item.영어} </td>`;
            output += `<td>${item.수학} </td>`;
            output += `</tr>`;
        });
객체 배열 반복문 innerHTML로 table에 넣은 결과

🕵️‍♀️ for , forEach , map 상황별 사용 정리

for
for문은 인덱스 0부터 시작해서 배열의 길이만큼 순회하면서 배열의 각 원소들을 출력한다.

const animals = ["lion", "tiger"];
for (let i=0; i<animals.length; i++) {
  console.log(animals[i]);
}
// [콘솔 출력 결과]
// lion
// tiger

forEach
forEach은 배열을 순회하면서 배열의 각 원소들을 출력한다.

const animals = ["lion", "tiger"];
animals.forEach(animal => {
  console.log(animal);
});
// [콘솔 출력 결과]
// lion
// tiger

map 함수
map은 배열을 순회하면서 배열의 각 원소들을 출력한다. 특이한 점은 forEach와 달리 실행결과를 모은 새 배열을 리턴한다는 것이다. 아래는 별도의 return이 없기때문에 순회했던 개수만큼의 undefined 원소가 있다.

const animals = ["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
});
console.log(rr); // [undefined, undefined]
// [콘솔 출력 결과]
// lion
// tiger
// [undefined, undefined]

🕵️‍♀️ 따라서 각 배열 반복문의 특징에 따라 여러가지로 사용가능하다.

  • 단순 반복이라면 for 문
  • 배열을 순회하려면 forEach 문
  • 배열을 순회 후 새 배열을 얻고 싶다면 map 함수

사용할 것을 권장합니다.

[출처] https://whales.tistory.com/m/115

5. 배열 합치기 , 배열 병합 (concat, spread, push)

🕵️‍♀️배열을 병합하는 방법은 총 3가지가 있다.

ES5 : concat
ES6 : 전개연산자 (spread) ...
+기타 : push

ES5 : concat 방식

concat을 이용하여 arr1, arr2, arr3의 배열을 합칠 수 있다. concat은 원본 배열(arr1, arr2, arr3)을 변경하지 않고, 합쳐진 배열이 리턴된다.

예제

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = arr1.concat(arr2, arr3);
console.log(arr4);

결과

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

ES6 : 전개연산자 (spread) 방식

...와 같이 배열의 요소들을 나열하는 전개 연산자이다.
이 연산자를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있다.

예제

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [
  ...arr1,
  ...arr2,
  ...arr3
];
console.log(arr4);

결과

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

push + 전개연산자(spread) 방식

전개연산자(spread) 와 push를 이용하여 아래와 같이 여러 배열을 하나의 배열로 합칠 수 있다.

예제

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [];
arr4.push(...arr1);
arr4.push(...arr2);
arr4.push(...arr3);
console.log(arr4);

결과

[
  'a', 'b', 'c',
  '1', '2', '3',
  'A', 'B', 'C'
]

push 방식

그냥 push에 객체를 전달하면 아래와 같이 배열 안에 배열이 추가된다.

예제

const arr1 = ['a', 'b', 'c'];
const arr2 = ['1', '2', '3'];
const arr3 = ['A', 'B', 'C'];
const arr4 = [];
arr4.push(arr1);
arr4.push(arr2);
arr4.push(arr3);
console.log(arr4);

결과

[ [ 'a', 'b', 'c' ], [ '1', '2', '3' ], [ 'A', 'B', 'C' ] ]

[출처]https://codechacha.com/ko/javascript-concat-array/

6. 배열 데이터 합치기 , 배열 데이터 병합

🕵️‍♀️두가지의 배열 데이터를 합쳐야 하므로
두가지 배열 첫번째 배열 과 두번째 배열 예제부터 본다.

첫번째 배열

const sungjuk=[
            {번호: 1, 이름:'가', 국어:100, 영어:99, 수학:98},
            {번호: 2, 이름:'나', 국어:90, 영어:55, 수학:100},
            {번호: 3, 이름:'다', 국어:70, 영어:49, 수학:93},
            {번호: 4, 이름:'라', 국어:62, 영어:80, 수학:85},
            {번호: 5, 이름:'마', 국어:59, 영어:78, 수학:65},
            {번호: 6, 이름:'바', 국어:84, 영어:68, 수학:45}
        ];

첫번째 배열 map 함수

sungjuk.map(function(item, idx){
            output += `<tr>`;
            output += `<td>${item.번호} </td>`;
            output += `<td>${item.이름} </td>`;
            output += `<td>${item.국어} </td>`;
            output += `<td>${item.영어} </td>`;
            output += `<td>${item.수학} </td>`;
            output += `</tr>`;
        });

두번째 배열

const phone=[
            {번호:1, 이름:'가', 전화:'010-1111-0000', 이메일:'abc111@abc.abc'},
            {번호:2, 이름:'나', 전화:'010-2222-0000', 이메일:'abc222@abc.abc'},
            {번호:3, 이름:'다', 전화:'010-3333-0000', 이메일:'abc333@abc.abc'},
            {번호:4, 이름:'라', 전화:'010-4444-0000', 이메일:'abc444@abc.abc'},
            {번호:5, 이름:'마', 전화:'010-5555-0000', 이메일:'abc555@abc.abc'},
            {번호:6, 이름:'마', 전화:'010-5555-0000', 이메일:'abc555@abc.abc'}
        ];

두번째 배열 map 함수

phone.map(function(item, idx){
            output2 += `<tr>`
            output2 += `<td>${item.번호}</td>`
            output2 += `<td>${item.이름}</td>`
            output2 += `<td>${item.전화}</td>`
            output2 += `<td>${item.이메일}</td>`
            output2 += `</tr>`
        });

배열병합하기

let grade=[];
        for(let i=0; i<6; i++){
            grade[i]={
                번호: phone[i].번호, 
                이름: phone[i].이름, 
                전화:phone[i].전화, 
                국어: sungjuk[i].국어, 
                영어: sungjuk[i].영어, 
                수학: sungjuk[i].수학, 
                총점: sungjuk[i].국어+sungjuk[i].영어+sungjuk[i].수학,
                평균: Math.round((sungjuk[i].국어+sungjuk[i].영어+sungjuk[i].수학)/3)
            }
        }
        console.log([...grade]);

for 조건문 변수 i 는 조건문에 충족할 때 까지 빈 배열변수 grade에 넣어지며
첫번째배열인 sungjuk배열의 데이터 국어 , 영어 , 수학 , 총점 이 들어가고
두번째배열인 phone배열의 데이터 번호 , 이름 , 전화 가 들어간다.

결과는 아래와 같다.

두번째배열인 phone 은 번호 , 이름 , 전화 가 들어가있고,
첫번째배열인 sungjuk 은 국어 , 영어 , 수학 , 총점 , 평균 이 들어가서 병합이 되어있다.

└ 🕵️‍♀️배열 병합 비구조화 (구조 분해 할당)으로 만들기

let grade=[];
        for(let i=0; i<6; i++){
            let{번호, 이름, 전화}=phone[i];
            let{수학, 국어, 영어}=sungjuk[i]
            grade[i]={
                번호:번호, 
                이름:이름, 
                전화:전화, 
                국어:국어, 
                영어:영어, 
                수학:수학, 
                총점:국어+영어+수학,
                평균: Math.round((국어+영어+수학)/3)
            }
        }

변수 grade에 for 문을 만들고 병합하여 담아야 할 변수를 각
let{번호, 이름, 전화} = phone[i]
let{수학, 국어, 영어} = sungjuk[i]
에 담아서 grade 배열[i]에 넣어준다.

let txt='';
        let tbody3=document.getElementById('tbody3')
        for(let i=0; i<grade.length; i++){
            let{번호, 이름, 전화, 국어, 영어, 수학, 총점, 평균}=grade[i];
            txt += `<tr>`
            txt += `<td>${번호}</td>`
            txt += `<td>${이름}</td>`
            txt += `<td>${전화}</td>`
            txt += `<td>${국어}</td>`
            txt += `<td>${영어}</td>`
            txt += `<td>${수학}</td>`
            txt += `<td>${총점}</td>`
            txt += `<td>${평균}</td>`
            txt += `</tr>`
        }
        tbody3.innerHTML=txt

그리고 table로 넣을 tr , td 를 벡틱으로 txt 빈 변수에 넣어주고 차례대로 묶어놓은 번호 , 이름 , 전화 ... 등을 넣어주고 tbody3에 innerHTML을 해준다.

7. Arrow Function (화살표함수)

🕵️‍♀️화살표 함수란?

기존의 함수 표현식에서 function 키워드를 삭제하고 인자를 받는 매개변수의 괄호()와 코드블록({}) 사이에 화살표(=>) 만 넣어주면
이것이 바로 화살표 함수(Arrow Function)이다.
함수 내부의 내용이 반환값(return)만 있다면 코드블록(함수의 몸통)인 중괄호({})와 return을 생략할 수 있다.
그리고 또 하나 생략할 수 있는 것이 인자가 하나만 받는다면 매개변수의 괄호()도 생략 가능하고, 여기서 주의해야 할 점은 인자가 없으면 생략할 수 없다.

선언적 함수

fn1(1);
function fn1(pa){
	console.log('선언적 함수'+pa);
}
fn1(2)

선언적 함수는 function 안에 함수명을 담아 불러낸다. 그래서 함수 위에서 호출도 되고 아래에서도 호출이 된다.

변수에 담은 함수

fn2(1); 
let fn2=function(pa){
	console.log('익명 함수'+pa);
}
fn2(1);

함수를 변수에 담으면 순서대로 호출이 되며 위에서는 호출이 되지 않고 에러가 뜬다.

화살표 함수(Arrow Function)

let fn3 = (z)=>{
  console.log('화살표함수'+z);
}
fn3(5)

화살표함수는 익명함수다 function만 괄호 () 뒤로 보내면서 화살표로 변경사용한다.

  • let fn3 = (x,y)=>한줄로 끝낼거면 중괄호 생략
  • let fn3 = (x)=> 한줄로 끝낼거면 중괄호 생략
  • let fn3 = x => 매개변수도 하나라면 괄호 전부 생략가능
    - 매개변수가 1개인 경우만 괄호를 생략할 수 있다.
    - 매개변수가 2개이상인 경우 괄호를 생략하면 안된다.

8. 버튼등록 (onclick , addEventListener)


HTML <button> 예제

1. <button id="btn1" onclick="food()">버튼1</button>
2. <button id="btn2">버튼2</button>
3. <button id="btn3" onclick="">버튼3</button>

button에 이벤트를 주려면 onclick을 주거나 addEventListener를 주어서 이벤트를 만들었다.
위에 있는 HTML 버튼 예제 를 보면

1번 예제
1번에는 HTML에 button 태그에 직접 onclick을 입력하고 함수를 넣었다.

const food=()=>{
            alert('btn1 클릭 이벤트 확인 경고창!!!');
        }

자바스크립트로 food라는 함수를 만들고 실행문은 alert가 뜨게하는 함수이다.
1번 버튼을 누르면 onclick food함수를 실행하여 경고창이 뜨게된다.

2번 예제

2번에는 보다시피 HTML의 button태그에는 아무것도 없다. 2번의 방법은 직접 자바스크립트에서 onclick을 만든다.

const btn2=document.getElementById('btn2')
        btn2.onclick= (<) => {
            alert('btn2 클릭 이벤트 확인 경고창!!!')
        }

3번 예제
3번 예제도 동일하게 아무것도 없고 자바스크립트에서 addEventListener 에 click 이벤트를 만든다.

const btn3=document.getElementById('btn3');
        btn3.addEventListener('click',()=>{
            alert('btn3 클릭 이벤트 확인 경고창!!!')
        });

9. a태그 (버튼기능 , href기능 없애기)

HTML <a> 예제

1. <a href="#" id="btn1">버튼1</a>
2. <a href="javascript:void(0)" id="btn2">버튼2</a>
3. <a href="javascript:" id="btn3">버튼3</a>

1번 예제

const btn1=document.getElementById('btn1');
        btn1.addEventListener('click',event => { 
            event.preventDefault();
            alert('btn1 클릭 이벤트 확인 경고창!!!')
        })

a태그에 addEventListener 로 click 이벤트를 넣고 href="#"기능을 제거하고 버튼의 기능으로 써야하므로 event.preventDefault( ); 를 넣어 줌으로써 링크 기능이 삭제되었다. 그리고 함수의 매개변수가 1개 이므로 event의 ( )가 생략되었다.

2번 예제

const btn2=document.getElementById('btn2');
        btn2.addEventListener('click',() => {
            alert('btn2 클릭 이벤트 확인 경고창!!!')
        })

동일하게 a태그의 href 기능을 #대신 javascript:void(0)로 사용하였다. # 은 누르면 기본값으로 상단으로 올라간다. 이를 방지하기위해 javascript:void(0) 또는 javascript: 를 쓰면 링크이동이 방지된다.
그리고 나서 addEventListener 로 click 이벤트 실행한다.

3번 예제

const btn3=document.getElementById('btn3');
        btn3.addEventListener('click',() => {
            alert('btn3 클릭 이벤트 확인 경고창!!!')
        })

동일하게 href기능을 방지하기 위해 javascript:를 사용하였고 addEventListener 로 click 이벤트 실행한다.

profile
JooSehyun
이전 포스트

[Front-end] 수업 #069일 1-5

다음 포스트

[튜토리얼] React 앱 설치(CRA: Create React App)

0개의 댓글