23.01.20 study
추가 23.02.11 stydu
javascript 함수를 사용하는 방법
javascript 함수를 사용하는 방법들
함수를 종료할때,
매개변수를 사용방법
참고
https://hhyemi.github.io/2021/06/09/arrow.html
https://ko.javascript.info/function-expressions
::>추가 https://dev-note-97.tistory.com/273
::>추가 https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
1. function 사용하는 방법들
- 일반 함수식
function 함수명() { .... 함수 로직 } 예) function sayHi() { alert( "Hello" ) } sayHi();익명함수 23.2.11 ※추가
- 한번만 사용할 함수를 위한 개념으로 따로 함수의 이름을 갖지 않는다.
- 리터럴(literal)방식으로 변수에 담겨 사용하는 함수이다.
:>(리터널): '문자 그대로 읽히는 방식'으로 변수에 데이터를 넣을 때 사용하는 방식
ex) let a = 10; // const b = 20;
(() => {
})
(function() {
실행문;
})
예제)
$('#id').click(function() {
alert('click')
})즉시실행함수 23.2.11 ※추가
-함수를 정의하자마자 바로 호출하는 것을 즉시 실행함수이다.
(function() {
실행문;
})();
예제)
(function (x) {
console.log(x*x);
})(2); /// 4
-
변수형 함수
const a = function() { .... } -
화살표 함수(arrow function) ----> es6문법
const a = () => { .... }
※ 가장 중요한 포인트 일반식 함수랑 화살표 함수의 차이는
this가리는곳이 다르다는 것을 알고 가야 함!!!
2. function 종료
- 함수내부에서 retrun을 만나는 순간 즉시 함수를 종료시킨다.
///함수의 종료
function a() {
var res = 0;
return 2; <--- 여기서 종료됨
res = 4;
console.log(res)
}
var result = a();
console.log(result)
3. 함수 표현식 vs 함수 선언문 차이
1. 함수 선언문 vs 함수 표현식
함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
//함수 선언문
function sum(a, b) {
return a + b;
}함수 표현식: 함수는 표현식이나 구문구성(syntax construct)내부에 생선이 된다.
///함수 표현식
let sum = function() {
return a + b
};2. 자바스크립트 엔진이 언제 함수를 생성하는지 차이가 있다.
함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때부터 해당 함수를 사용할 수 있다. 그래서 실행 흐름이 표현식에 다다랐을 때 만들어지기 때문에 늦다. 정의한 함수는 함수가 선언되기 전에 접근하는게 불가능한다.
sayHi("John"); // error! 자체 에러가 나타남
let sayHi = function(name) { // (*) 여기서 함수가 만들어지기 시작
alert( `Hello, ${name}` );
};alert창은 실행이 안된다.
함수 선언문함수 선언문이 정의되기 전에도 호출할 수 있다.
이 부분이 가능한건 자바스크립트의 내부 알고리즘 때문인데 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 스크립트가 진짜 실행되기 전, "초기화 단계"에서 함수 선언 방식으로 정의한 함수가 생성되는 것이다.
sayHi("John"); // Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}
alert 창에서 Hello John창이 띄우는것을 확인가능하다.
3. 스코프
함수 선언문엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있지만, 블록 밖에서는 함수에 접근하지 못한다.
///함수 선언문
let age = propmpt("나이를 알려주세요." , 38);
//조건에 따라 함수를 선언함
if (age < 18) {
function welcome () {
alert("안녕!");
}
} else {
function welcome() {
alert("안녕하세요");
}
}
// 함수를 나중에 호출함
welcome(); --> TypeError: welcome is not defined함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 이런 에러가 발생하게 된다.
함수 표현식if문 밖에 선언한 변수에 welcome에 함수 표현식으로 만든 함수를 할당하면 된다.
let age = prompt("나이를 알려주세요.", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("안녕!");
};
} else {
welcome = function() {
alert("안녕하세요!");
};
}
welcome(); // 
함수 표현식을 코드를 조금 더 단순화 할 수 있는 '?' 삼항연산자로 한다면
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
function() { alert("안녕!"); } :
function() { alert("안녕하세요!"); };
welcome(); // 위가 같은 alert창이 뜬다.!!4. 일반 함수식과 화살표(arrow function)함수의 차이
1. this
- 일반함수 : 자바스크립트에서 모든 함수는 실행횔 때마다 함수 내부에 this라는 객체가 추가된다.
함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
- 함수 실행시에는 전역(window) 객체를 가리킨다.
- 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
- 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
- 화살표 함수(arrow function) : 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. this 언제나 상위 스코프 this를 가린킨다.
///일반 함수
function say() {
this.name = "안녕";
return {
name: "잘가",
speak: function () {
console.log(this.name)
},
};
}
///화살표 함수
function arrSay() {
this.name = "안녕";
return {
name:"잘가",
speak: () => {
console.log(this.name);
},
};
}
const say1 = new say();
say1.speak();
const say2 = new arrSay();
say2.speak();
2. 생성자 함수로 사용 가능 여부
///일반함수
function fun() {
this.num = 1234;
}
///화살표
const arrFun = () => {
this.num = 1234;
};
const funA = new fun();
console.log(funA.num); // 1234
const funB = new arrFun(); // Error
- 매개변수(parameter)
- 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수값(함수 내부의 지역변수)를 의미한다.
- 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값
function addNum(x, y, z) { // x, y, z라는 3개의 매개변수를 가지는 함수 addNum()을 정의함.
return x + y + z;
}
addNum(1, 2, 3); // 인수로 1, 2, 3을 전달하여 함수를 호출함. -> 6
addNum(1, 2); // 인수로 1, 2을 전달하여 함수를 호출함. -> NaN
addNum(1); // 인수로 1을 전달하여 함수를 호출함. -> NaN
addNum(); // 인수로 아무것도 전달하지 않고 함수를 호출함. -> NaN
마무리하며
오늘 function 함수를 사용방법에 대해 알아보았는데 물론 사용하는 사람이 편한식으로 사용이 된다고 하지만 각각 this를 사용함에 있어서도 인수를 가리키는 곳이 다름을 알 수 있었다. 많이 보고 직접 타이핑 해봐야 코드들이랑 친해지는 거 같다. 처음 javascript 시작했을 때 function() {} 만 봐도 이게 어떡해 적어가야 하는지 어렵기만 느껴졌지만 지금은 함수를 변수값까지 주고 retrun값 종료하는 코드까지는 (몇줄 안되는 코드들만) 쓸 수 있다는것에 내 자신이 신기하기도 하다..앞으로 몇백줄 줄줄이 나오겠지만 내가 지금 기초를 탄탄히 해야 흔들리지 않을거란걸 알고 있으니 기초라도 탄탄히 잡자!!!
내용 추가 하면서..
왜 자꾸 내 머리속에 지우개가 있는것처럼 내일 지나면 잊혀지는걸까..ㅠ 이번 스터디 할때도 자꾸 까먹고 까먹고..그만 좀 먹고...이젠 지식을 배불리 하고 싶다.!!
