[JS] 자바스크립트 함수(Function) 사용법 및 개념

 

 

 

---

 

 

 

1) 함수 

작업을 수행하기 위한 명령문의 집합, 프로그램의 기본 구성 요소

 

 

2) 형태

function name(param1, param2) {
 // body
 return;
}

 

3) 기본자료형과 참조자료형

// 기본 자료형 : 값 전달 //
function changeName(name) {
name = 'tom';
}
const name = 'john';
changeName(name);
console.log(name);

// 참조 자료형 (객체) : 참조 주소 전달 //
function changeNameByObject(obj) {
obj.name = 'tom';
}
const user = { name: 'john' };
changeNameByObject(user);
console.log(user);

// 참조 자료형 사용 오류 //
const data = [
{ 'name': 'A', 'score': 77 },
{ 'name': 'B', 'score': 88 },
{ 'name': 'C', 'score': 66 },
{ 'name': 'D', 'score': 55 },
];
function check(data) {
const result = [];
const person = {};
data.forEach(value => {
person['name'] = value.name;
person['score'] = value.score;
person['pass'] = value.score > 60 ? true : false;
result.push(person);
});
return result;
}

 

 

4) 기본값 지정과 가변인자

// 기본 값 지정 // 
function showMessage(message, from='unknown') {
console.log(`${message} by ${from}`);
}
showMessage('Hi!');

// 가변 인자 //
function printAll(...args) {
for(let i = 0; i < args.length; i++) {
console.log(args[i]);
}
for(const arg of args) {
console.log(arg);
}
args.forEach((arg) => console.log(arg));
}
printAll('java', 'script', 'html/css');

 

 

5) 변수의 유효범위

let globalMessage = 'global'; // global variable
function printMessage() {
let message = 'hello';
console.log(message); // local variable
console.log(globalMessage);
}
printMessage();
console.log(message); // 현재 범위에서 선언되지 않아 오류 발생

 

 

6) return(반환값)

function sum(a, b) {
return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);
function nothing(a, b) {
}
console.log(`result: ${nothing(1, 2)}`);

 

 

7) javascript에서 함수의 장점 및 특징

  → 함수를 변수처럼 처리

outFunc();
        function outFunc() {
            return inFunc();
        }
        function inFunc() {
            console.log("~~~;")
        }

 

  → fetch()  사용

 - 웹 브라우저의 내장 API 중 하나로, 네트워크 요청을 수행하는 데 사용된다. 주로 웹 서버로부터 리소스를 가져오거나 웹 서버에 데이터를 보내는 작업에 사용된다.

 - fetch()는 Promise 기반의 API로, 비동기 방식으로 동작

const data = fetch("http://ggoreb.com/api/lotto.jsp");
        data.then(callback1).then(callback2);

        function callback1(response) {
            return response.json();
        }
        function callback2(response) {
            console.log(response);
        }

     // 예제 //
     
     const data = fetch("https://newsapi.org/v2/top-headlines?country=kr&apiKey=9f5baf7d9f3f42879a20d7d19d9886e4");
        data.then(callback1).then(callback2);

        function callback1(response) {
            return response.json();
        }
        function callback2(response) {
            let code ='';
            let imgUrl='';
            let articles = response.articles; //array
            for(let i = 0; i < articles.length; i++) {
                let article = articles[i];
                let title = article.title;
                let url = article.url;
                let img_url= article.urlToImage;
                code += `<a href='${url}'>${title}</a><hr>`
                imgUrl += `<img src='${img_url}'><hr>`
                
            }
            document.querySelector('body').innerHTML = code;
            document.querySelectorAll('a').innerHTML = imgUrl;

        }

// 위도와 경도 확인 //

       function callback(p) {
            let lat = p.coords.latitude;
            let lng = p.coords.longitude;
            console.log(lat, lng);
        }
        navigator.geolocation.getCurrentPosition(callback)

  → 변수에 값으로 할당 (*)

  → 함수를 다른 함수의 인자(argument)로 사용

  → 다른 함수를 함수의 반환(return) 값으로 사용 가능

 

 

 

 

 

 

---