function myFn(x) {
return x + 100;
}
const result = myFn(10);
const myFnV2 = functin () {
return 100;
}
myFnV2();
//함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined
//함수 호출
console.log(add(2,5)); //7
console.log(sub(2,5)); // TypeError: sub is not a function
//함수 선언문
functin add(x,y) {
return x+y;
}
//함수 표현식
var sub = functin(x,y) {
return x-y;
};
함수 선언문
으로 정의한 함수는 함수 선언문 이전에 호출이 가능하다.
그러나함수 표현식
으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
함수 선언문과 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.1. 함수 호이스팅 (function hoisting)
코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태다.
따라서 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수도 있다.
이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.2.변수 호이스팅
변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.So 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출을 해야된다.
함수 선언문 대신 함수 표현식을 사용할 것을 권장한다.
함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수 (Immediately Invoked Function Expression)라고 한다.
(function () {
var a = 3;
var a = 5;
return a * b;
}());
가변 인자는 이름 그대로, 변할 수 있는 인자란 뜻이다.
function sum(a, b, c) {
return a + b + c;
}
const abcSum = sum(10, 20, 30, 40, 50, 60);
arguments
객체의 프로퍼티로 보관한다.arguments
객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열
객체이며, 함수 내부에서 지역 변수처럼 사용된다.
arguments
객체는 매개변수 개수를 확정할 수 없는 가변 인자
함수를 구현할 때 유용하다.
function sum() {
let res = 0;
// arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for문으로 순회할 수 있다.
for(let i = 0; i < argumernts.length; i++){
res += argumernts[i];
}
return res;
}
cosole.log(sum()); //0
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
function sum() {...
}
cosole.log(sum()); //0
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
전개 파라미터
(rest paramaeter)를 사용한다.Rest 파라미터
(나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
function sum(...args) {
let s = 0;
for(let i = 0; i < args.length; i++){
res += args[i];
}
return res;
}
cosole.log(sum()); //0
console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
myFnV2();
sum.call(null, 10,20,30);
sum.apply(null, [10,20,30]);
apply
메서드는 호출할 함수의 인수를 배열로 묶어서 전달한다.call
메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.apply
와 call
은 형태는 다르지만 결과적으로 동일한 효과를 낸다.const arr = [10,20,30]
myFnV2();
sum.call(null, 10,20,30);
sum.apply(null, arr);
apply
함수 호출 방법이다.화살표 함수(arrow function)는 function 키워드 대신 화살표(=>, fat arrow)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.
화살표 함수는 표현만 간략한 것이 아니라 내부 동작도 기존의 함수보다 간략하다.
화살표 함수
는 함수 표현식으로 정의해야 된다.const sumV2 = (a,b, ... args) => {
let s = 0;
for(let i = 0; i < args.length; i++){
s = s + args[i];
}
return s;
}
1. 코드 블록이 하나일 때 리턴하는 경우 브레이스 생략 가능 또한 return도 생략된다.
const ten = x => 100 + x;
ten(10);
(출력)
110
2. 매개변수가 여러 개인 경우 소괄호 ( )안에 매개변수를 선언한다.
const arrow = (x,y) => {...};
3. 매개변수가 한 개인 경우 소괄호 ( )를 생략할 수 있다.
const arrow = x => {...};
4. 매개변수가 없는 경우 소괄호()를 생략할 수 없다.
const arrow = () => {...};
이 강의만 4번 들었다... 선생님 대사도 외우것어
어제 헤이조이스에서 여성 현직 개발자 라이브 세션을 들었다!
들으면서 전문적인 용어와 시스템에 대해서 막 설명해 주시는데 아직 잘 못 알아 듣겠...^^
근데 진짜 느낀 건! 너무 멋있는 여성 개발자들이 많다는 거❤
더 좋은 건 헤이조이스에서 라이브 세션들은 사람들을 위해 오픈 채팅방을 만들어줬다는 거!!
거기서 사람들끼리 따로 디스코드 방을 만들어서 직군별 채널도 나눠져 있고 스터디, 채용 공고도 올라온다는 거!!!!!!! 느무 조아라
해이해진 정신을 다시 바로 잡을 수 있어서 듣기 잘했다!