JavaScript(11)

박찬영·2024년 1월 18일

JavaScript

목록 보기
11/19

1. 함수

함수는 '호출될 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 
사용할 수 있는 것처럼, 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다.

함수는 만드는 두 가지 방법
	
    1) 함수 선언식
    	
        ex) function 함수명(){
        		// 함수의 기능을 표현한 구문
            }
        
	
    2) 함수 표현식
    	
        ex) const 함수명 = function(){
        		// 함수의 기능을 표현한 구문
            }
            
    
    3) 함수 선언식과 표현식의 차이
    
    	함수 선언식은 함수를 정의하기 전에 함수를 사용할 수 있지만
        함수 표현식은 함수를 정의한 후에 함수를 사용할 수 있다.
        


함수 호출시에는 반드시 함수명 뒤에 소괄호를 붙인다.
함수 안에서 선언한 변수는 함수 안에서만 쓸 수 있다.
        

2. 실습

1) html 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, inital-scale=1">
        <title>자바스크립트 실습</title>
    </head>
    <body>

        <script src="script.js"></script>
    </body>
</html>

2) js 코드

sayHello() //호이스팅이 가능하다
// sayBye() 오류뜸

function sayHello(){
    let hello = "문자열 헬로우"
    console.log(hello)
}

const sayBye = function(){
    console.log("good bye~")
}

3) 결과

3. 데이터 반환

함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다.
함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻한다.
키워드 return이 사용된다. (함수 내부에 return문 외 다른 코드를 포함해도 된다)


return의 기능

	1) 함수로부터 데이터를 반환한다 → 데이터는 딱 하나씩만 반환할 수 있다
    2) 함수를 끝낸다.
    
    

4. 매개변수 / 인자

ex) function sayFood(food1, food2){
		console.log(food1)
        console.log(food2)
        console.log("먹고싶다")
    }
    
    sayFood("치킨", "돈까스")
    sayFood("피자", "햄버거")
    
    → 여기서 매개변수는 food1, food2이며 인자는 치킨, 돈까스, 피자, 햄버거 이다.
    
    

5. 실습

1) html 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, inital-scale=1">
        <title>자바스크립트 실습</title>
    </head>
    <body>

        <script src="script.js"></script>
    </body>
</html>

2) js 코드

const result = confirm("확인해봐요!")
console.log(result)


function noReturn(){
    console.log("반환하지 않는다, 아무것도")
}
const a = noReturn()
console.log(a)


function thereIsReturn(){
    console.log("반환한다")
    let num = 5
    return num
}
const b = thereIsReturn()
console.log(b)


function sayAnything(ant, number){
    for (i=0; i<number; i++){
        console.log(ant)
    }
}
sayAnything("박찬영", 5)

function oddEven(number){
    if (number%2==0){
        return "짝수"
    }else{
        return "홀수"
    }
}

console.log(oddEven(5))

3) 결과

profile
블로그 이전했습니다 -> https://young-code.tistory.com

0개의 댓글