티스토리 뷰
2019.07.30(화)
Java Script 함수 사용 예제
- Ex01
// Ex01
// 함수의 기본적인 모양꼴 4가지
// 함수형식1
f1(); // 선언과 순서와 사용없이 사용가능(호이스팅 가능)
function f1() {
console.log('나는야 f1()');
}
// f1(); // 이것도 가능
console.log('------------');
// 함수형식2(헷갈림 주의)
//f2(); // 선언과 순서와 사용없이 사용불가(호이스팅 불가)
// 함수는 변할 일이 거의 없기 때문에 const를 사용한다.
const f2 = function(){ // var f2 = function f3() 가능
console.log('나는야 f2()');
}
f2();
console.log('------------');
// 함수형식3(헷갈림 주의)
// js에서는 람다식 이라는 용어를 잘 사용하지 않는다.
const f3 = () => {
console.log('나는야 f3()');
}
f3();
console.log('------------');
// 함수형식4(헷갈림 주의) : 객체 안에 함수 선언
const obj = {
f4 : () => {
console.log('나는야 f4()');
}
}
// ES6 부터 지원되는 형식
// 필드, 메서드는 자바와 다르다.
// 위 2번 3번만 성립됨
class Apple {
// 클래스 안에서 함수를 생성 할 때 타입을 붙이면 에러가 난다.
f5 = function(){
console.log('나는야 apple f5()');
}
f6 = () => {
console.log('나는야 apple f6()');
}
}
let apple = new Apple();
apple.f5();
apple.f6();
- Ex02
// Ex02
// Ex01의 함수 형식 1의 사용
// 1. 인수전달x, 리턴값x
function f1() {
console.log('나는야 f1()');
}
f1();
console.log('------------');
// 2. 인수전달o, 리턴값x
// 타입 자체가 무의미 하기 때문에 인수 앞에 let 사용 불가
function f2(a, b) {
console.log('나는야 f2()');
console.log(a, b);
console.log(typeof(a), typeof(b));
}
f2(10, '호랑이');
console.log('------------');
// 3. 인수전달x, 리턴값o
// 원형을 보고는 return 이 있는지 없는지는 알수 없다.
// 함수 안에 return이 있는지 없는지를 통해서 확인이 가능하다.
function f3() {
console.log('나는야 f3()');
return 100;
}
// 호출1
let num = f3(); // return 값 받음
console.log(num);
// 호출2
// return이 있기 때문에 바로 출력문에 연결이 가능한 것이다.
console.log(f3());
console.log('------------');
// 4. 인수전달o, 리턴값o
function f4(n, s) {
console.log('나는야 f4()');
return n+s;
}
console.log(f4(10, '호랑이'));
console.log(f4(10, 20));
- Ex03
// Ex03
// 함수 형식 3의 사용 (=>)
// 1. 인수전달x, 리턴값x
const f1 = () => {
console.log('나는야 f1()');
}
f1();
console.log('------------');
// 2. 인수전달o, 리턴값x
const f2 = (n, s) => {
console.log('나는야 f2()');
console.log(n, s);
}
f2(10, '호랭이');
console.log('------------');
// 3. 인수전달x, 리턴값o
const f3 = () => {
console.log('나는야 f3()');
return 20;
}
console.log(f3());
console.log('------------');
// 4. 인수전달o, 리턴값o
const f4 = (n, s) => {
console.log('나는야 f4()');
return n+s;
}
console.log(f4(30, '코끼리'));
- Ex04
// Ex04
// 1. 인수 전달이 1개 일 경우 () 생략가능 : (num) -> num
const f1 = num => {
console.log('나는야 f2()');
console.log(num);
}
f1(10);
console.log('------------');
// 2. 인수전달 x, return o
// 출력문이 하나 일 경우 { } 생략 가능, return 까지 같이 생략 해야 됨
/* const f2 = () => {
return 100;
} */
const f2 = () => 100; // return { }가 사라졌다고 바로 캐치할 수 있어야 한다.
console.log('나는야 f1()');
console.log(f2());
console.log('------------');
// 3. 1,2의 조합. 인수전달 o, return o
const f3 = num => 100;
console.log('나는야 f3()');
console.log(f3(200));
- Ex05
- Ex05는 실행결과 없으며, 코드를 눈에 익히는 것이 중요하다.
// Ex05
// 1. 객체 return 시키기
const f1 = () => {
// n은 객체
let n = {
a : 10,
b : 20,
}
return n;
}
console.log('------------');
// 2. 1번 변형
// let을 통해 변수를 사용하지 않고 바로 return에 객체를 넘김
const f2 = () => {
return {
a : 10,
b : 20,
};
}
console.log('------------');
// 3. 단문장일 경우 return을 생략 할 때 ( )을 통해 return이라는 것을 구분하게 한다.
// 그냥 생략을 하게 되면 함수로 인식한다.
/* const f3 = () => {
return {
a : 10,
b : 20,
}
}; */
const f3 = () => ({ // 위와 동일
a : 10,
b : 20,
});
console.log('------------');
// 4. 3번에 { return } 추가
// 3번에서 return 생략이 안 되었을 경우에는 아래 처럼 사용
// 이렇게 사용하지 않는다.
const f4 = () => {
return ({
a : 10,
b : 20,
});
}
const f4 = () => ({ // 이렇게 사용한다!!!(헷갈림 주의), 자주 사용하는 문법
a : 10,
b : 20,
});
// 5. 4번 형태의 함수를 원상복구 시키기
// return 객체가 되는 것이 확실하다.
// 이 함수는 return이기 때문에 log를 출력 할 수가 없다.
const f5 = () => ({
});
// 위 소스를 원상복구, 원상복구 시키는 법 또한 알아야 한다.
const f5 = () => {
console.log('Check');
return ({
});
}- Ex06
// Ex06
// 함수안에 함수작성 -1
const f1 = () => {
console.log('나는야 f1()');
const f2 = () => {
console.log('나는야 f2()');
}
// f2()는 call이 되는 것이기 때문에 f2로 return을 해야 한다.
// f2()는 실행된 f2()의 값을 return한다의 의미이다.
return f2;
}
// 호출1
const f3 = f1();
f3();
console.log('------------');
// 호출2
// 연속 call이 이루어진다.
// 즉, 함수안에 있는 함수의 call이 발생한다.
f1()();
- Ex07
// Ex07
// 함수안에 함수작성 -2
const f1 = () => {
console.log('나는야 f1()');
const f2 = (n, s) => {
console.log('나는야 f2()');
console.log(n, s);
}
// return 생략시 f1()(10, '호랑이'); 에러 발생
return f2;
}
f1()(10, '호랑이');
- Ex08
- 실행결과가 모두 동일
// Ex08
// 함수안에 함수작성 -3 <헷갈림 주의>
const f1 = (n1) => {
return (n2) => {
console.log(n1, n2);
}
}
// 단 문장이고 return이 있기 때문에 변형이 가능하다.
const f1 = (n1) => ((n2) => {
console.log(n1, n2);
})
f1(100)(200);
// n1은 인수전달이 한개이기 때문에 ( ) 생략이 가능하다.
const f1 = n1 => ((n2) => {
console.log(n1, n2);
})
f1(100)(200);
// n2 또한 한개이기 때문에 생략가능
// { }을 없애면 return도 같이 생략되었다고 판단이 되기 때문에 아래의 단문장은 { } 생략이 불가능하다.
const f1 = n1 => (n2 => {
console.log(n1, n2);
})
f1(100)(200);
// ( )도 생략이 가능하다.
// 객체를 리턴 할 때는 객체 스코프를 가지고 있기 때문에 ( )를 사용해야 되지만
// 함수는 { }개념이 없기 때문에 ( )생략 가능
const f1 = n1 => n2 => {
console.log(n1, n2);
}
f1(100)(200);
- Ex09
- Ex08을 좀 더 세분화
// Ex09
// Ex08 예제를 좀 더 세분화
const f1 = () => {
const f2 = () => {
}
}
const f1 = (n1) => {
const f2 = (n2) => {
}
}
const f1 = (n1) => {
return (n2) => {
}
}
const f1 = n1 => {
return n2 => {
}
}
const f1 = n1 => n2 => {
}
const f1 = n1 => n2 => {
console.log(n1, n2);
}
f1(100)(200);
const f1 = n1 => n2 => {
console.log(n1, n2);
}
f1(100)(200);
- Ex10
// Ex10
// 클로저 : 지역변수의 생명연장
// 함수간의 지역변수를 공유한다는 개념이 들어가면 전부다 클로저라고 생각하면 된다.
let f1 = function () {
console.log('나는야 f1()');
let num = 10;
console.log('-----------');
let f2 = function () {
console.log('나는야 f2()');
let s = '호랑이'
console.log(s);
console.log(num); // f1()의 지역변수를 f2에서 공유해서 사용했다.(클로저 개념)
}
return f2;
}
f1()();
- Ex11
// Ex11
function f1(f2) {
console.log('나는야 f1()');
f2();
}
const f3 = () => {
console.log('나는야 f3()');
}
// => 가 두개면 함수가 return 된다.
const f4 = () => () => {
console.log('나는야 f4()');
}
// 함수 f4 복구(복구하는 법 알아야 됨)
const f5 = () => {
console.log('확인');
return () => {
console.log('나는야 f5()');
}
}
// { }의 의미는 객체, 즉, 객체를 리턴시켜주는 함수이다.(반드시 알아둬라)
// ( )가 두개면 함수를 반환하는데 { }가 있는데 반환되는 함수는 객체를 반환한다.
const f6 = n => (n, s) => ({
})
const f7 = n => (n, s) => ({
a : 10,
b : '호랑이',
c : true,
d : () => {
},
e : {
},
})
// 작성된 함수 전달
f1(f3);
console.log('-------------');
// 함수를 전달하는데 () 안에 익명함수를 구현해서 전달.
f1( () => {
console.log('받아라');
});
console.log('-------------');
f1(f4()); // 함수가 return 된 함수가 호출된다.
console.log('-------------');
console.log('f7 call');
const obj = f7(100)(200, '독수리');
console.log(obj);
- Ex12
//Ex12
let f1 = function() {
console.log(1);
}
f1();
f1 = () => {
console.log('1-1');
}
f1();
// const는 변경이 불가능 하기 때문에 error 발생한다.
const f2 = function() {
console.log(1);
}
// 아래 코드 사용 불가
/* f2 = () => {
console.log(2);
} */
f2();
- Ex13
//Ex13
//alart.prompt() 웹에서 사용
function f1() {
console.log('나는야 f1()');
console.log(arguments);// 모든 객체 출력
console.log('---------------------------------');
for (const item in arguments) {
console.log(arguments[item]);
}
}
// 가변 인수 전달이 있으면 문제 없이 실행
// f1이 인수를 받지 않기 때문에 arguments를 사용하면 받아 사용 할 수 있다.
// 출력 값을 보면 알겠지만 arguments는 객체이다. -> 그렇기 때문에 Loop-in 문장 사용 가능
f1(10, 20); 
- Ex14
// Ex14
// js도 Math 함수를 지원한다.
// 절대값
console.log('절대값', Math.abs(-5));
// 루트값
console.log('루트값', Math.sqrt(16));
// 최대값
console.log('최대값', Math.max(5, 10));
// 최소값
console.log('최소값', Math.min(5, 10));
- Ex15
// <*알아두기>
// 콜백 : 함수에 인수값을 던져서 함수를 실행시키는 형태를 말한다.
// Ex15
// ms -> 3초
// 3초 후에 이 함수를 실행해라.
// 즉, 3초 동안 아래의 log들을 먼저 출력 한 후 3초 후에 함수의 값을 출력한다.
// setTimeOut() : 이 함수를 비동기 non-blocking 이라고 한다.(비동기함수)
// blocking : 함수가 더 이상 실행을 못하고 멈춰있는 것
// non-blocking : 뛰어넘어 다른 것 실행
// 동기 : 이 함수를 실행시킨 주체가 함수가 실행을 완료 했는지 안했는지 끝까지 확인하는 것(ex, scanf)
// 비동기 : 이 함수를 실행시킨 주체가 함수가 실행을 하던지 말던지 관심없는 것
// block, non-block 와 동기, 비동기는 따로 개념을 이해해야 된다.
// Main이 이 함수에게 3초동안 실행하라고 던져주고 나몰라라 했으므로 비동기
// 대부분 함수는 non-blocking 이다. 거의 대부분 비동기 함수이다.
setTimeout(() => { // 1번
console.log(55); // 2번
}, 3000)
console.log(33);
console.log('3초 후 실행');
- Ex16
// Ex16
// with 사용법
obj = {
a : 10,
b : '독수리',
}
console.log(obj.a, obj.b);
console.log(obj['a'], obj['b']);
console.log('-----------');
// with 안에서는 사용하는 변수들의 타입을 obj. 라고 생각하기 때문에 바로 사용 가능
// 단순한 형태의 객체일 때는 실용성이 없어 보이지만 복잡한 형태일 때는 유용하다.(유연하고 가독성 좋음)
with(obj){
console.log(a, b);
}
- Ex17
// Ex17
// ES6에서 나온 문법
obj = {
name : '홍길동',
age : '100',
}
// ES5 에서는 이렇게 사용했다
/* let name = obj.name;
let age = obj.age;
*/
// 비구조화 할당 : ES6에서 새로 추가된 문법
// obj가 들어있는 필드명과 동일한 것은 대입이 되어 버린다. 하지만 필드명이 다르면 대입되지 않는다.
// { }안의 변수 명의 순서는 중요하지 않고 필드와 같은 이름이라면 대입이 가능하다.
// 필드명이 정확하게 매치가 되지 않는다면 error
// 하나라도 필드명이 다르다면 대입이 되지 않고 error이 발생한다.
// const { name } = obj; 와 같이 한 개만 넣어서 사용 가능
// 필드가 많을 때 필요한 것만 골라 사용할 때 아주 편리하다.
const { age, name } = obj;
console.log(age, name);
console.log('----------');
function f1(obj) {
const { name, age } = obj;
console.log(name, age);
}
f1(obj);
console.log('----------');
// 배열 또한 비구조화 할당 가능
// 배열의 경우에는 변수명이 크게 영향을 받지 않는다.
// 배열 또한 받고 싶은 요소만 받을 수 있다.
const ar = [10, 20, 30];
const [t1, t2, t3 ] = ar;
console.log(t1, t2, t3);
console.log('----------');
// 배열 또한 받고 싶은 요소만 받을 수 있다.
const arr = [10, 20, 30];
const [, t4, t5 ] = arr;
console.log(t4, t5);
'Java Script' 카테고리의 다른 글
| [JAVA SCRIPT] JS - concat(), slice(), pop(), 전개 연산, 비구조화 할당 (0) | 2019.08.08 |
|---|---|
| [JAVA SCRIPT] Java Script function, Object, Array, Sort (0) | 2019.07.31 |
| [JAVA SCRIPT] Java Script 변수 타입 (0) | 2019.07.29 |
| [Notepad] VSCode 환경설정 및 단축키 (0) | 2019.07.29 |
| [JAVA SCRIPT] PROTOTYPE (0) | 2019.07.25 |
댓글