JavaScript 찍먹하기 - (4) 함수

함수 기본

• 함수는 "동작(action)"을 나타내는 "값"이다.

let myName = "홍길동";    // 외부변수

function show() {
	let message = "헬로"; // 지역변수

    console.log(`${message} ${myName}!`);
}

show(); // 헬로 홍길동!

• 함수 외부에서 지역변수에 접근 불가
• 함수 내부에서 외부변수에 접근 가능
• 만약 show() 함수 내에 myName = "철수"가 있다면, 외부변수 myName은 show() 내에서 무시됨
• 함수 외부에 선언된 변수는 지역변수(global variable)라고도 함

function hello(first, second) {           //first, second: 매개변수
    second = "**" + second + "**";
	console.log(first + ": " + second);
}

let second = "Cola";
hello("탄산음료", second);
console.log(second);

// 탄산음료: **Cola**
// Cola

// 함수에 전달되는 매개변수(parameter)는 값을 복사해서 넘겨준다.
// =함수 내에서 second를 수정해도 전역변수 second의 값은 바뀌지 않음

function test01(first, second) {
	console.log(first + "! " + second);
}

test01("첫번째 값"); // 첫번째 값! undefined

function test02(first, second = "no text given") {
	console.log(first + "! " + second);
}

test02("첫번째 값"); // 첫번째 값! no text given
test02("첫번째 값", undefined); // 첫번째 값! no text given
test02("첫번째 값", null); // 첫번째 값! null

function test03(first, second = hello()) {
	// second에 값이 없을 경우 hello() 호출
    // second에 값이 들어오면 hello()의 반환값이 second 값이 됨 
}

function test01(a, b) {
	return a+b;
}
console.log(test01(1,2)); //3
// 메소드에 리턴타입 필요없음!

function doNothing() {}
// return이 없거나 return; 만 있을 경우 함수는 undefined 반환
// doNothing === undefined -> true

 

함수 표현식

// 함수 표현식을 사용해서 변수에 함수 할당하기 가능
// JavaScript에서는 함수 역시 값으로 취급하기 때문
let sayHi = function() {
	console.log("Hi!");
}

let sayHi_copy = sayHi;

sayHi();
sayHi_copy();
// 둘 다 Hi! 출력

// 함수의 파라미터로 함수 넘기기도 가능
function ask(question, yes, no) {
	if(confirm(question)) yes();
    else no();
}

ask(
	"동의하십니까"?,
	function() {console.log("동의하셨습니다.");},    //이름없는 함수
	function() {console.log("비동의하셨습니다.");}   // = 익명함수
);

//ask 내에서 선언된 function() 두 개는 밖에서는 접근이 불가능하다.

콜백(called back) 함수

- 함수를 함수의 인수로 전달하고 필요할 때 전달받은 함수를 "나중에 호출"하는 것

- ask()에서 question에 yes로 답했을 경우 yes() 함수가 콜백되고, no라고 하면 no()함수가 콜백된다.

 

함수 선언 vs 함수 표현식

// 함수 선언문
function hello() {
	console.log("hello");
}

// 함수 표현식
let h = function() {
	console.log("hello");
}

• 함수 선언문
  • 코드 흐름 중간에 독자적인 구문 형태로 존재
  • 함수 선언문이 정의되기 전 위치에서도 호출 가능(전역함수만)
    JavaScript는 스크립트 실행 전, 초기화 단계에서 정의된 전역 함수를 생성
• 함수 표현식
  • 표현식이나 구문(syntax) 내부에 존재
  • 실제 실행 흐름이 해당 함수에 도달했을 시 함수 생성

let age = 20;

if(age >= 19) {
	function hiAdults() {
    	console.log("hi~");
    }
}
else {
	function hiKids() {
    	console.log("bye~");
    }
}

hiAdults();
hiKids();

// 함수가 선언된 코드 블록 밖에서 함수를 호출할 수 없음
// 가능하게 하려면??

let welcome;

if(age > 18) {
	welcome = function hiAdults() {
    	console.log("hi~");
    }
}
else {
	welcome = function hiKids() {
    	console.log("bye~");
    }
}

welcome(); // 잘 호출된다.


// '?' 활용한 코드 단순화
let welcome = (age > 18) ?
  function() { console.log("hi~"); } :
  function() { console.log("bye~"); };

 

Arrow function(화살표 함수)

// 기존의 함수 표현식
let sum = function(a, b) {
	return a+b;
}

// 화살표 함수를 이용한 축약
let sum = (a,b) => a+b;

// 인수가 하나라면 괄호 생략 가능
let double = n => n * 2;

// 인수가 없을 땐 괄호 필요
let hello = () => console.log("hello");

// 본문이 여러줄일 경우
let test = (a,b) => {
	let c = 10;
    return a+b+c;
}

console.log(test(1,2)); // 13

 

나머지 매개변수

• 정해지지 않은 수의 인수를 받을 때 사용

function sumAll(...nums) {
	let sum = 0;
    
	for(let num of nums) sum += num;
	return sum;
}

console.log(sumAll(1,2,3));     // 6
console.log(sumAll(1));         // 1
console.log(sumAll(1,2,3,4,5)); // 15


// 파라미터를 나눠서 받을 수도 있음
function show(first, second, ...all) {
	console.log(first + "!!");
	console.log(second + "!!");
	for(let num of all) console.log(num);
}

show(1,2,3,4,5);
// 1!!
// 2!!
// 3
// 4
// 5

• ...를 통해 매개변수들을 하나로 모아 배열에 집어넣는다.
• 나머지 매개변수는 마지막에 써야한다.

arguments 객체

• 유사배열 객체(array-like object)
• 나머지 매개변수(...)가 나오기 전에 인수 전체를 얻어내던 문법
• iterable 객체이지만 배열은 아니기 때문에 map() 호출 불가
• arguments는 인수를 통째로 받기 때문에 일부만 사용하는 것은 불가능
• 화살표 함수에서 arguments 호출 시 바깥의 일반 함수에서 arguments를 받아옴
  => 화살표 함수는 arguments 지원 x

function hello() {
	console.log("hello~ " + arguments[0]);
	console.log("hello! " + arguments[2]);
	console.log(arguments.length);
}

hello("철수", "유리", "맹구");
// hello~ 철수
// hello! 맹구
// 3

hello("짱구");
// hello~ 짱구
// hello! undefined
// 1

 

스프레드 문법

• 기존 배열이나 객체의 전체/일부를 다른 배열이나 객체로 복사할 수 있다.
• for...of 와 같은 방식으로 내부에서 iterator를 사용해 요소를 수집한다.

let arr = [1,6,8,5];
console.log(Math.max(arr)); // NaN

// max() 메소드는 일반 숫자만 받음
// spread syntax를 통해 해결 가능
// 배열을 인수 목록으로 '확장'
console.log(Math.max(...arr)); // 8

// iterable 객체 여러 개 전달도 가능
let arr2 = [2,7,9];
console.log(Math.max(...arr, ...arr2)); // 9

// 배열 합치기
let arr3 = [3, ...arr, 4, ...arr2];
console.log(arr3);             // 3,1,6,8,5,4,2,7,9 => 적은 순서대로 함쳐짐

// 문자열 split
let str = "APPLE";
console.log([...str]); // [ 'A', 'P', 'P', 'L', 'E' ]


//배열과 객체 복사
let a = [1,2,3];
let b = [...a];
// 1. 배열을 펼쳐서 요소 분리
// 2. 매개변수 목록으로 만듦
// 3. 목록을 새로운 배열로 할당

console.log(a === b); // false => 값과 타입은 같지만 참조가 다름(서로 다른 객체)

let o1 = {a:1, b:2, c:3};
let o2 = {...o1};

console.log(JSON.stringify(o1) === JSON.stringify(o2)); // true
console.log(o1 === o2); // false

 

참고

https://ko.javascript.info/

모던 JavaScript 튜토리얼