TIL 30 :: JS 함수는 하나인데 이름은 3개(기본, 화살표, 익명)
함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.스크립트에서 함수를 사용하는 이유는
코드의 재사용성을 높이고 코드 구조를 파악하거나 유지보수를 할 때 용이하기 때문이다.
책을 만든다고 가정하면 이렇게 각 파트별 함수를 조립해서 쓰는 식이다.
표지()
속지()
잉크()
함수 선언문 - function
function 함수이름(parameter1, parameter2...) {
실행코드...
return 반환값
}
|
용어
|
번역
|
의미
|
|
Parameter
|
매개변수
|
함수와 메서드에 입력 변수 이름
|
|
Argument
|
전달인자, 인자, 인수
|
함수와 메서드에 실제 입력되는 값
|
파라미터와 아규먼트는 용어를 구분해야 합니다.
쉽게 **파선아실(파라미터는 선언, 아규먼트는 실제 값)**이라고 줄여 부르기도 한다.
함수의 기본
function hi(){
console.log('hello world')
}.객체 안의 함수라 메서드
.없이 접근하는게 함수
<!-- 2개가 영향을 끼칩니다. -->
<script src="a.js"></script>
<script src="b.js"></script>
<script>
// 1번 script
console.log(함수(10, 20));
console.log(변수);
b()
function a(){
console.log()
}
</script>
<script>
// 2번 script
a()
function b(){
console.log('b')
}
</script>js 파일을 나눈다고해서 서로 연결된 스크립트라고 생각해야한다. 그러므로 같은 변수가 있다면 최악의 상황이 벌어진다. 1번 script와 2번 script에서 만약 함수 안에 사용된 지역변수를 밖으로 빼낼 일이 있을 수 있는데 var로 접근하면 안된다. 두 개가 꼬이게된다. 그래서 JS를 처음에 배울 때 대부분 강의에서 const, let만 쓰세요! var는 안됩니다! 했던 이유가 이런 의미였나보다.
호이스팅
위로 호이~ 하고 올라가라는 호이스팅,,,
호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.
console.log(hello); // ReferenceError: hello is not defined
let hello; // 초기화 단계
console.log(hello);
hello = 99; // 할당 단계
console.log(hello);let hello = 10; // 전역 변수
{
console.log(hello); // ReferenceError: hello is not defined
let hello = 2; // 지역 변수
}만약 같은 변수명으로 선언되어있다면, let은 재선언이 불가능하기때문에 declared되었다고 console에서 에러를 보여준다. 하지만 var는 덮어씌워지면서 에러가 나지않고 찾을 수 없다.
호이스팅 관련 참고하기 좋은 글
https://hanamon.kr/javascript-%ed%98%b8%ec%9d%b4%ec%8a%a4%ed%8c%85%ec%9d%b4%eb%9e%80-hoisting/
화살표 함수
함수 func1는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.
function func1 (x, y) {
return x + y
}
let func2 = (x, y) => x + y;function func3 (x, y) {
let z = x + y;
return z
}
화살표 함수를 그냥 함수로 만든다면?!
화살표 함수
function을 생략하고 인자와 실행할 코드를 작성한다.
[10, 20, 30].filter(x => x >= 20)기본 함수
function func(x) {
return x >= 20
}
기명, 익명, 무명함수
기명함수
function test1(){
return 'hello 1'
}익명함수
let test2 = function(){
return 'hello 2'
}무명함수
let test3 = ()=>'hello3'3개 함수의 결과
name이라는 값이 없었는데 나온 이유는 console.dir(test1)을 해보면 알 수 있다. directory에 있는 name을 꺼내 온 것이다.
// test1.name
// 'test1'
// test2.name
// 'test2'
// test3.name
// 'test3'익명함수라고 하지만 name의 접근이되기때문에 기명함수이다.
즉시실행함수
(function 이름2(){
let x = 10;
let y = 20;
console.log(x + y)
})();
// 30- 한번만 쓴다 == 재사용하지 않는다. 메모리 효율이나 묶어주는 용도로 사용한다.
즉시실행되고 휘발되는 특징을 갖고있으며 실제 프로젝트에서 그렇게 많이 쓰이지 않는다
즉시실행 함수가 일반적인 함수와 다른 점은 괄호로 감싸져 있다는 것이다.
window 함수
window.onload = function() {}모든 요소들이 로드된 이후에 실행, 함수는 1개만 실행 가능, 자주 사용된다.
함수를 사용할 때 주의해야하는 점
함수를 간결하게 만들어야 테스트와 디버깅하는 과정이 쉬워진다.
https://ko.javascript.info/function-basics
함수
ko.javascript.info