들어가기 전에
"자바스크립트 잘 이해하고 있다는 것" === "자바스크립트 함수를 잘 이해하고 있다"는 말과 같습니다.
학습 목표
- 자바스크립트의 선언방식들과 그 차이점, 반환값, hoisting을 이해한다.
핵심 개념
- Function
- Hoisting
- arguments
- 기본 반환값 (undefined)
학습하기
3) 자바스크립트 함수-1
- 자바스크립트 함수
- 영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다.
함수 - 함수의 선언
함수는 여러 개의 인자를 받아서, 그 결과를 출력합니다.
파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않습니다.
만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 됩니다.
이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문입니다.
이를 한번 테스트해보세요.
// 함수의 호출.
function printName(firstname) {
var myname = "jisu";
return myname + " " + firstname;
}위와 같은 형식의 함수 선언코드는 함수선언문이라고 합니다.
함수 - 함수표현식
함수는 아래 printName과 같이 표현할 수도 있습니다.
이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.
function test() {
console.log(printName());
var printName = function() {
return 'anonymouse';
}
}
test();
//TypeError: printName is not a function
함수 표현식보다 함수 선언문을 더 자주 사용하지만, 어떤 코딩컨벤션에서는 함수 표현식을 권장하기도 합니다.
어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋습니다.
함수 - 표현식과 호이스팅
앞선 코드에서, printName이 "printName이 is not defined" 이라고 오류가 나오지 않고, function이 아니라고 나온 이유는
printName이 실행되는 순간 'undefined'으로 지정됐기 때문입니다.
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언합니다.
함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 합니다.
(실제로 코드가 끌어올려지는 건 아니며<이 과정이 눈에 보이는 게 아니죠>, 자바스크립트 파서 내부적으로 그렇게 끌어올려서 처리하는 것입니다)
따라서 아래 코드 역시 함수를 값으로 가지지만 어쨌든 printName도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태입니다.
printName(); //아직, printName이 undefined으로 할당된 상태다.
var printName = function(){}printName이라는 변수가 존재하고 아직 값이 할당되기 전이므로 printName에는 'undefined'이라는 기본 값이 할당된 셈입니다.
함수 - 반환값과 undefined
아래 함수의 반환값은 무엇일까요?
function printName(firstname) {
var myname = "jisu";
var result = myname + " " + firstname;
}정답은 undefined입니다.
자바스크립트 함수는 반드시 return값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환됩니다.
자바스크립트에서는 void 타입이 없습니다.
comment
24.03.31.
함수에서 매개변수 값을 입력하지 않으면 기본값으로 undefined가 들어간다.
전달되는 매개변수 값의 갯수가 틀려도 오류를반환하지 않는다.
undefined는 선언이 되어있지만 할당이 되어있지 않은 경우 부여하는 변수값이다.
함수 선언은 function a (){}이고 함수표현식은 변수에 함수를 할당해주는 것이다. var a = function(){}
파서는 함수에 대한 코드가 실행되기 전에 함수관련 코드들을 훑어서 기억해 뒀다가 불러온다.
함수표현식을 파서가 인식하는 것은 다음과 같다
var a;
a= function(){};
따라서 함수표현식보다 호출을 먼저쓰면 undefined가 되어 오류가 발생할 수있다.
2022.04.05
1. 함수의 선언 : 어떤 함수가 있을 때 파라미터보다 인자의 개수가 적어도 되고 많아도 된다.(만약 인자의 개수보다 파라미터 개수가 많으면 할당되지 않은 파라미터는 undefined 값을 가지게 된다.
2. Hoisting : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미하며 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것
3. 반환값과 undefined : 반드시 return 값이 존재하며, return 값이 없을 때는 기본 반환값인 undefined가 반환
자바스크립트는 함수를 실행하기 전, 함수를 실행시키는데 필요한 변수들만 먼저 모아서 싹 정리하기 때문에
아직 정의되지 않은 변수를 만나더라도 '이런 변수는 존재하지 않음'이 아니라 '이 변수에 아직 할당된 값이 없음(undefined)'이 나온다.
이 과정을 호이스팅이라고 한다.
어렵네.. ㅎㅎ;
20220214
210726
210618
21.05.09
매개변수, 인자값 일치 안해도 함수는 오류발생안함
함수선언문이어야 함수로 인식.
함수표현식은 인식 안됨.
함수표현식은 변수에 함수를 담은거.
변수만,함수만 위로 끌고온다. js파서가.
var (function-scope) let, const (block-scope) hoisting 관련 글 입니다.
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
function sum(){
var total = 0;
for( var i in arguments){
total += arguments[i];
}
return total;
}
20200509
자바스크립트 특이점
- JS는 파싱할때 선언된 변수와 함수는 끌어올려진다(호이스팅). 함수 호이스팅에서 문제가 되는 경우는 변수에 함수표현식을 쓰고 그 line위에 그 변수를 사용한 경우에는 undefine으로 인식한다는 것.
- 함수에서 return 이 없어도 undefine이 반환된다.
- 함수에서 인자를 안넘겨받고도 arguments로 필요한 값을 활용 가능.
마지막에 arrow function이라는 것은 요즘 프로그래밍 언어들의 트렌드를 알려주네요. 파이썬도 그렇고 요즘 새로나오는 언어들이나 문법들 자체가 브레쓰 자체를 지양하네요. 하긴 브레쓰로 인해 오류도 많고 코드 수정도 힘드니까요
https://opentutorials.org/course/3085/18882
2020/01/12
저는 hoisting을 쉽게 생각해서
어떤 변수명에 함수를 정의해 대입해서 만든 것들은 hoisting이 불가능하다고 이해하고
함수 선언식으로 만들어진 함수들을 모두 hoisting이 가능하다고 이해했습니다. (정확하게 맞는지는 잘 모르겠네요...)
arguments 부분에서는 함수 내에 arguments를 이용하게 되면 무한대까지 인자를 받아 사용할 수 있을 것 같습니다.
마지막 arrow function은 먼가 자바의 람다식이랑 비슷해 보이네요.
<응용하기>
arguments속성을 사용해서 , 1~무한대까지 인자를 받아 합을 구하는 함수를 만들어봅시다.
==
무한대 값을 받는건 어떤 함수를 써야하나요?
arrow function
파이썬에서 lambda랑 비슷한 느낌이 드는데 맞을까요?
arrow function
arrow function ()=>
장점 간결한 사용 ,익명함수이기 떄문에 표현식으로만 일관되게 사용
기존 function과의 차이 this, super, arguments new 등을 갖지 않습니다
this binding을 하지 않기 때문에 상위 컨텍스트 this를 참조하는 특징을 동적 binding으로 this가 달라지지 않게 하고 싶지 않은 메소드 내부 함수에 활용하는 등 사용할 수 있고
arguments는 ...rest parameter로 대체할 수 있고
this나 prototype도 가지지 않기 때문에 조금 더 내부적으로 빠른 동작을 할 것도 같습니다
기존에 new function 키워드로 함수가 생성자/ 함수의 기능도 했다면 es6에서는 arrow함수/ class로 분리하려는 사용을 분리하는 움직임 같습니다 여러모로 간단해서 장점이 많음 함수인 것 같습니다 :D