4주차 스터디 모던 자바스크립트 (2) [코드잇 부스트 백엔드 스터디 ]

 

 

 

<모던 자바스크립트>

 

3. 함수 다루기

함수를 만드는 방법

 

함수 선언을 변수에 할당, 함수 선언을 값 처럼 사용하는 방식 → 함수 표현식

// 함수를 만드는 방법
const myBtn = document. querySelector('#myBtn');

myBtn.addEventListener('click', function () {
console. log('button is.clicked!');
});

 

 

함수 선언과 함수 표현식 차이

💡일반적으로 변수에 할당해서 함수를 만드는 함수 표현식은 변수의 특성상 선언 이전에 접근 할 수 없음

 

• 함수 선언은 변수의 var 키워드처럼 함수 스코프를 갖는다

→ 함수 안에 선언된 함수는 함수 밖에서 호출할 수 없지만 , 다른 코드 블록에서 선언하면 전역적으로 호출 가능

 

• 함수 표현식의 경우 할당된 변수에 따라 스코프가 달라진다

 

 

☑️퀴즈

 

1.

const x = 5;

if (x < 5) {
  const printHi = function () {
    console.log('Hi!');
  };
}

printHi();

 

if 문의 소괄호 안이 false 야, 당연히 if 문 안쪽이 동작하지 않기 떄문에 printHi 함수는 선언되지 않는다. 따라서 이 코드는 에러가 발생한다.

 

함수 표현식은 무조건 블록 스코프를 가지진 않는다. 어떤 변수에 할당하느냐에 따라 변수의 스코프가 다르게 결정된다

 

2.

{
  let sayHi = function () {
    console.log('Hi!');
  };
}

sayHi();

 

2번은 코드 블록 안에서 함수 표현식으로 함수를 만들었다. 그런데 let 키워드 변수를 활용했기 때문에 블록 스코프를 가지게 된다. 블록 스코프를 가진 sayHi 함수는 코드 블록 밖에서 사용할 수 없으므로 이 코드는 에러가 발생

 

함수 선언은 함수 스코프! 함수 표현식은 선언된 변수에 따라 달라짐!

 

 

이름이 있는 함수 표현식

 

Named Function Expression (기명 함수 표현식)

이름이 있는 함수 표현식을 기명함수 표현식이라고 한다

 

→함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 갖는다

 

const sayHi = function () {
  console.log('Hi');
};

console.log(sayHi.name); // sayHi

☑️이름이 없는 함수를 변수에 할당할 때는 변수의 name 프로퍼티는 변수 이름 그 자체를 문자열로 가지게 된다

 

 

const sayHi = function printHiInConsole() {
  console.log('Hi');
};

console.log(sayHi.name); // printHiInConsole

☑️함수에 이름을 붙여주게 되면, name 속성은 함수 이름을 문자열로 갖게 된다

 

💡 함수 이름은 함수 내부에서 함수 자체를 가리킬 때 사용할 수 있고 함수를 외부에서 함수를 호출할 때 사용할 수는 없다.

 

 

const sayHi = function printHiInConsole() {
  console.log('Hi');
};

printHiInConsole(); // ReferenceError

 

 

 

값으로서 함수

 

 

자바스크립트는 함수를 특별한 종류의 값으로 취급한다

 

값으로서 사용되는 함수

• 함수 표현식

• 객체 안의 메소드로 활용

• 배열에 담아서 함수를 호출하는 것도 가능

 

 

// 값으로서 함수
const my0bject = {
brand: 'Codeit',
bornYear: 2017,
isVeryNice: true,
sayHi: function(name) {
console. log('Hi! ${name}');
 }
};

my0bject.sayHi('JavaScript');


// 값으로서 함수
const myArray = [
'codeit',
2017,
true,
function(name) {
console. log('Hi! ${name} );
},
];

myArray [3] ('Codeit');

 

 

함수를 호출할 때 미리 선언된 함수를 전달하면서 조건에 따라 그 함수가 나중에 호출되거나 혹은 호출되지 않는 동작으로 구현 가능 !

 

💡다른 함수의 파라미터에 전달된 함수를 콜백 함수라고 부른다 (중요)

 

함수를 리턴하는 함를 고차 함수라고 부른다 → 주로 이중괄호를 사용해서 바로 호출할 수도 있다

 

 

 

Parameter

 

파라미터

• 함수 선언 부분에서 소괄호 안에 작성된 것

💡함수 호출 부분에서 파라미터로 전달하는 값을 가리켜서 아규먼트 (Arguments) 라고 한다 (파라미터랑 구분)

 

Parameter는 함수를 정의할 때 사용되는 변수를 의미한다. Argument는 실제로 함수가 호출될 때, 넘기는 변수값을 의미한다.

 

 

파라미터의 기본값

 

•  파라미터가 있는 함수를 호출할 때 아규먼트가 없이 호출하면 undefined가 호출됨

→ 기본값을 정의해두면 기본값으로 출력됨

 

💡함수를 호출할 때 undefined 값을 전달해서 기본값을 출력할 수도 있다

함수를 호출할 때 아규먼트로 null 값을 사용하게 되면 해당 파라미터는 null 값을 그대로 전달받게된다 (undefined와 다름)

 

 

Arguments

 

 

아규먼트 개수에 따라 유연하게 동작하는 함수를 만들려면?

→ arguments 객체를 활용한다

 

arguments 객체

• 배열과 비슷한 모양을 하고 있긴 하지만 모양만 비슷하고 배열의 메소드는 사용할 수 없는 유사 배열

• 인덱싱, for…of 문 사용가능

 

 

// arguments
function printArguments(a, b, c) {
for (const arg of arguments) {
console. log(arg);
 }// arguments 객체 
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');

 

 

 

실습 줄임말 대잔치

function firstWords() {
  let word = '';
  for (const arg of arguments) {
       word+=arg[0]
  // 여기에 코드를 작성하세요
  }
  console.log(word);
}

firstWords('나만', '없어', '고양이');
firstWords('아니', '바나나말고', '라면먹어');
firstWords('만두', '반으로', '잘라먹네', '부지런하다');
firstWords('결국', '자바스크립트가', '해피한', '지름길');
firstWords('빨간색', '주황색', '노란색', '초록색', '파란색', '남색', '보라색');

 

 

 

RestParameter

 

arguments 단점

• 배열의 메소드는 사용할 수 없음

• 항상 함수를 호출할 때 전달한 이 아규먼트 전체를 다루기 때문에 마지막 두 개만 혹은 세 개만 묶으려면 인덱싱을 통해서 한번 더 세분화 해야 함

 

 

레스트 파라미터(RestParameter)

• arguments의 단점을 해소 → 배열의 메소드 자유롭게 사용 (splice 메소드 사용가능)

• 앞에 점 3개를 붙인다 …

•  rest parameter는 함수에 전달된 전달인자들을 배열로 전달받는다.

•  매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다.따라서 rest parameter는 반드시 마지막 매개변수여야 한다.

// Rest Parameter
function printArguments( ... args) {
for (const arg of args) {
console.log(arg);
  }

};


printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');



function func(arg1, arg2, ...args){	
return [arg1, arg2, args];}
func(1);   // [1, undefined, []]
func(1, 2, 3);// [1, 2, 3]
func(1, 2, 3, 4, 5); // [1, 2, [3, 4, 5]]

 

 

 

실습 

 

function ignoreFirst(...args) {
    for (const arg of args.slice(1)) {
        console.log(arg);
    }
}

ignoreFirst('1세대', '2세대', '3세대');
ignoreFirst('곰팡이', '강아지', '고양이');
ignoreFirst(20, 9, 18, 19, 30, 34, 40);

→ sclie를 활용하여 문제를 풀었다

해설에선 shift 메소드를 활용하거나 파라미터의 성질을 활용해서 푸는 방법을 배움

 

 

 

Arrow Function

 

Arrow Function

• 기존의 함수 선언 방식을 보다 간결하게 만들어주는 문법

• 이름이 없는 익명 함수 →이름을 가진 변수에 할당하거나 , 다른 함수의 아규먼트를 선언할 때 주로 활용

=>를 활용한다

 

 

// Arrow Function
const getTwice = (number) => {
return number * 2;
};


console.log(getTwice(5));

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', () => {
console. log('button is clicked!');

};

 

 

• 내부의 동작부분이 return 문 하나로만 이루어져있다면 생략가능

 

const getTwice = number => number *2;

💡다만 return 값이 객체인 경우는 생략 불가능 → 함수의 동작 부분을 구분하는 중괄호로 해석해 버리기 때문에 주의

 

소괄호로 묶어주면 생략할 수 있다

 

const getCodeit = () => ({ name: 'Codeit', });

 

 

💡arrow function에는 arguments 객체가 없다는 점 주의!

 

 

☑️퀴즈

 

대준: 화살표 함수도 필요에 따라서 이름을 가질 수 있어. (틀림)

 

모든 화살표 함수는 익명 함수라서, 변수에 할당하거나 다른 함수를 호출할 때 아규먼트로 사용된다는 점

rest parameter를 사용한다거나 파라미터의 기본값을 지정하는 방식들은 기존의 함수와 똑같기 때문에 기존에 사용하던 함수 선언 방식들은 대부분 화살표 함수로 변환할 수 있다

 

 

this

 

 

자바스크립트에서 this란?

💡함수를 호출한 객체를 가리키는 키워드

→ 코드를 작성할 대 값이 미리 결정되는 게 아니라 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 됨!

 

arrow function에서 this 값은 호출한 대상에 따라 상대적으로 변하지 않음 

→ arrow function이 선언되기 직전에 유효한 this값과 똑같은 값을 갖고 동작

 

 

☑️ 퀴즈

 

 

동환: this를 활용한 메소드를 객체 내부에서 선언하면 항상 그 객체를 가리키기 때문에, 만약 다른 객체의 메소드로도 활용할 거라면 객체 외부에서 전역 스코프를 가지는 함수로 선언해야 해. (틀림)

 

this를 활용한 메소드를 다른 여러 객체에 활용한다고 해서 반드시 전역 스코프를 가지는 함수를 만들 필요는 없다

일반함수로 this를 활용한 메소드를 객체 내부에서 선언하고 다른객체에서 그 메소드를 참조하더라도 this는 항상 그 메소드를 호출한 객체를 가리키게 됨

 

 

---

 

 

✍️중요 포인트

 

arguments 단점

• 배열의 메소드는 사용할 수 없다

• 항상 함수를 호출할 때 전달한 이 아규먼트 전체를 다루기 때문에 마지막 두 개만 혹은 세 개만 묶으려면 인덱싱을 통해서 한번 더 세분화 해야 한다

 

 

☑️레스트 파라미터(RestParameter)

• arguments의 단점을 해소 → 배열의 메소드 자유롭게 사용

• 앞에 … 점 3개를 붙인다

• rest parameter는 함수에 전달된 전달 인자들을 배열로 전달 받는다.

• 매개변수에 할당된 전달 인자를 제외한 나머지 전달 인자들이 모두 배열에 담겨 할당된다. 따라서 rest parameter는 반드시 마지막 매개변수여야 한다.

 

 

☑️spread

• 여러 개의 값을 하나로 묶은 배열을 다시 각각의 개별 값으로 펼치는 문법

• 앞에 … 점 3개를 붙여준다

• 배열을 좀 더 편리하게 복사할 수 있다

• Spread 구문은 배열이나 객체를 복사하거나 혹은 복사해서 새로운 요소들을 추가할 때 유용하게 활용 될 수 있다

 

 

💡참고로 spread에서 배열은 객체로 펼칠 수 있지만 객체는 배열로 펼칠 수 없다는 부분

💡Rest Parameter는 여러 개의 아규먼트를 하나의 파라미터로 묶는 방식, spread는 하나로 묶은 배열을 다시 각각의 개별 값으로 펼치는 것