1. 들어가며
- 서비스를 개발하다보면 동일하거나 비슷한 동작들이 생기기 마련이다.
이럴땐 하나의 동작 만들어 여러곳에서 재활용하는 것이 효율적이다.
중복되는 코드도 줄어들고 하나로 관리하니 유지 보수도 편해진다.
e.g) figma에서 component처럼
함수는 이것을 가능하게 해준다.
- 함수는 어떤 기능을 수행만하는 함수와 어떤 값을 리턴하는 함수가 있다
2. 함수 구조

- 매개변수는 없어도 되고 2개 이상인 경우, 쉼표(,)를 이용해서 작성
- 함수명( ), 함수명(name, age, location)
- 함수 표현 방식에 따른 구조
3. 함수 호출
- 함수명() 또는 함수명(매개변수) 형태로 호출
- 매개변수가 필요한 경우 괄호 안에 넣어준다.
- sayHello('Mike') // console.log(`Hello, ${name}`) 실행 // Hello, Mike
📌예제 1 : 에러메시지를 발송하는 함수를 만들어라.

- 서비스의 모든 에러에 이 함수를 사용할 수 있다(에러 메시지를 하나로 통일한다는 가정)
- 에러 메시지의 텍스트가 바뀌면 이 함수안에 얼럿 코드에서 텍스트만 바꿔주면 된다.
📌예제 2 : 매개변수가 있는 함수를 만들어라.


📌예제 3 : 매개변수가 필요한 함수인데 매개변수가 없는 경우
1) if 문 활용
- message 변수 키워드가 const -> let 으로 변경, 왜? : 메시지가 변경될 수 있어서 (인수 변경 안되는 변수는 const)
- 일단 message 는 `안녕하세요`를 반환
- 근데 name 매개변수에 인수가 들어온 경우, `안녕하세요 ${name}님`를 반환
2) OR 문 활용 ||
-지역변수(newName)를 하나 더 설정해서 name 인수가 들어오면 name 인수로, name 인수가 없으면 '이름 없음'으로
※ 궁금한 것
- 아래 코드에서 함수 sayHello('Mike')는 왜 name 인수를 읽지 못할까? (gpt는 괜찮다던데 막상 해보면 안나옴)
3) default value 매개변수 기본값 설정
- name의 기본값을 '이름 없음'으로 설정하여 name 인수 안들어 왔을 때 디폴트값으로 반환
4) rest 파라미터 // function do(...arr){}
- 결과를 배열 형태로 반환함
- 반복문에 주로 사용
※ 텍스트 반환에 연산자 활용 팁 (+= 연산자 활용)

- msg에 name 을 추가(+)하여 다시 msg로 반환함
- 근데 이렇게 하면 띄어쓰기 안됨 '안녕하세요뉴진스님' 이렇게 붙여서 나옴
-아래처럼 표현 가능
4. 지역변수(local variable), 전역변수(global variable), 매개변수(parameter)
- 여기 변수 msg는 sayHello 함수 밖에서는 사용할 수 없다. (이걸 '지역변수'라고 함)
- 변수가 함수 내부에서 선언되었기 때문,
- 만약, 함수 밖에서도 사용하고 싶다면, 변수를 함수 밖에서 선언해줘야 함.
- 이렇게 함수 밖에서 선언된 변수 msg는 다른 곳 어디서나 사용 가능 (이걸 '전역변수'라고 함)
※ 각 단계의 로그를 찍어보자
- console.log
Q. 근데 함수 내부에서의 (두번째 로그)msg 는 왜 mike가 붙지?? // 호이스팅 hoisting
- 자바스크립트는 실행전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해 둠. (호이스팅 hoisting)
- gpt의 설명
자바스크립트에서 변수 선언은 호이스팅이라는 메커니즘을 따릅니다.
이는 변수 선언이 스코프의 최상단으로 끌어올려지는 것을 의미합니다.
따라서 함수 내부에서 선언된 변수도 함수의 맨 처음에 선언되는 것과 같은 효과를 가지며,
함수가 실행되기 전에 이미 변수가 선언되었다고 간주됩니다.
따라서 위 코드에서 sayHello 함수가 호출되고 msg 변수가 변경된 후에도, 네 번째 console.log(msg)가 실행될 때 전역 스코프에서 선언된 msg 변수는 sayHello 함수에서 변경된 값을 가지고 있는 것입니다.
※ 전역변수와 지역변수의 유효범위 (scope 스코프)
- console.log
- 전역변수와 지역변수는 서로 let으로 동일한 변수명으로 선언할 수 있고 서로 간섭을 받지 않음.
- 즉, 동일한 이름의 전역변수, 지역변수가 있다면 함수 내부에서는 지역변수가 우선이며 전역변수는 접근 못함.
※ 매개변수의 유효범위 (scope 스코프)
- console.log
- sayHello() 매개변수 없이 했을때, 전역변수에 name이 있으니 이걸 가져오지 않을까? -> No.
- 함수 내에서 쓰이는 매개변수는 함수 밖에서는 읽고 쓸 수 없다. (매개변수는 인수를 받아 복사된 후, 함수 내부에서 지역변수가 된다.)
- 전역 변수로 선언한 name 과 함수 sayHello에서 쓰이는 매개변수 name은 아예 다른 것.
- 전체 서비스에서 공통으로 바라봐야하는 변수(const로 선언)를 제외하고는 지역변수를 쓰는 습관을 들이는 게 좋다.
- 전역변수가 많아지면 관리가 어려움
※ 헷갈리니 개념정리 한 번 하자.
매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수.
인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값.
대부분의 함수는 하나 이상의 매개변수를 가지며, 매개변수가 없는 함수도 존재.
기본적으로 함수의 인수는 값 전달(passing by value) 방식으로 매개변수로 전달.
인수를 함수에 전달하면, 새롭게 생성된 매개변수에 전달받은 값이 복사되어 저장.
이처럼 매개변수에 저장된 값은 전달받은 데이터의 복사본으로, 함수 안에서 변경되어도 함수 밖의 원본 데이터에는 영향을 주지 않음.
지역 변수(local variable)란 '블록' 내에서 선언된 변수. (함수 내에서 선언)
지역 변수는 변수가 선언된 블록 내에서만 유효하며, 블록이 종료되면 메모리에서 사라집니다.
이러한 지역 변수는 메모리상의 스택(stack) 영역에 저장되며, 초기화하지 않으면 의미 없는 값(쓰레기값)으로 초기화됩니다. 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수로 취급.
전역 변수(global variable)란 함수의 외부에서 선언된 변수.
전역 변수는 프로그램의 어디에서나 접근할 수 있으며, 프로그램이 종료되어야만 메모리에서 사라집니다.
이러한 전역 변수는 메모리상의 데이터(data) 영역에 저장되며, 직접 초기화하지 않아도 0으로 자동 초기화됩니다.
전역 변수와 같은 이름의 지역 변수가 함수 내부에서 선언되기 전까지는 함수에서도 전역 변수 var에 접근할 수 있습니다.
하지만 같은 이름의 지역 변수가 선언된 후에는 함수에서 전역 변수로 접근할 방법이 없어집니다.
왜냐하면, 블록 내에서 선언된 지역 변수는 같은 이름의 전역 변수를 덮어쓰기 때문입니다.
따라서 이처럼 전역 변수와 같은 이름으로 지역 변수를 선언하는 것은 좋지 않습니다.
(출처) kathak33 님의 글 인용
5. return
- 코드가 return; 을 만나면 즉시, 오른쪽에 있는 코드를 실행하고 종료됨. //코드를 종료시키는 목적으로도 사용(break 처럼)
- retrun 문이 없어도 반환하는 함수들 많음. (e.g. alert 등)
- add 함수는 두개의 매개변수를 갖고 result 지역변수에서 두개의 매개변수를 더한 결과를 로그로 return 함.
6. 함수 TIP
1)함수는 한번에 한 작업만 하도록 작성하는게 좋음. 하나의 함수가 여러 작업을 진행하면 함수를 여러개로 쪼개자.
2)읽기 쉽고 어떤 동작을 하는지 알기 쉽게 네이밍을 하자. (변수도 마찬가지)
showError // 에러를 보여준다.
getName // 이름을 얻어온다.
7. 함수 선언문, 함수 표현식
1)함수 선언문 : 함수에 직접 이름을 정하는 것.
2)함수 표현식: 변수를 만들고 그 안에 이름 없이 함수를 넣는 것.
3)뭐가 다른가? : 호출하는 타이밍, 위치
- 함수 선언문은 어디서든 호출 가능 (호이스팅)
- 자바스크립트는 위에서 아래로 순서대로 실행하는 인터프리터(Interpreted language)인데 함수 선언문으로 작성된 함수는 호이스팅에 의해 함수 코드 앞에 위치시켜도 실행이 됨.
- 그러나 함수 표현식은 코드에 도달하면 생성
- 자바스크립트가 한줄씩 읽으며 실행할때 해당 함수에 도달 했을 때 실행
4)그래서 뭘 써야 하는가?
- 크게 상관없는데 함수선언문이 더 자유롭다는 앙마님 의견
8. 화살표 함수 (arrow function)
- 함수 표현식에서 function이 없어지고 () => {} // 괄호와 중괄호 화살표 넣어 줌
📌예제 1
📌예제 2 (간결하게)
📌예제 3
📌여기서 잠깐!
함수에서 어떤건 ()=>{} 실행문을 중괄호에 담고 어떤건 ()=>() 소괄호에 담는다.
둘의 차이는 {}중괄호에 담는건 return 값이 있는 경우로 return을 작성해줘야 한다.
()소괄호에 담는건 별도의 return 값이 없는 경우로 return을 작성하지 않아도 된다.
'html,css,js' 카테고리의 다른 글
[자바스크립트 중급] 객체 메서드(object method), 계산된 프로퍼티(computed property) (0) | 2023.05.04 |
---|---|
[자바스크립트 중급] 생성자 함수 (0) | 2023.05.04 |
[자바스크립트 중급] 변수 키워드, 호이스팅, TDZ, 스코프, 변수의 생성단계 (0) | 2023.05.03 |
[자바스크립트 기초] 배열 Array, 배열함수, 배열메서드, for, for of 문 (0) | 2023.05.02 |
[자바스크립트 기초] 객체 (object) 관리 및 property, method, this (2) | 2023.05.02 |