[Web_JavaScript] 03

● 함수

1. 인자(파라미터, parameter) : 매개변수(선언부)

2. 인수(아규먼트, argument) : 매개변수에 들어가는 값(사용부, 호출부)

 

 

 

● 함수의 선언

function 식별자(param1, param2, ...) {

    코드 작성

    return 리턴 값;

}

 

(1) function : 함수를 선언한다는 키워드(표시)

(2) parameter : 여러 개 있을 때에는 콤마로 분리하고 자료형을 따로 작성하지 않는다.(생략 가능)

(3) return : 사용하는 부분에 전달할 값 작성

 

---

 

● 동적 바인딩

- 컴파일 시 값에 따라 자료형이 동적으로 결정된다.

 

 

 

● hoisting(호이스팅)

- 선언의 위치에 상관없이 존재하면 메모리에 할당된다.

- 초기화 작업은 호이스팅 되지 않고 선언만 호이스팅된다.

 

 

 

● 가변인자

- 여러 개의 값을 전달받을 수 있는 매개변수

 

(...가변인자명)

- 몇 개의 값이 전달될 지 알 수 없을 때

- 각각의 값이 공통 요소일 때(순서가 상관없고, 특정 값만 가져올 필요 없을 때)

 

 

 

● includes()

- 문자열에 있는 includes()메소드에 조회할 값을 전달하면 포함되어 있을 때 true, 없을 때에는 false이다.

 

 

---

 

실습(js)

1. console.log() 출력

console.log("hello");

 

결과

 

 

 

2. variable

/* 
    contents: variable
*/

// 동적 바인딩 : 컴파일 시 값엔 따라 자료형이 동적으로 결정된다.
var data = 10;
console.log(data);
console.log(typeof(data));

var age;
console.log(age);

// hoisting(호이스팅) : 선언의 위치에 상관없이 존재하면 메모리에 할당된다.
// 초기화 작업은 호이스팅 되지 않고 선언만 호이스팅된다.
console.log(data2);
var data2 = 10;
console.log(data2);

var data3 = "절대 수정 금지";
// 되도록 var를 사용하여 변수를 선언한다.
data3 = "안녕";
console.log(data3);

 

결과

 

 

 

3. scope

// var로 선언된 변수는 함수가 아닌 다른 영역(제어문 영역)에서는 scope로 판단하지 않는다.
if(10 > 1){
    // 지역변수 같지만 함수의 scope가 아니가 때문에 영역 밖에서도 사용할 수 있다.
    var data4 =  10;
}

console.log(data4);

for(var i = 0; i < 10; i++){

}

console.log(i);  // i 사용 가능

var x; // 전역변수

function f(){
    var y;  // 지역 변수 
    x = 10; // 전역 변수 
    y = 10; // 지역 변수
    z = 10; // 전역 변수
}

f();
console.log("x : " + x);
console.log("z : " + z);
/* console.log(y); */  // y는 지역 변수이기 때문에 사용할 수 없다.

 

결과

 

 

 

4. const

const data = 10;
// data = 20;  // const로 선언하면 값을 수정할 수 없다.
console.log(data);

 

결과

 

 

 

5. let

let num = 10;
// let num = 20;  // let은 중복 선언이 불가능하다.
num = 20;
console.log(num);

for(let i = 0; i < 10; i++){

}
// console.log(i);  // let으로 선언된 i는 지역 변수이므로 사용할 수 없다.

if(10 > 1){
    let l = 10;
}

console.log(l);  // let으로 선언된 l는 지역 변수이므로 사용할 수 없다.

 

결과

 

 

 

 

실습(function)

1. 1~10까지 출력하는 함수

function printFrom1To10(){
    for(let i = 0; i < 10; i++){
        console.log(i + 1);
    }
} 

printFrom1To10();

 

결과

 

 

 

2. 1~10까지의 합을 출력하는 함수

function getTotal(){
    let total = 0;
    for(let i=0; i<10; i++){
        total += i + 1;
    }
    console.log(total);
}
getTotal();

 

결과

 

 

 

 

3. 1~n까지의 합을 출력하는 함수

function getTotalFrom1(end){
    let total = 0;
    for(let i=0; i<end; i++){
        total += i + 1;
    }
    console.log(total);
}
getTotalFrom1(100);

 

결과

 

 

 

 

4. JS에서는 오버로딩을 지원하지 않는다.

- 오류 발생

function add(num1, num2, num3){
    return num1 + num2 + num3;
}

function add(num1, num2){
    return num1 + num2;
}

console.log(add(1, 3));
console.log(add(1, 3, 5));

 

 

 

 

실습(가변 인자)

1. 이름, 나이, 성별을 입력받고 이름이 없다면 "무명(no name)", 성별이 없다면 "선택 안함"을 대신 출력한다.

function intro(age, ...datas){
    // 값이 존재하면 datas[0], 그렇지 않다면 "무명(no name)" 출력
    let name = datas[0] || "무명(no name)";
    let gender = datas[1] || "선택 안함";

    console.log(name);
    console.log(age + "살");
    console.log(gender);
}

intro(10);
intro(10, "홍길동", "남자"); 
intro(10, "홍길동");

 

결과

 

 

 

 

실습(includes())

console.log("ABC".includes("A"));
console.log("ABC".includes("Z"));

 

결과

 

 

 

 

실습(초기값 설정)

var data;
data = data || 10;  // data의 값이 존재하면 해당 값 출력, undefined이면 10 출력
console.log(data);

 

결과