728x90
함수
- 래퍼런스 타입
- 함수는 실행할 코드들의 이름을 지어준다.
- 반복 사용하는 기능들을 묶어서 관리한다.
- JavaScript에서 모든 함수는 Function 객체이다.
- 함수를 실행시키면 스택에 함수 실행이 쌓이고 순서대로 실행이 된다.
- 함수 선언: function 함수이름(매개변수) { 실행시킬 코드를 작성 }
- 함수 실행: 함수이름(매개변수에 전달받을 값);
function fun() {
console.log("fun 함수 실행됨"); //fun이라는 함수를 선언함. 선언해놓은 함수를 사용하여야 한다.
console.log("fun 함수 실행됨");
console.log("fun 함수 실행됨");
console.log("fun 함수 실행됨");
}
//함수 실행
fun(); // 함수를 실행. ()를 붙여야 함수 실행식이 된다.변수의 스코프
스코프?
- 식별자 접근 규칙에 따른 유효 범위이다.
- 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.
- 범위는 블록 or 함수에 의해 나눠진다.
전역 스코프
- 전역(모든 곳)에서 접근이 가능한 범위이다.
- 전역 스코프에 너무 많은 변수를 선언하면 관리하기가 힘들어진다.
- 접근이 어렵다고 전역변수만 쓰는 것이 아닌, 최소한으로 사용하도록 한다.
지역스코프
- 특정 영역에서만 접근이 가능한 범위이다.
let tmep = "나는 전역변수야"; //전역 스코프에 있는 변수. 따라서 con함수 안에서도 사용이 가능하다.
function con(){
let temp = "나는 지역변수야"; //함수 con안에서 사용할 수 있는 지역변수. 함수의 실행이 끝나면 해제되어 없어진다.
}
let temp2 = "나 접근 되나요?";
function con2() {
console.log(temp2); //temp2가 전역변수로 있으므로 접근이 가능하다.
}
con2(); //함수 실행
function con3() {
let temp3 = "나 접근 되나요?";
}
console.log(temp3); // temp3이 지역변수로 함수 안이라는 영역에서만 접근이 가능하기 때문에 함수con3의 temp3을 출력할 수 없다.
con3(); //함수 실행.호이스팅(hoisting)
- 변수가 선언되기도전에 호출했을 때 발생되는 에러이다.
- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
- var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화 한다.
- let과 const로 선언한 경우 호이스팅 시 변수를 초기화 하지 않습니다.
function temp4(){
console.log(x); // 변수를 var로 선언 시 결과 : undefined
// 지역변수 선언
let x = 5; // 변수를 var로 선언 시 호이스팅이 일어나도 오류를 나타내지 않는다.
//호이스팅이 발생하기 때문에 예상치 못한 문제가 일어날 수도 있다.
//변수는 코드를 작성할 때 최상단에 작성한다.
}
temp4();매개변수
function fun2(v) { // 함수fun2를 선언. 매개변수 v
console.log(v); //전달받은 매개변수를 사용
}
//전달받은 매개변수에 따라서 작업을 다르게 하고 싶을 때
function fun3(num){
console.log(`전달받은 매개변수는 : ${num}`);
}
let a = 1;
let b = 2;
fun3(a); // 매개변수 num에 전달할 값을 괄호에 입력
fun3(b);
fun3(3);
/* cup 컵이라는 함수를 만들고 컵은 물, 음료수 등을 따를 수 있는 기능이 있다.
cup이라는 함수를 만들고 매개변수로 drink 음료수를 따라줘보자 */
function cup(drink) {
//drink라는 매개변수에 "홍차","포도주스","오렌지주스"라는 값이 들어온 것이다.
console.log(`컵에 ${drink}를 따랐다.`);
console.log(`${drink}를 이 컵에 따라서 마시니까 기분이 좋아.`);
}
let c = "오렌지 주스";
cup("홍차");
cup("포도주스");
cup(c);
//전달되는 매개변수에 따라 다른 결과물을 보여줄 수 있다.
//거스름돈 자판기라는 기능을 함수로 만들어보자.
//자주 사용할 것 같은 기능들을 함수로 작성해놓고 재사용한다.
function vending(money, unit) { //매개변수는 여러개 전달할 수 있다. 구분은 ,로 한다.
console.log(unit + "원 짜리" + money / unit + "개");
}
vending(1000, 500); //1000원을 넣고 500원을 거슬러줘
vending(1000, 100); //1000원을 넣고 100원을 거슬러줘
let e = vending;
console.log(e); //함수도 값이기 때문에 변수에 함수를 넣을 수 있다.
// 변수e에 함수vending의 값이 들어있기 때문에 변수를 함수 실행식처럼 사용이 가능하다.
e(1000, 100);
let f = vending(); //()는 함수의 실행식이다. 함수를 실행시키는 것이므로 변수에 함수가 담기지 않는다.
console.log(f); //결과는 undefined
// 변수에 함수를 대입할 때는 함수의 이름을 전달해야 한다.return
- 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.
function ab(){
return "나는 반환값이야."; //함수가 실행하던 중 return식에 도달하면 return뒤에 작성한 값을 반환하면서 함수가 종료된다.
console.log("이건 안보일거야, 윗 줄에서 return시켜서 함수가 중지되고 return 값을 내보낼거야.");
}
let g = ab();
console.log(g); // return 문이 있기 때문에 return 값 뒤에 작성한 값을 반환한 것이다. 따라서 특정 값을 내보낼 수 있다.
// 함수 심화
function sum(num1, num2){
return num1 + num2;
}
console.log(sum(1,2));
function gg(num){
for (let i = 0; i < 10; i++) {
console.log(`${num}단 ${num} x ${i} = ${num * i}`)
}
}
gg(2);
//성격유형 검사지 함수버전
function type(value){
switch (value) {
case 1:
return "분노조절 잘해"
case 2:
return "과묵하지만 상냥해"
case 3:
return "조용하지만 술마시면 각오해"
}
}
type(1); // return으로 결과값이 반환이 되었지만 개발자모드에서는 노출되지 않는다.
console.log(type(1));alert
- 사용자가 '확인(OK)'버튼을 누를 때까지 메시지를 보여주는 창이 떠 있게된다.
- consol.log()가 코드의 동작이 끝난 후, 개발자모드(f12)에서 확인이 가능하다면, alert은 동작되는 내용을 실시간으로 모달창을 통해 확인할 수 있다.
alert(`나: ${player2} | 컴퓨터: ${computer2} | 승패: ${winlose}`);
728x90
