[Study/JavaScript] 함수 / return문

SoShy·2023년 11월 27일

JavaScript_Study

목록 보기
4/36
post-thumbnail

🥕 함수

  • 함수 선언 : function 함수이름() {명령}
  • 함수 호출 : 함수이름()

  • 이전에 배웠던 console.log()도 JS 개발자들이 미리 작성해둔 함수

  • 복잡한 내용은 함수 내부로 숨기고, 핵심은 그 함수의 이름에 드러내는 것 -> 추상화
function greeting() {
  console.log('Hi');
  console.log('안녕');
  console.log('こんにちは');
  console.log('你好');
  console.log('Guten Tag');
  console.log('Bonjour');
  console.log('Buongiorno');
};

greeting();
.
.
.
>>> Hi
	안녕
	こんにちは
	你好
	Guten Tag
	Bonjour
	Buongiorno

1. 매개변수 (Parameter)

  • 함수를 호출할 때, 소괄호 안에 입력하는 값
    = 함수에 전달되는 변수
function greeting(sentence) {
  console.log(sentence);
};

greeting('Hola');
.
.
.
>>> Hola
function welcome(name) {
  console.log('안녕하세요 ' + name + '님!');
};

welcome('소샤이');
.
.
.
>>> 안녕하세요 소샤이님!
function printSquare(x) {
  console.log(x * x);
};

printSquare(2);
printSquare(5);
printSquare(6);
.
.
.
>>> 4
	25
	36

2. 여러 개의 parameter

  • function 함수이름(parameter1, parameter2) {}
function printSum(num1, num2) {
  console.log(num1 + num2);
};

printSum(10, 5);
printSum(123, 4);
printSum(56, 7890);
.
.
.
>>> 15
	127
	7946
function introduce(name, birth, nationality, job) {
  console.log('안녕하세요! 반갑습니다.');
  console.log('제 이름은 ' + name + ' 입니다.');
  console.log('생년월일은 ' + birth + ' 이고,');
  console.log('국적은 ' + nationality + ' 입니다.');
  console.log('직업은 ' + job + ' 입니다.');
  console.log('잘 부탁드립니다!');
};

introduce('소샤이', '21.04.10', '한국', '토깽이');
.
.
.
>>> 안녕하세요! 반갑습니다.
	제 이름은 소샤이 입니다.
	생년월일은 21.04.10 이고,
	국적은 한국 입니다.
	직업은 토깽이 입니다.
	잘 부탁드립니다!

3. Optional Parameter

  • parameter에 기본값을 설정
  • 함수를 호출할 때, parameter 값을 생략하면 기본값으로 출력

  • 선언할 때, 가장 뒤 쪽 순서로 선언하기
function introduce(name, age, nationality = '한국') {
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살이고,`);
  console.log(`국적은 ${nationality}입니다.`);
};

introduce('소샤이', 1, '미국');
console.log('');
introduce('소샤이', 1);
.
.
.
>>> 제 이름은 소샤이입니다.
	나이는 1살이고,
    국적은 미국입니다.
    
    제 이름은 소샤이입니다.
    나이는 1살이고,
    국적은 한국입니다.

🥕 return문

  • return : 함수의 아웃풋
  • 되돌려주는 값을 반환값 혹은 리턴값이라고 부름.
function getTwo() {
  return 2;
};

console.log(getTwo());
.
.
.
>>> 2
function getTwice(number) {
  return number * 2;
};

console.log(getTwice(5));
.
.
.
>>> 10
function getTwice(number) {
  return number * 2;
};

let x = getTwice(5);
let y = getTwice(2);

console.log(x * y);
.
.
.
>>> 40

1. return문 심화

  • 결과값을 돌려주는 역할 이외에도, 함수의 실행을 중단시키는 역할이 있음.
  • 함수 내부에서 return 키워드가 나오면, 함수의 실행은 그 지점에서 중단됨.
    - return 키워드 이후에 작성된 코드를 dead code라고 함.
function square(x) {
  console.log('return 전');
  return x * x;
  console.log('return 후');	// dead code
};

console.log('함수 호출 전');
console.log(square(3));
console.log('함수 호출 후');
.
.
.
>>> 함수 호출 전
	return9
	함수 호출 후

2. return과 console.log의 차이

  • 함수를 선언할 때, return문을 따로 작성하지 않으면, console.log()로 출력 시, undefined 값을 return
function printSquare(x) {
  console.log(x * x);
};

function getSquare(x) {
  return x * x
};

printSquare(3);
getSquare(3);
console.log(getSquare(3));
console.log(printSquare(3));
.
.
.
>>> 9
	
	9
	undefined
profile
프론트엔드 개발자가 되기 위해 노력 중인 새싹🌱 입니다.

0개의 댓글