본문 바로가기
국비 교육/프론트엔드

[자바스크립트] 함수 - 2 (화살표 함수)

by 육츠 2024. 3. 2.
Contents 접기

화살표 함수

일반적인 함수를 화살표로 작성하는 방법

 

- 함수 리터럴 방식 변경

단계 내용
1단계 funtion 키워드 삭제 
2단계  ) { 사이에 화살표(=>) 삽입
3단계  { } 안에 구문이 1 줄이라면 { } 생략 하고 리턴 삭제 
let three = (x,y) => x - y;
console.log(three(16,3));

// 아래의 four를 화살표 함수로 수정하시오
let four = function() {
    console.log(`${x} + ${y} = ${x+y}`);
}

let four1 = (x,y) => console.log(`${x} + ${y} = ${x+y}`);
four1(3,6);
단계 내용
4단계 매개변수 1개 밖에 없다면 생략 가능
5단계 매개변수가 하나도 없다면 생략 불가 
let five = x => {
    const result = x ** 2;
    console.log(`${x}의 제곱은 ${result}이다.`);
}
five(4);

let six = () => console.log("전달인자 없음");
six();
단계 내용
6단계 - 함수의 매개변수 위치에 default 값 설정 가능
- 디폴트 값은 오른쪽에서 부터 채워야 한다.		 
let seven = (x,y=0) => console.log(`${x} + ${y} = ${x+y}`); 
// let seven = (x=0,y) => console.log(`${x} + ${y} = ${x+y}`); => NaN
seven(3); 
seven(5,6);

 

// review
setInterval(function(){
    // 작업
}, 10000);
// 위와 동일한 표현
setInterval(() => {
    // 작업
},1000);

 

화살표의 활용

let arr = [10, 11, 100, 101, 1000];
console.log('arr의 크기 :' + arr. length);

 

 

1) forEach 는 배열의 개수만큼 순환하는 함수이다.

let total = 0;
// let result = 
arr.forEach(function(item, index, ary){
    // console.log(item, index, ary);
    total += item;
});

console.log('배열의 총합: ' + total);
// console.log('result ' + result);

 

2) 화살표 함수로 변경한 경우

total = 0;
arr.forEach(item => total += item);
// arr.forEach((item,index, ary) => total += item); => 사용할 인자만 전달 받아도 된다.
console.log('배열의 총합-1: ' + total);

 

자바 스크립트 결과

 

map 함수

특징  
1 배열의 요소 변경
2 배열 요소 전체를 순환하면서 결과값으로 새로운 배열을 만들어 반환한다.
3 원본 배열의 값은 변경하지 않는다. 
let result = arr.map(item => item * 2);
console.log('map 함수 처리결과: ' +result);
console.log('원본 배열 : ' + arr);

 

filter() 함수

특징  
1 배열의 요소를 삭제 (필터링)
2 배열 요소를 순환하면서 true 가 반환되면 그 조건이 true 인 요소들로 새로운 배열을 만들어 변환한다.
3 원본 배열의 값은 변경하지 않는다.

 

result = arr.filter(item => {
    if (item%2 === 0) return true;
    else return false;
})
console.log('filter 함수 처리결과: ' +result);
console.log('원본 배열 : ' + arr);

 

자바 스크립트 결과

 

구조분해 할당

구조분해 할당은 객체 (배열, 오브젝트)를 분해하는 작업

 

1. 배열

let one = [10, 20, 30];

let a = one[0];
let b = one[1];
let c = one[2];

console.log(a,b,c);

 

1) 배열 요소를 각각 분해해서 변수에 저장하는 방법

-  = 의 왼쪽에는 변수가 무조건 하나만 가능하다.

let [a1,b1,c1] = one;
console.log(a1,b1,c1);

 

2) 분해하는 방법

let [ , ,c2] = one;
console.log(c2); // 30
let [a2,b2,c2, d2] = one;
console.log(d2); // undefined

 

3) 두 변수의 값 교환하기

let x = 10;
let y = 20;

 

- 예전 방식

let temp;
temp = x;
x = y;
y = temp;

 

- 현재 방식

[y,x] = [x,y];
console.log('두 변수의 데이터값 교환 : '+ x, y);

 

결과

 

2. 객체

let objOne = {
    name : '손오공'
    , age : 29
};

 

- 예전 방식

let name = obj[name]; // obj.name

 

- 현재 방식

let {name, age} = objOne;
console.log('객체의 구조분해 할당 : ',name, age);

 

 

분해할때 객체의 이름과 분해하는 이름이 같아야한다.

다른 이름을 사용하려고 하는 경우에는 별칭을 사용

let objTwo = {
    name : '저팔계'
    , age : 29
};

let {name : nickName, age : hisAge} = objTwo;
console.log(nickName, hisAge);

 

default parameter 쓰기

let {name : k, age : d, address = '서울'}= objTwo;
console.log(k, d, address);

 

결과

 

연습 문제 - 서버로부터 데이터를 전송받았다고 가정하고, 그 데이터를 분해해서 화면에 출력하시오.

- html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 연습문제</title>
    <script defer src="./script/A09_Exam.js"></script>
    <style>
        table{
            border: 2px solid #333;
            border-collapse: #eee;
        }

        table tbody>th:nth-child(1){
            background-color: #eee;
        }

        table th,
        table td {
            border: 1px solid #eee;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>연습문제</h2>
    <p>
        서버로부터 데이터를 전송받았다고 가정하고, 그 데이터를 분해해서 <br>
        화면에 출력하시오.
    </p>
    <hr>
    <h2>결과</h2>
    <div id="result"></div>
</body>
</html>

 

- 자바스크립트

// 서버에서 아래와 같은 형태의 데이터를 전송 받았다.
// 적절히 조합해서 html 위치에 출력하시오

let receiveData = [
    {id : '001', 'name' : '홍길동', license : '정보처리기사'}
    , {id : '002', 'name' : '임꺽정', license : '빅데이터분석기사'}
    , {id : '003', 'name' : '전우치', license : 'ADsP'}
    , {id : '004', 'name' : '손오공'} 
    , {id : '005', 'name' : '사오정', license : '운전면허증'} 
];

let data = ` 
<table>
<tr>
    <th>아이디</th>
    <th>이름</th>
    <th>자격증</th>
</tr>
`;

// 데이터 처리를 함
receiveData.forEach(function(item) {
    let {id, name, license=" "} = item;
    data += `<tr>
    <td>${id}</td>
    <td>${name}</td>
    <td>${license}</td> 
</tr>`
});

data +=`</table>`
// 완성된 데이터를 html 코드에 꽂으면 됨
document.getElementById('result').innerHTML = data;

 

- 결과

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

'국비 교육 > 프론트엔드' 카테고리의 다른 글

[자바스크립트] 함수 - 5 (BOM, DOM, DOM 예제)  (0) 2024.03.04
[자바스크립트] 함수 -3 (배열처리, 문자열처리)  (0) 2024.03.02
[자바스크립트] 함수 - 1  (0) 2024.03.02
[자바스크립트] 연산자, 반복문과 제어문, defer  (0) 2024.03.02

관련글

티스토리툴바