4. 함수 (2) return이 있는 함수
return의 정의
return은 함수의 실행을 종료하고, return문 뒤에 주어진 값을 반환합니다.
함수를 호출한 결과값은 console.log()로 확인할 수 있습니다.
function multiplyTen(myNumber) {
return myNumber * 10;
}
위의 multiplyTen 함수는 myNumber 매개변수를 통해 받은 인자에 10을 곱하여 반환하는 함수입니다.
- 우리가 함수명을 multiplyTen이라고 지어줬을 뿐이지, y=10*x라고 return 식을 만들어줘야 하는 것과 같음
1. 함수의 결과값이 찍히기 위해서는
[들어가기 전에]
→ 이름 선언만 해놓고 내 이름이 화면에 뜨기를 기다렸기에 아무것도 안 나옴
→ 화면에 뜨려면, console.log에 name을 찍어줘야 함
함수도 마찬가지,
→ 세상에 내가 이런 함수를 태어나게 만들었다고 ‘선언' (‘생성' 만들어놓기)만 하는 것
function addOneAndThree( ) {
console,log(1+3)} 라는 함수를 만들었어!
→ 함수를 실행시켜야만 동작한다!
addOneAndThree ( ) : 실행시키기!
2. 함수를 쓰는 이유
값이 6번 나오게 하고 싶으면 → 함수를 6번 실행시키면 됨
andOneAndThree( ) 함수를 6번 실행, 동작시키면 → 6번 결과값 4가 나옴
굳이 6번을 위해 console.log 코드가 아닌, 함수를 더 만드는 이유?
- 나중에 코드가 더 길어지기 때문에 (재사용)
- 코드를 수정하고 싶다면 여러 번 고쳐줘야 하기에 (코드 한 줄만 수정하는게 아니라, 적은 코드 여러 줄 다 수정해야 하니,,, N번 수정해야 하니,, human error가 나고, 유지보수가 어려움)
→ 코드 vs 함수 비교 : 수정과 재사용
1) 코드를 6번 만들 때
→ 여기에서 내가 “수정" 한다고 하면,
아래와 같이, console.log(1+3) 에서
console.log(1+5) 6줄 수정
2) 함수로 만들 때
→ console.log(1+3) 에서 console.log(1+5)로
“수정" 한다고 하면,
아래와 같이
- addOneAndThree( ) 함수 그대로: (아랫줄은) 건들지 않고
- console.log(1+5) 한줄만 수정
3. 함수 return 있느냐 없느냐
return이 있는 함수 기본 형태
function ignore() { 선언
return true;
}
ignore(); 호출
// true를 반환하는 함수
모든 함수는 결과를 반환(return)할 수 있습니다. 함수가 반환한 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다.
return반환값을 확인하는 용도가 console
함수를 호출해서, 반환값을 console.log() 로 확인
함수의 반환값을 아래처럼 변수에 저장해서 활용할 수도 있습니다.
const result1 = noParameter(); // name이라는 변수에 getName 함수 호출한 결과값을 할당하는 행동을 의미함
console.log(result1);
return; → 뒤에 ; 붙일 것!
4. [return 정리]
함수 실행 -> 결과 만든다 (결과값) -> 결과값을 반환한다 (반환값) return
return = Output을 준다, 결과를 만든다, 반환한다
(return 다음에 오는 값이 문자열이 아니면 “ “ || ‘ ‘ 넣지 않음
return; → 뒤에 ; 붙일 것! )
- ‘calculation_finished’처럼 문자열를 반환값으로 주기도 하고
- (1+ 3)이라는 결과값을 반환값으로 주기도 한다.
- console값과 return값다름. 각각
addOneAndThree()로 만든 function addOneAndThree() 함수 실행하면,
- console값으로 1+5=6 찍히고
- return값으로 ‘calculation_finished’ 이라는 문자열을 반환값으로 주는 걸 우리가 눈으로 볼 순 없음
addOneAndFive()로 실행하면,
- return값으로 1+3 은 실행되지만, 4라는 (반환은 됨) 반환된 값이 우리 눈으로 볼 순 없음
4-1. 그러면, return된 값 (반환값)을 보고 싶으면? (방법 2가지)
방법1. 변수에 할당
방법2. return된 값 자체를(반환값을) console에 출력
방법2. return을 한다
= ‘return된 값’이 ‘값’이 된다.
ex1. addOneAndThree( ) // ‘값'이 됨, 함수를 실행시킨 값 자체
console.log(addOneAndThree()) // ‘함수를 실행시킨 값 자체’를 직접 출력 가능 \
풀이1
function addOneAndThree(){
return(1+3);
}
console.log(addOneAndThree())
→ function addOneAndThree() 함수를 실행시킨 결과가,
1+3을 return하기에, 4가 실행되고
console.log에 출력시켰기에, 반환값 4가 우리 눈에 보이는 것.
(선언만 해도 호출되는거 아니고, 호출만 하고 선언 안해도 되는거 아님)
함수 ‘선언/작성을 해두면/만들면’,
‘호출’을 해야 함수 실행됨
function addOneAndFive( ){ → 선언
console.log(1+5)
return ‘calculation_finished’
}
addOneAndThree() ->호출
console.log(addOneAndFive()) → console.log가 꼭 있어야 하는 건 아님
console.log에 안 찍으면 아무값도 실행 안 됨.
결과값 첫번째 6은 console.log(1+5)의 결과값
console.log(addOneAndFive()) 의 return의 결과값인 ‘calculation finsished’라는 문자열
addOneAndFive() 실행돼서 값 6이 나오고
<return에 아무 값 할당 안 되면, 아무것도 없음>
모든 함수가 return을 포함해야 하는 건 아닙니다.
함수 내부에 return 키워드를 생략할 수도 있습니다.
하지만 이 경우에도 함수는 무언가를 반환하고 있습니다.
함수가 반환을 생략하면 undefined 라는 값을 반환합니다.
function ex () {
1+3
return
}
→ 값 없음 return이 없기에
아무값도 나오지 않음
- hello가 나오지 않는 이유: console.log가 없어서
- hi가 안 나오는 이유 ; return까지만 반환, return이후 종료 / return밑에는 뭘 적어도 아무것도 나오지 않음
7 → console 때문에 나오지만
undefined → return에 아무것도 없기에
아무것도 반환하지 않는 return은 잘 없음
return= example1+example2라고 해야
function 의 내용을 변수로 바꿔서 계속 쓸 수 있다고 하셨는데
계속 바꾸기에, 실무에서는 function을 미리 위에(다른 파일에) 만들어놓고 꺼내 쓰기도 한다
→ 함수 만들어놓고
여기저기에서 재사용 많이 하기에
→ 선언은 a 파일에, 호출은 b 파일에서 하기도 (위에 함수, 아래에 계속 함수 변수 바꾸며 호출하기도)
위 아래 보단, 파일 분리하는 경우가 더 많음.
( )보이는 건 다 함수 호출하는 것.
5. Parameter
외부로부터 들어오는 값을 담아서,
함수 내부에서 사용하도록 하는 변수
함수 외부로부터 들어온 값이 담길 '자리' 혹은 '변수의 이름'
6. parameter와 argument. (둘다 input에 해당)
- 함수를 선언할/만들 때 만드는 건 : 매개변수 parameter
- 함수를 실행시키고 호출할 때 바껴서 각자 다르게 들어가는 값 : 인자 argument
6-1. 함수를 하나의 값으로만 사용하진 않는다 (재사용 가능, 새로운함수 또 만들 필요 없음)
- 매번 프로그래밍 계속 하는게 아니라
- 서로 다른 이름으로 다른 숫자를 받을 수 있게. 1+3을 직접 return 하는게 아니라, number1, number2로 addNumber의 숫자만 바꿔주면 됨
addNumbers(5,7)를 하고 싶을 때,
- 함수 하나 더 만들 필요가 없음. function addNumbers2(){} 함수가 필요가 없음.
- 같은 기능을 하는 함수에 숫자만 바꿔서 해줬기에
6-2-1. 근데, 인자의 순서가 중요함 (연산자 나누기에서 달라지기에)
3/1 =3
7/5=1.4
6-2-2. 숫자만되느냐, 문자도 가능
→ return을 greeting2에만 했기에 yojin만 나옴
6-2-3. 많이 하는 실수: 인자 갯수 맞추기
→ (name, age) 라는 2개의 인자 parameter를 받기로 했는데,
함수 호출할 때 greeting(‘yojin’) 에 인자가 하나만 넣어서
(name은 적용, age에 undefined가 나옴)
console.log(age) 안 들어와서 뭔지 몰라서 undefined 나옴
→ 이렇게 함수 호출 시 greeting(‘soheon’, 100)
인자를 하나 더 줘야
6-2-4. 또 많이 하는 실수!!! → 인자의 순서 바꾸는 실수 많이 함!!!
이거는 텍스트니까 순서 바꿔서 넣은 거 금방 알겠지만,
나중에 복잡한 수식 만들거나 component 만들면 복잡해짐
6-2-5. parameter 인자를 활용하는 방법
cf. 에러 보는 법 -> console에서 // expected값은 00인데 received은 00야
7. 추가 심화(어려운 거)
첫번째 값은 2가 나오지만
두번째는 에러 아니고, 함수 그대로 나옴
: addNumbers를 출력하라고 했으니까, 통째로 출력한거/ 아무 값도 return되지 않고, return까지 포함된 그 자체를 출력한 것 (함수를 실행시킨 것도 아니고 함수 그대로 적은 것)
→ 그래서, return된 값을 출력하고 싶으면, addNumbers만 하면 절대 안 되고, addNumber함수를 실행시켜줘야 (소괄호 닫아야) : addNumber()
8. Replit 함수 문제풀이
4-2 basic
1번. 7을 반환하는 함수 getSeven을 만들어주세요. 그리고 해당 함수를 호출해서 실행해주세요.
→ getSeven(){
return 7
}
2번. "I LOVE CODING!"의 길이를 계산해서 길이 값을 반환하는 함수 getStringLength를 만들어주세요. 그리고 해당 함수를 호출해서 실행해주세요.
→ function getStringLength() {
const sentence ="I LOVE CODING!"
return sentence.length
}
4번 변수 const, let, var 다 됨
- getSeven 함수의 결과는 변수 seven에 할당
- getStringLegnth 함수의 결과는 변수 length에 할당
- getMyName 함수의 결과는 변수 name에 할당
const seven=getSeven()
const length =getStringLegnth()
const name=getMyName() 초록색 맞는지 보기
4-3
→ 코딩 꿀팁: 순서 모르겠을 떄, 동사 하나하나 끊어서 (순서 쪼개기가 중요함)
3번, 성과 이름을 받아서/ function getFullName(firstName, lastName)
합친다/ firstName +lastName
출력/console.log(firstName+lastName)
반환 / return(firstName+lastName)
더 좋은 방법 —> 변수를 하나로
9. replit basic 문제풀이
동사 쪼개서 하기
오답노트: 인자를 합쳐라 ->
함수에서는 a +b가 아니라 (a,b)
변수에서는 a+b
오답노트: fuction getMyName(){ 함수 만들기
function getMyName(youjinshin){ =-> 여기에서 넣어주는거 아님
변수 seven에 함수getSeve 할당 → const seven= getSeven()
오답노트
여러 개의 인자를 받는 함수 : 표기법!
function addNums(num1, num2) { → 인자에는 쉼표
return num1 + num2; → return에는 +
}
오답노트
1번
→ 호출해서 실행해주세요: getSeven() 만 하면 됨. Console 부를 필요 없음
return반환값을 확인하는 용도가 console
- return: 함수에 output 반환/ 반환 결과물 지칭 역할 (return 뒤에 ; 붙여야! 붙이는 습관!)
- console.log: 단순히 화면에 출력해주는 기능
→ 함수 시작하는 { } 사이에 return 반환하고, 호출은 { } 함수 끝나고 하는 것
{ } 안에 getSeven()이 들어가면 안 됨.
2번 → 길이 계산 -> 변수 가져와서 const sentence=” “
길이 값 반환 return sentence.length
— 여기까지 precourse 강의
함수 (1) input도 없고 output도 없이 오롯이 ‘기능만 수행하는 함수’
—> console / 숫자만 찍는
Ex. function sayHello ( ) { }
let friend=‘Code Kim’
console.log (‘Hello!’ + friend)}
—> 아무 동작 안 일어남 (함수 선언만 하고 호출을 안 했기에)
function sayHello ( ) { —-함수 이름 만들었고,
let friend=‘Code Kim’ ——-friend라는 변수에 codekim이라는 문자열 할당
console.log (‘Hello!’ + friend)}
} sayHello( ) ——- 호출
함수 (2) 기능 수행 가능+ Output 반환(return)
- Input
- 기능 수행
- Output return 세 개 중에 2개 포함되는
function sayHello2 ( ) {
let friend=‘Code Kim’
return ‘Return’ + friend } return: 명령어, / ‘Return’ 문자열
sayHello2() {}
—> return: 출력하라는 명령어가 아님
console에 출력하는건, console.log가 유일함
return은 결과물로 반환한다는거지, 그 결과물이 바로 사람 눈에 보이진 않음, 만들어져 있긴 함
그렇다면 어떻게 반환하지?
Return 한 대상은 그 자체로 특정한 데이터가 됨
Return 하면, output이 반환이 되지만, 직접 눈으로 보려면/ 확인하고 싶다면, console.log 내부에 넣으면 됨.
console.log (sayHello2()) —> sayHello2라는 함수를 실행해서 나오는 output 을 console.log로 찍겠다.
[ output return 정리]
함수가 실행이 되기에 계속 output이 만들어지긴 함 —> 사람 눈으론 볼 수 없는 —> 확인하고 싶으면, console.log를 sayhello2 실행한 결과 넣어서 찍어주기.
[그러면 보이지도 않는 return을 사용하는 이유: 다른 기능이 있음]
Return 한 값을 다른 변수에 담을 수 /할당할 수 있음 (console.log는 불가능한)
sayHello2 ( ) 함수를 실행한 결과를 let 변수에 담아보기
let myFriend =sayHello2 ( )
—> 아무것도 안 나오는 이유: 실행은 되고 있음 호출했기에, 근데 console 에 출력을 안 했기에 (console.log 이용해서 출력을 안해서 안 보이는)
let myFriend =sayHello2 ( )
console.log(myFriend)
—> “Return Code Kim”
‘Return’+ ‘Code Kim’ 문자열이 함수 실행시켜서 “Return Code Kim”이라는 output으로 반환이 됨, (myfriend라는 변수에 sayHello2의 결과물이 담김)
마치 let myfriend= ‘Return Code Kim’ 처럼.
<숫자를 더하는 return 함수>
function addNumbers(){
return 100+200
}
—> 아무일 없는 이유: addNumbers라는함수 선언만 하고 호출 안했기에
function addNumbers(){
return 100+200
}
addNumbers() —-> addNumbers 함수 호출
—> 호출해도 안 일어나는 이유 그 안에 console.log찍는 행위 하지 않았기에 보이지 않는 것 (실행은 되고 잇음)
function addNumbers(){
return 100+200
}
console.log(addNumbers())
—> 실행시킬때마다 300 찍힘
{정리] 4가지 경우의 수
- addNumbers() : 그냥 호출할때는 console 안 찍히고
- console.log(addNumbers()) : console.log에 함수의 결과를 담으면 그게 다시 찍히고. —> output 찍힘
- let myNumber300=addNumbers(): 특정한 변수에, 함수의 결과를 담을 수도 있고
- console.log(myNumber300) : 그 변수를 다시 console에 찍을 수도 있고 —> output 찍힘
function sayHello3(){
let sentence=‘Hello!!’
let name=‘Code Kim’
return sentence+name
}
sayHello3()
—> sayHello2()실행 되고 output return 되지만, 그 어느 곳도 console.log호출이 없기에 나오지 않음. 보이는 게 없음
보고 싶다면
function sayHello3(){
let sentence=‘Hello!!’
let name=‘Code Kim’
return sentence+name
}
sayHello3()
console.log(sayHello3()) —> 이러면 출력됨
return vs. console.log의 차이 꼭 알아야 함
- return이 더 중요 (output 만들고 싶다면): 함수에 output 반환해주는 역할, 반환 결과물 지칭 역할
- console.log: 단순히 화면에 출력해주는 기능 (결과물 만들거나 output을 내지는 못함. 한번 기능하면서 출력해누는 역할. 이걸 보고 output이라고 하진 않음)
- Return은 output이 분명이 있기 때문에, 어떤 변수를 Output에 할당 (담기) 가능
let myFriend=sayHello2() -> myFriend라는 변수에 sayHello2() 값 할당
- console.log 는 변수에 할당 불가능
ex. let number=console.log(10000)
console.log(number). —> (console.log는 output만들어내는 게 아니기에, 변수에 할당 안 돼서 Undefined 나옴)
—> 10000
undefined
Ex. function TenThousand() {
return 10000
}
let number2=TenThousand()
console.log(‘number2:’, number2)
—> TenThousand라는 함수는 10000을 output으로 return.
—> 함수 TenThousand를 number2라는 변수에 할당할 수 있다
—> console.log로는 할 수 없다.
Return 있는냐 없느냐 = output 있느냐 없느냐
return있고 없고의 차이점에 익숙해지기!
'Wecode- Pre-course (부트캠프)' 카테고리의 다른 글
| 프리코스 (7) - Javascript : 4.함수 (1) 정의, 호출 (0) | 2023.09.26 |
|---|---|
| 프리코스 (6) - Javascript : 2.데이터 타입, 3.String 문자열 (0) | 2023.09.26 |
| 프리코스 (5) 8/18 - JS pre 강의 : 1. Console (0) | 2023.09.26 |
| 프리코스(4) - 8/17 CSS Position,컴퓨팅사고, JS (0) | 2023.09.26 |
| 프리코스(3) - 8/16 CSS (0) | 2023.09.26 |