JS - 04_Function

송철진·2022년 9월 12일
0

01. 함수의 정의와 호출

함수 기본 구성요소
1. input 받기
2. 기능 수행
3. output 반환

현직에서 output을 반환한다, output을 return한다 라는 표현을 씀


  1. input 받기
  2. 기능 수행
	function sayHello(input) {
   		let name = input;
        return "Hi "+ name;
    }
    sayHello("Jane");
    console.log(sayHello("Jane"));	// "Hi Jane"

  1. 기능 수행
  2. output 반환
	function sayHello() {
   		let name = "Jane";
        return "Hi "+ name;
    }
    sayHello();	
    console.log(sayHello());	// "Hi Jane"

  1. 기능 수행
	function sayHello() {
    	console.log("Hello, World!");
    }
    sayHello();	// "Hello, World!"

탐구하기1

  • console.log(): 단순히 화면에 출력
    return: 함수의 output, 반환하는 결과물
  • return은 함수 호출 시 콘솔에 찍히지 않음
  • console.log( function() ) 으로 콘솔 확인 가능!
  • return: 변수 할당 가능
    console.log(): 변수 할당 불가
	function myNumber() {
    	return 10000;
    }
    let number1 = myNumber();			
    console.log("number1 : ", number1)	// "number1 :" 10000

	let number2 = console.log(10000);	// 10000
    console.log("number2 : ", number2);	// "number2 :" undefined

Assignment

아래에 두 함수 sayHello와 getStringLength를 작성해주세요.
1. "안녕하세요! 만나서 반갑습니다"를 콘솔창에 찍는 함수 sayHello를 만들어주세요. 그리고 해당 함수를 호출하여 실행해주세요.
2. "I LOVE WECODE"라는 문자열의 길이를 계산해서 콘솔창에 찍는 함수 getStringLength를 만들어주세요. 그리고 해당 함수를 호출하여 실행해주세요.

function sayMyName() {
  console.log("김코드")
}
sayMyName()
// 1번
function sayHello() {
  console.log("안녕하세요! 만나서 반갑습니다")
}
sayHello()
// 2번
function getStringLength() {
  let aaa = "I LOVE WECODE";
  console.log(aaa.length)
}
getStringLength()

탐구하기2
문자열의 길이를 찍는 함수1

function getStringLength() {
  let aaa = "Sense and Sensibility";
  return aaa.length;
}
console.log(getStringLength())	

문자열의 길이를 찍는 함수2

let aaa = "Sense and Sensibility";
function getStringLength2(a) {
  let abc = a.length;
  console.log(abc)
}
getStringLength2(aaa)	

안되는 것:

getStringLength2(aaa)
function getStringLength2(a) {
  let abc = a.length;
  console.log(abc)
}
let aaa = "Sense and Sensibility";
getStringLength2(aaa)
let aaa = "Sense and Sensibility";
function getStringLength2(a) {
  let abc = a.length;
  console.log(abc)
}
function getStringLength2(a) {
  let abc = a.length;
  console.log(abc)
}
getStringLength2(aaa)
let aaa = "Sense and Sensibility";

ReferenceError: Cannot access 'aaa' before initialization
at Object. (/home/runner/01-hamsuyi-jeongyiwa-hocul-songcj92/index.js:43:18)
at Module._compile (internal/modules/cjs/loader.js:999:30)

  • 변수의 '선언'이 그 변수를 매개변수로 입력받는 '함수호출'보다 위에 있어야함
  • 함수 선언은 어디에 있어도 상관 없음

안되는 것2:

let aaa;
getStringLength2(aaa)
aaa = "I LOVE WECODE"
function getStringLength2(a) {
  let abc = a.length;
  console.log(abc)
}

TypeError: Cannot read property 'length' of undefined
at getStringLength2 (/home/runner/01-hamsuyi-jeongyiwa-hocul-songcj92/index.js:48:15)
at Object. (/home/runner/01-hamsuyi-jeongyiwa-hocul-songcj92/index.js:45:1)
at Module._compile (internal/modules/cjs/loader.js:999:30)

  • 문자열의 길이를 호출하는 함수인데 '변수'가 '함수호출'보다 위에 있어도
    변수에 할당되는 '값'이 '함수호출'보다 아래에 있으면 안됨.
  • 함수 선언은 어디에 있어도 상관없음.

이거 ES6 호이스팅과 관련이 있음. var로 선언했다면 다 됐을 것임.
👉 var, let, const 차이점

02. 함수의 반환

Assignment

  1. 7을 반환하는 함수 returnSeven을 만들어주세요. 그리고 해당 함수를 호출해서 실행해주세요.
function returnSeven () {
  let number = 7;
  return number;
}
  
/*모범답안
	function returnSeven () {
	  	return 7;
	}
*/
  
returnSeven() // 함수의 실행
  1. "I LOVE WECODE"의 길이를 계산해서 길이 값을 반환하는 함수 getStringLength를 만들어주세요. 그리고 해당 함수를 호출해서 실행해주세요.
function getStringLength() {
  let aa = "I LOVE WECODE";
  let length = aa.length;
  return length;
}
/*모범답안
	function getStringLength() {
  		return "I LOVE WECODE".length;
  	}
*/
  
getStringLength() //함수의 실행
  1. 본인의 이름을 name이라는 변수에 저장해서 name을 반환하는 함수 getMyName를 만들어주세요. 그리고 해당 함수를 호출해서 실행해주세요.
function getMyName() {
  let name = "두루마리";
  return name;
}  
/*모범답안
	function getMyName() {
  		const name = "두루마리";
  		return name;
	}  
*/
getMyName()  //함수의 실행

탐구하기

let, const 비교.. https://www.howdy-mj.me/javascript/var-let-const/


03. 함수의 인자

function myFunction(name){
...
}
let name = myFunction("Jane")

함수 선언 시 input자리에 넣는 것(name): parameter, 인자
함수 호출 시 넣는 것("Jane"): argument

function myFrined(num1, num2){
let result = num1 + num2;
return result;
}

'인자의 이름'은 함수 내부의 '인자의 이름'과 동일해야 한다

console.log(num1) // error
console.log(num2) // error
console.log(result) // error

함수 내부(중괄호{ }안)에 선언된 변수(num1, num2, result)는 함수 외부(중괄호{ }밖)에서 쓸 수 없음

  1. 함수의 인자로 이름을 받아서 이름의 길이를 반환하는 함수 getLengthOfName을 구현해주세요.
  function getLengthOfName(name) {
  	return name.length;
  }
  getLengthOfName(
  1. 함수의 인자로 나이를 받아서 나이를 콘솔창에 출력하는 함수 getAge를 구현해주세요.
  function getAge(age) {
  	console.log(age);
  }
  1. 함수의 인자로 성과 이름(두 개의 인자)을 받아서 합친 후, 전체 이름을 출력하고 반환하는 함수 getFullName을 구현해주세요.
  function getFullName(first,second) {
  	const fullName = first + second;
  	console.log(fullName);
  	return fullName;
  }
profile
검색하고 기록하며 학습하는 백엔드 개발자

0개의 댓글