변수 = 값
함수 = 명령들 (코드의 집합)
변수는 값을 저장하는 것이라고하면,
함수는 다양한 명령들을 저장하는 것, 특정작업을 수행하는 코드의 집합이라고 할 수 있다.
함수가 필요한 이유?
> 재사용성
: 하나의 일을 하는 코드 조각을 정의된 블록안에 저장하고, 같은코드를 여러번 타이핑하기보다는
하나의 짧은 명령을 사용하여 언제든지 그 코드를 호출할 수 있게 하여 효율적인 장점이 있음.
> 가독성
: 내부에 작성한 코드들의 포괄적 의미를 포함하여 함수명을 잘 지어놨다면,
함수이름만으로 함수의 기능과 동작을 유추하여 한번에 드러낼 수 있고,
해당 기능이 필요시에 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이고 가독성있는 소스구성 가능.
//함수 선언
function 함수이름 (parameter 매개변수들..) {
동작
return 리턴값
}
//함수 호출
함수이름 (parameter매개변수);
> 코드들을 기능으로 묶고 싶을 때
> 입출력 기계를 만들고 싶을 때
let 함수 = (a) => { return a+10 }
함수를 만드는 방식
> 함수 선언
: function 키워드 통해 함수 선언 (일반적)
function hello() {
console.log('hi');
console.log('안녕하세요');
console.log('bonjour');
console.log('guten tag');
}
실행 → 반응x
cuz 함수선언은 그 함수가 사용될 때 어떤 행동을 할 지 정의만 하는 것.
→ (함수 호출) 함수이름( parameter );
hello();
↓ 출력 ↓
hi
안녕하세요
bonjour
guten tag
> 함수 표현식
: 함수 선언을 변수에 할당하거나 다른 함수의 argument로 활용하면서, 값처럼 활용해 함수만드는 방식
const sayHi = function() {
console.log('Hi');
};
return
: 함수를 호출했을 때, 함수가 값을 반환
> return을 생략하면 undefined값 리턴
> 호출결과 확인
1. return 값을 변수에 저장하여 console로 확인
let result1 = multiplyTen(3);
console.log(result1);
2. 바로 console로 확인!
console.log(multiplyTen(0));
parameter & argument
매개변수 (parameter)
> 함수 선언식의 괄호 ( ) 안에 쓴 변수명은 함수 안에서 변수와 같은역할을 함.
인자 (argument)
> 어떤 함수를 호출하면서, 호출문의 괄호 안에 쓴 값
함수에서 매개변수를 적어뒀다면, 호출시 인자로 전달한 값은 매개변수 통해 사용가능
function double(Number) { //매개변수Number (호출문에서 받은값을 Number라는 변수명으로 함수안에서 사용)
let Result = Number * 2
return Result
}
double(8); //argument
function double(Number = '3') { //파라미터 기본값 지정
let Result = Number * 2
return Result
}
double(8); //argument
double(); //기본값 3실행
double(undefined) //기본값 3실행
> 어떤 변수에 정의된값을 인자로 전달가능
let someNumber = 42
doubleNumber(someNumber); //someNumber의 값 42를 doubleNumber에 전달
> 가변인자 (함수의 파라미터 개수가 가변적일때) / arguments값 사용가능
function meetAt(year, month, date) { ----인자 3개
if(argument.length ==1) { ----인자 1개만 받았을때
return arguments[0]+'년';
} else if (argument.length ==2) { ----인자 2개 받았을때
return arguments[0]+'년'+arguments[1]+'월';
} else { ----인자 3개 받았을때
return arguments[0]+'/'+arguments[1]+'/'+arguments[3];
}
}
>arguments 값 사용 예시
(first, second, ...rest). 첫번째, 두번째,...나머지 argument
function firstWords() {
let word = '';
for(let arg of arguments) {
word += arg[0];
}
console.log(word);
}
firstWords('나만', '없어', '고양이');
//'나없고'
---------------------------
// 여기에 코드를 작성해 주세요.
function ignoreFirst (first, ...argu) {
for (const el of argu) {
console.log(el);
}
}
ignoreFirst('1세대', '2세대', '3세대');
ignoreFirst('곰팡이', '강아지', '고양이');
//2세대, 3세대, 강아지, 고양이
> rest parameter
const name = (first, second, ...others) => {
console.log('hi');
console.log(`${first}`);
console.log(`${second}`);
for(const arg of others) {
console.log(`참가자: ${arg}`)
}
}
name('kim', 'won','emma', 'manon')
중복함수
function getTax(price) {
return price * 0.1;
}
function calculateTotal(price) {
return price + getTax(price);
}
const result = calculateTotal(3500);
console.log(result);
> cal~함수내부에서 getTax함수를 호출
//반복문 + 조건문
const home = "대전";
const cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
for (let i = 0; i <= 5; i++) {
if (cities[i] === home) {
console.log("아, "+ cities[i] +" 사시는군요");
}
}
Arrow function 화살표 함수
> 함수 표현식보다 간결하게 함수만드는 방법 (callback 함수로 많이사용 : 인자로 전달되는 함수)
> 대부분 기존함수와 동일하지만, arguments 객체가 없어서 예외적으로 arguments 활용하는 함수는 변환못함.
> 모든 화살표함수는 익명함수라서 변수에 할당하거나 다른 함수를 호출할 때 아규먼트로 사용됨
> 기존의 function과 용도가 완전히 같지는 않다.
(변수에 할당하고) fuction을 지워주고 ()소괄호 오른쪽에서 =>
function hi(name){
return "안녕하세요" + name
}
// allow function
const hi = name => {return "안녕하세요" + name};
const hi = name => "안녕하세요" + name; //retrun생략할때 중괄호도 같이 생략!
> parameter 하나면 괄호 생략가능
*/
parameter 없거나 두개이상이면 소괄호 생략불가
/*
let sayHi = () => alert("hello");
sayHI ();
let sum = (a, b) => {
let result = a + b;
return result;
};
alert( sum(1, 2) ); // 3
/* a,b 인자를 받는 함수 sum이 만들어짐.
함수 sum은 화살표 => 우측의 표현식을 평가하고, 평가 결과를 반환.
*/
/* 리턴값 객체인경우
소괄호로 감싸줌 */
const getCode = () => {
return ({ name : 'code' });
};
예시 1) forEach callback function
[1,2,3,4].forEach( a=> console.log(a))
예시 2) EventListener
document.getElementById("btn").addEventListener("click", (e) => {
console.log(this);
});
출력 : window
//콜백함수 안에서 arrow쓰면 여기 내부의 this는 밖에있던 this값을 그대로 사용한다.
예시 3) object
let object = {
함수 : () => {
return this
}
}
object.함수 ();
'ARCHIVE > JavaScript' 카테고리의 다른 글
[JS] Event ( addEventListener ) (0) | 2021.08.24 |
---|---|
[JS] DOM (0) | 2021.08.15 |
[JS] array 배열 (0) | 2021.08.05 |
[JS] Object 객체 (0) | 2021.08.05 |
[JS] 조건문 / 반복문 (0) | 2021.08.04 |