JavaScript / JavaScript Deep Dive 스터디 1주차

---

---

스파로스 아카데미에서 원피스마냥 동료들 모아서 스터디를 진행하고 있는 중이다.

스터디 모집을 어케했고, 어떻게 진행했는지는 이후 스터디가 끝난후에 적어보려고 한다.

 

각자 맡은 파트가 달라서, 다른 인원들의 파트는 아래 링크하도록 하겠음.

내가 이번주 맡은 파트는 Function - 함수다.

 

1.함수란 무엇인가?

 

함수는 기본적으로 내가 무언가를 넣으면 어떠한 로직에 의해 값이 도출되는 것을 말한다.

예를들어 내가 '안녕하세요' 라고 말하면 여러분들이 '안녕하세요!' 라고 대답해주는 것도 하나의 함수라 할수 있지

 

이를 식으로 표현하면 f(x) = y 라고 표현할수 있다.

이를 또 자바스크립트식으로 표현하면 다음과 같다.

function hi(x) {
return '안녕하세요!';
};

hi('안녕!');

위와 같이 hi라는 함수를 정의할수 있다.

 

위의 내용을 조금더 자세히 보자.

왼쪽처럼 함수를 만드는 것을 함수 정의라고 하며

함수 정의에는 보통 함수의 이름, 매개변수, 그리고 반환할 내용을 필요로 한다.

 

오른쪽과 같은 함수 호출 단계에서는,

함수 정의에 필요했던 매개변수에 인자 라는 값을 넣어서 함수를 실행시키는 것이다.

 

2. 그렇다면 함수를 왜 쓸까?

 

[1] 중복된 코드를 줄일 수 있기 때문에 - 유지보수의 편의성

[2] 사람의 실수를 줄일 수 있기 때문에 - 코드의 신뢰성

[3] 코드에 이름을 붙일 수 있기 때문에 - 코드의 가독성

 

var x = 0;
var y = 0;
var result = 0;

x=1;
y=1;
result = x+y;

x=2;
y=2;
result = x+y;

함수를 사용하지 않고 만든 식

 

function add(x ,y) {
return x+y;
}

var result = 0;

result = add(1,1);
result = add(2,2);

함수를 사용해서 만든 식

 

 

3. 함수를 정의하는 다양한 방법

함수란 무엇인지, 그리고 함수를 왜 쓰는지까지 알았다면

이제부터는 그 함수를 어떻게 정의할지에 대해 알아보장

 

[1] 함수 선언문

function add(x ,y) {
return x+y;
};

함수 이름을 생략하지 않고 함수를 정의

 

[2] 함수 표현식

var add = function (x, y) {
return x+y;
};
//익명 함수 표현식

var add = function foo (x, y) {
return x+y;
};
//기명 함수 표현식

호이스팅과 관련한 문제가 생기기 때문에 함수 선언문 보다는 함수 표현식을 사용하는 것이 좋음

 

[3] Function 생성자 함수

 

var func = new Function(///);

new 키워드를 활용해 함수를 생성하는 방법

잘 사용하지 않음

 

[4] 화살표 함수(ES6)

const add =(x ,y) => x+y;
console.log(add(2,5));

화살표를 활용해 사용하는 함수

기존 함수와 this 바인딩이 다름

prototype property X

arguments 객체를 생성하지 않음 등의 차이가 있음

 

 

4. 함수를 호출하는 방법

이제 만든 함수를 호출하는 방법에 대해 알아보자

 

함수호출은 다음과 같이 한다.

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다. => add()

함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. => add(x,y)

함수를 호출하면 현재의 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. => stack => add

이때 매개변수에 인수가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작한다. => arguments => x,y / x+y

[매개 변수]

위에서 매개변수를 설명했었는데, 함수가 실행되면 매개변수는 기본적으로 undefined으로 할당된다.

이후 들어오는 인수에 의해 값이 지정되는 것이다.

 

[인수]

인수는 파라미터로 들어가게 되는데, 지정한 매개변수의 개수와 상관없이 매개변수를 넣을 수 있다.

또한 매개변수를 넣을 땐 매개변수의 타입을 별도로 체크하지 않기 때문에,

함수 내부에서 해당 매개변수가 유효한지 조건식을 걸어 제대로된 함수를 만들 수 있다.

(이때문에 타입을 위한 typeScript을 사용한다.)

또한 매개변수의 개수를 넘긴 인수의 경우, 사라지는 것이 아닌 내부 아규먼츠에 저장되어

함수 내부에서 확인을 할 수 있다.

function add( x, y) {
console.log(arguments);  // Arguments(3) [2, 5, 10, callee:f, Symbol(Symbol.iterator):f]
return x+y;
};

add(2,5,10);

[반환]

함수가 return을 만나게 되면 함수가 종료되고 반환값을 반환하게 되는데

return 행 뒤에는 자동적으로 세미콜론이 붙어, 만약 반환식을 아랫줄에 적게되면 undefined이 나오게 된다.

 

5. 참조에 의한 전달과 외부 상태 변경

함수는 외부 값을 받아 함수를 실행시킬 수 있는데,

이 경우 전달되는 값이 원시값인지 참조값인지에 따라 상태가 변경될 수 있다.

 

6. 다양한 함수 형태

[1] 즉시 실행 함수

 

함수 정의와 동시에 즉시 호출되는 함수

단 한번 호출되며 다시 호출 할 수 없음

(function ( ) {
var a=3;
var b =5;
return a*b;} ( ) )
//즉시 실행함수는 익명으로 지정

(function foo ( ) {
var a=3;
var b =5;
return a*b;} ( ) );

foo(); // ReferenceError
//기명 함수로는 즉시 실행 함수 지정 불가

 

[2] 재귀 함수

 

자기 자신을 호출하는 함수

반복되는 처리를 위해 자주 사용함

function countdown(n) {
for( var i = n, i >= 0; i--) console.log(i);
}

countdown(10);
//일반 함수

function countdown(n) {
if (n < 0) return;
console.log(n)
countdown(n-1);
}

countdown(10);
//재귀 함수

 

[3] 중첩 함수

 

함수 내부에 정의된 함수

일반적으로 helper의 역할을 수행

 

function outer () {
var x = 1;

function inner() {
var y=2;
console.log(x+y);
}
inner();
//내부함수

}
outer()
//외부함수

 

[4] 콜백 함수

함수의 매개변수를 통해

다른 함수의 내부로 전달되는 함수

매개 변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수라고 일컫음

고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출

var logOdds = function(i) {
if(I % 2) console.log(i)
};

repeat(5, logOdds);
//repeat의 후 작업을 위한 콜백함수로 logOdds를 실행

setTimeout(function () {
console.log(‘1초 경과’)
}, 1000);
//1초 후에 실행될 콜백함수로 console.log(‘1초 경과’)를 실행

 

[5] 순수 함수와 비순수 함수

 

순수 함수

외부상태 의존 및 변경 X, 부수효과 X

동일한 인수가 전달되면 언제나 동일한 값을 반환

순수 함수는 일반적으로 최소 하나 이상의 인수를 전달받음

인수를 변경하지 않는 것이 기본

var cont = 0;

function increase (n) {
return ++n; }

count = increase(count);

count = increase(count);

 

비순수 함수 - 외부상대 의존 및 변경 O, 부수효과 O

var count = 0;

function increase(){
return ++count;}

increase();

increase();

 

이상 자바스크립트 딥다이브의 함수 발표 마무리.

 

---

발표 Q&A

Q 기명 함수를 쓰는 이유

A. 기명 함수는 어떠한 변수에 참조시킬때 사용이 유용할것으로 보입니다.

어제 제가 설명드린 단적인 예시는 var a = functino foo(x,y){return x+y}; 와 같이 해당 변수에 단순 선언을 하는 식으로 설명을 드렸습니다.

하지만 이후 클래스를 선언하거나 함수 내부의 함수로 사용할때 해당 함수를 매서드 혹은 내부 헬퍼함수로 사용하기 위해 익명함수가 아닌 기명함수를 사용한다고 생각해주시면 좋을 것 같습니다!

const Node = new Class{

constructor(val){
this.val = val}

const NodeList = new Class (

constructor (){}

add(x,y){

return x+y

}

위와 같이 클래스의 메서드를 부르기 위해서는 함수의 이름이 지정되어 있어야 하며, NodeList.add(a1,a2) 와 같은 형식으로 해당 함수를 불러서 사용할 수 있습니다.

 

Q 아규먼츠 왜 다 받아옴?

A. 이 부분은 자료가 따로 없어 제 생각으로 말씀을 드립니다. 함수가 실행될 때, 정확히 어떤 함수인지 파악을 하지 못해 다양한 input값을 넣어, 함수 내부에서 그 값의 유효성을 판단한 후, 함수가 정상적으로 작동되기 위해 아규먼츠를 우선적으로 다 받아오는것이라 생각합니다.

예를 들어 짝수일때만 해당값을 더하는 함수가 있는데, 인자값으로는 수없이 많은 값을 받는 경우, 내부에서 Arguments의 값을 확인 한 후 그에 해당하는 갯수만큼 더할 수 있도록 내부 로직이 구성되어 있는 함수를 만든다고 상상을 해보시면 좋을 것 같습니다!

다만 함수라는 명확해야하기 때문에, 이 방식으로 함수를 사용하는것은 좋지 않다는 생각이 듭니다.

 

Q 변수 선언으로 기명함수 저장시 기명함수 이름을 어케 받아올수 있능가?

우선 함수 표현식에 사용한 함수명은 외부 코드에서 접근이 불가능하기 때문에 기명함수에서 사용한 변수에는 외부에서 접근이 불가능합니다. 이는 간단하게 스코프의 개념으로 이해하셔도 괜찮을 것 같습니다.

var a = function foo(a,b){return a+b};

 

Q 변수 뿐 아니라 함수도 선언하게 되면 인디파인드가 할당 되나요? 된다면 함수의 매개변수에 undefined가 할당되는건가요? 아님 함수의 return값에 undefined가 할당 되는걸까요?

A. 함수는 별도의 리턴값이 없다면 undefined를 반환하도록 되어있습니다.

매개변수는 지정을 해둔 변수가 있다면 어떤값이 인자로 전달되기 전에 변수처럼 undefined를 할당하게 됩니다.

function add(x, y){};가 있다면 x, y 는 함수내부 최상위에서 호이스팅으로 변수가 undefined으로 초기화 된다고 보시면 될것 같습니다.

함수가 선언되게 되면 일단 해당 변수에 undefined가 할당되는것은 같지만, 함수가 선언식이라면 곧바로 해당 주소값에 함수가 지정되며, 표현식이라면 앞서 지정한 변수에 undefined이 할당 된 후 해당 줄에 가서나야 함수를 취하게 되는 차이가 있습니다.

 

Q var add = function foo() 에서 foo는 함수 선언이 안 되는걸까요?(추후 형민님 ppt를 다시 보고 질문 정리해서 수정하겠습니다.)

A 위의 3번째 질문과 동일한 답변

 

---

같이 보기 좋은 링크

 

• Chapter 4,5,6(변수, 표현식과 문, 데이터 타입)

 

JavaScript | 데이터타입(DataType)

• Chapter 7,8(연산자, 제어문)

숨참고 자바스크립트 Deep Dive

• Chapter 9,10,11(타입 변환과 단축 평가, 객체 리터럴, 원시 값과 객체의 비교)

 

Javascript : 타입 변환과 단축 평가 : 객체 리터럴 : 원시 값과 객체의 비교

• Chapter 13,14,15(스코프, 전역 변수의 문제점, let, const 키워드와 블록 레벨 스코프)

 

Javascript | 스코프(Scope)

[모던자바스크립트 Deep Dive] 14장, 15장 정리