코린이[코딩 어린이]

생성자 함수

생성자 함수는 new키워드로 객체를 생성할 수 있는 함수를 의미합니다. 객체를 생성할 때 사용하는 함수라고 생각하면 됩니다.

용어

• 인스턴스 : 생성자 함수를 기반으로 생성한 객체를 인스턴스라고합니다.
• 프로토타입 : 생성자 함수로 생성한 객체들이 공동으로 갖는 공간입니다. 일반적으로 메서드를 이러한 공간에 선언합니다.

생성자 함수 생성 형태

function Student() { }

이렇게 생성한 함수는 아래코드처럼 new키워드로 객체를 생성합니다.

객체 생성

function Student() { }

var student = new Student();

생성자 함수의 이름

생성자 함수의 이름은 일반저그올 대문자로 시작합니다. 대문자로 시작하지 않아도 문제는 없지만 개발자 대부분이 지키는 규칙이기 때문에 따르는 것이 좋습니다. 자바스크립트에서 기본적으로 제공하는 생성자 함수도 모두 대문자로 시작합니다.

생성자 함수 안에서는 this키워드를 통해 생성자 함수로 생성될 객체의 속성을 지정합니다.

속성 생성하기 예

function Student(name, korean, math, english, science, test) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;
    this.테스트 = test;
}

var student = new Student('shiro', '국어', '수학', '영어', '과학', '테스트');

console.log(student);
/*
english: "영어"
korean: "국어"
math: "수학"
name: "shiro"
science: "과학"
테스트: "테스트"
*/

메서드 생성하기 예

function Student(name, korean, math, english, science, test) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;
    this.테스트 = test;

    // 메서드
    this.getSum = function() {
        return this.korean + this.math + this.english + this.science;
    };

    this.getAverage = function() {
        return this.getSum() / 4;
    };

    this.toString = function() {
        return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
    };
}

var student = new Student('shiro', 96, 98, 100, 100, '테스트입니다.');

console.log(student.getSum()); // 394
console.log(student.getAverage()); // 98.5
console.log(student.toString()); // shiro 394 98.5

메서드를 생성하는 방법도 속성을 만드는 방법과 같습니다. this키워드로 속성을 생성하고 함수를 넣어줍니다.

생성자 함수를 사용한 객체 배열 생성

function Student(name, korean, math, english, science) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;

    // 메서드
    this.getSum = function() {
        return this.korean + this.math + this.english + this.science;
    };

    this.getAverage = function() {
        return this.getSum() / 4;
    };

    this.toString = function() {
        return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
    };
}

var students = [];
students.push(new Student('shiro', 98, 99, 100, 86));
students.push(new Student('AAA', 78, 66, 90, 100));
students.push(new Student('BBB', 67, 77, 70, 100));
students.push(new Student('CCC', 45, 88, 60, 66));

var output = '이름\t총점\t평균\n';
for(var i in students) {
    output += students[i].toString() + '\n';
}
console.log(output);
/*
이름    총점    평균
shiro  383    95.75
AAA    334    83.5
BBB    314    78.5
CCC    259    64.75
*/

실행하면 각각 학생의 총점과 평균을 출력합니다.

용어 정리

Student()함수는 new키워드로 객체를 생성하므로 생성자 함수(constructor)입니다. 그리고 Student 생성자 함수로 만든 객체 student를 객체(Object)또는 인스턴스(Instance)라고 부릅니다.

전개 연산자를 사용한 배열 테크닉

전개 연산자를 사용하면 배열을 복제하거나 병합할 수 있습니다.

배열 복제

ECMAScript5까지의 자바스크립트는 배열을 복제할 때 아래 코드처럼 사용해야 했습니다.

:: 코드가 복잡하기 때문에, 함수로 만들어 사용하는 것이 일반적입니다.

배열 복제 예

var array = [1, 2, 3, 4, 5];

var newArray = [];
for(var i = 0; i < array.length; i++) {
    newArray[i] = array[i];
}
console.log(array); // 1, 2, 3, 4, 5
console.log(newArray); // 1, 2, 3, 4, 5

그런데 ECMAScript6에서 추가된 전개 연산자를 사용하면 아래 코드처럼 깔끔하게 배열의 내용을 복제할 수 있습니다.

전개 연산자를 사용한 배열 복제

var array = [1, 2, 3, 4, 5];

const newArray = [...array];

console.log(newArray); // 1, 2, 3, 4, 5

배열 복제 확인 [ 배열 복제가 제대로 됐는지 확인하기 위한 코드 ]

var array = [1, 2, 3, 4, 5];

const newArray = [...array];

array[0] = 52;
array[1] = 222;

console.log(array); // 52, 222, 3, 4, 5
console.log(newArray); // 1, 2, 3, 4, 5

두 배열이 서로 다른 결과를 출력하므로 복제가 제대로 이루어진 것을 확인할 수 있습니다.

배열 병합

전개 연산자를 사용하면 배열을 병합할 수 있습니다.

전개 연산자를 사용한 배열 병합 예

const arrayA = [1, 2, 3, 4, 5];
const arrayB = [52, 555, 23, 44, 12];

const newArray = [...arrayA, ...arrayB];

console.log(newArray); // 1, 2, 3, 4, 5, 52, 555, 23, 44, 12

전개 연산자를 사용한 배열 병합2 예

const array = [522, 33, 77, 123, 11];

const arrayA = [1, 2, 3, 4, 5, ...array];
const arrayB = [...array, 1, 2, 3, 4, 5];

console.log(arrayA); // 1, 2, 3, 4, 5, 522, 33, 77, 123, 11
console.log(arrayB); // 522, 33, 77, 123, 11, 1, 2, 3, 4, 5

배열을 선언하면서 곧바로 기존 배열의 요소를 앞 또는 뒤쪽에 추가할 수 있습니다.

참조 복사와 값 복사

기본 자료형의 값 복사 - 깊은 복사 예

var value = 10;
var newValue = value;

value = 273;

console.log(value); // 273
console.log(newValue); // 10

위 코드처럼 값을 복사하고 변경했을 때, 다른 값에 전혀 영향을 주지 않으므로 55, 100이 출력됩니다.

객체(배열 포함)의 참조 복사 - 얕은 복사 예

var array = [1, 2, 3, 4];
var newArray = array;

array[0] = 33;

console.log(array); // [33,2, 3, 4]
console.log(newArray); // [33,2, 3, 4]

이전과는 다르게 array와 newArray배열의 값도 바뀌었습니다.

기본 자료형의 값 복사

자바스크립트는 기본 자료형(숫자, 문자열, 불)을 복사할 때 값을 완전히 복사합니다.

위에있는 깊은 복사 예 처럼 값을 복사하면 아래처럼 나옵니다.

위처럼 value값만 변경이 되어 두 개의 변수가 완전한 독립성을 갖는 것을 '값 복사' or '깊은 복사'라고 부릅니다.

객체의 참조 복사

객체를 변수에 저장하면, 실제 값을 저장하는 것이 아니라 '객체를 메모리 어디인가에 만들고, 객체가 메모리 위의 어디에 있는지'라는 참조(reference)를 저장하게 됩니다.

참조할당

이 상태에서 array[0] = 33을 추가하면 '참조되는 위치의 값'이 변경됩니다. array와 newArray는 같은 메모리 위치를 참조하기 때문에 newArray[0]을 출력해도 33을 출력하게 되는 것입니다.

그렇기 때문에 두 개의 배열은 독립적이지 않습니다. 이처럼 독립적이지 않게 복사되는 것을 '참조복사'또는 '얕은복사'라고 부릅니다. 따라서 '객체 또는 배열을 어떻게 깊게 복사를 할 것인가'가 정말 중요한 문제입니다.

객체의 깊은 복사

객체의 깊은 복사를 할 때는 새로운 객체를 만들고, for in 반복문으로 원본 객체에 반복을 돌리며 키와 값을 하나하나 옮겨줍니다.

객체 복사 예

// 객체를 복제하는 함수
function clone(obj) {
    var output = {};
    for(var i in obj) {
        output[i] = obj[i];
    }
    return output;
}

var original = { a: 10, b: 20 };
var referenced = original;
var cloned = clone(original);

// 변경
original.a = 20;

console.log(JSON.stringify(referenced, null, 2));
/*
{
    "a": 20,
    "b": 20
}
*/
console.log(JSON.stringify(cloned, null, 2));
/*
{
    "a": 10,
    "b": 20
}
*/

얕은 복사한 객체는 원본을 변경했을 때 값이 함께 변경되었지만, 깊은 복사한 객체는 원본을 변경해도 영향을 주지 않습니다.

일반적으로 모든 프로그래밍 언어에서 같은 현상이 일어나며, 깊은 복사를 할 때는 clone이라는 이름의 기능을 활용하게 되므로 'clone'이라는 단어 자체를 기억해두면 좋습니다.

함수를 사용한 객체 생성

객체를 개별적으로 만드는것은 특성을 정확히 반영할 수 있는 반면, 시간이 오래걸리고 어렵습니다. 하지만 틀을 잡고 만들면 형태도 같고 쉽고 빠르게 만들어 낼 수 있습니다.

객체를 생성하는 함수 틀 예

function makeStudent(name, korean, math, english, science) {
    var willReturn = {};

    return willReturn;
}

객체를 생성하는 함수 예

function makeStudent(name, korean, math, english, science) {
    var willReturn = {
        이름: name,
        국어: korean,
        수학: math,
        영어: english,
        과학: science,

        // 메서드
        getSum: function() {
            return this.국어 + this.수학 + this.영어 + this.과학
        },
        getAverage: function() {
            return this.getSum() / 4;
        },

        toString: function() {
            return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
        }
    };
    return willReturn;
}

위 코드에 makeStudent()함수를 사용하면 객체를 틀에서 찍어내듯이 만들어낼 수 있습니다.

함수를 사용한 객체 생성

function makeStudent(name, korean, math, english, science) {
    var willReturn = {
        이름: name,
        국어: korean,
        수학: math,
        영어: english,
        과학: science,

        // 메서드
        getSum: function() {
            return this.국어 + this.수학 + this.영어 + this.과학
        },
        getAverage: function() {
            return this.getSum() / 4;
        },

        toString: function() {
            return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
        }
    };
    return willReturn;
}

var students = [];
students.push(makeStudent('사람1', 98,100,55,76));
students.push(makeStudent('사람2', 98,54,55,100));
students.push(makeStudent('사람3', 98,88,46,89));
students.push(makeStudent('사람4', 98,44,78,88));
students.push(makeStudent('사람5', 98,12,87,98));

var output = '이름 \t 총점 \t 평균\n';
for(var i in students) {
    output += students[i].toString() + '\n';
}
console.log(output);

/*
이름 	 총점 	 평균
사람1    329    82.25
사람2    307    76.75
사람3    321    80.25
사람4    308    77
사람5    295    73.75
*/

위 코드처럼 함수를 사용하면 객체를 쉽게 만들 수 있습니다. 생성자 함수를 사용하면 기능이 많은 객체를 쉽게 만들수 있기 때문에 실제로 이러한 방법은 잘 사용하지 않습니다.

객체와 배열을 사용한 데이터 관리

학생 성적 출력하기

var students = [
    { 이름: 'shiro', 국어: 92, 수학: 99, 영어: 82, 과학: 94, 사회: 55 },
    { 이름: 'child', 국어: 95, 수학: 76, 영어: 12, 과학: 94, 사회: 55 },
    { 이름: 'qweqw', 국어: 72, 수학: 87, 영어: 55, 과학: 98, 사회: 12 },
    { 이름: 'young', 국어: 62, 수학: 59, 영어: 12, 과학: 77, 사회: 55 },
    { 이름: 'byung', 국어: 52, 수학: 96, 영어: 55, 과학: 65, 사회: 65 },
    { 이름: 'byyyy', 국어: 86, 수학: 55, 영어: 76, 과학: 45, 사회: 76 },
    { 이름: 'tomss', 국어: 47, 수학: 44, 영어: 100, 과학: 44, 사회: 88 },
    { 이름: 'jerry', 국어: 56, 수학: 65, 영어: 23, 과학: 100, 사회: 100 },
    { 이름: 'lulus', 국어: 78, 수학: 87, 영어: 14, 과학: 88, 사회: 54 }
]

// 모든 students배열 안 객체에 메서드 추가하기
for(var i in students) {
    // 총점 구하기 메서드
    students[i].getSum = function() {
        return this.국어 + this.수학 + this.영어 + this.과학 + this.사회;
    };

    // 평균 구하기 메서드
    students[i].getAverage = function() {
        return this.getSum() / 5;
    };
}

// 성적 출력하기
var output = '이름 \t 총점 \t 평균\n';

for(var i in students) {
    with(students[i]) {
        output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
    }
}

console.log(output);
/*
이름 	 총점 	 평균
shiro	422    84.4
child	332    66.4
qweqw	324    64.8
young	265    53
byung	333    66.6
byyyy	338    67.6
tomss	323    64.6
jerry	344    68.8
lulus	321    64.2
*/

객체와 배열로 학생들의 성적 관리하기

객체의 속성 추가와 제거

처음 객체를 생성하는 시점 이후에 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가한다'또는 '동적으로 속성을 제거한다'고 표현합니다.

속성 추가

빈 객체 생성하기 예

var student = {};

동적으로 속성 추가하기 예

var student = {};

// 객체에 속성 추가하기
student.name = 'shiro';
student.hobby = '컴퓨터';
student.ability = '컴퓨터';

동적으로 메서드 추가하기 예

var student = {};

student.name = 'shiro';
student.hobby = '컴퓨터';
student.ability = '컴퓨터';

student.toString = function() {
    var output = '';
    for(var key in this) {
        if(key != 'toString') {
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}

console.log(student.toString());

/*
name	shiro
hobby	컴퓨터
ability	컴퓨터
*/

메서드도 속성이므로 같은 방법으로 추가할 수 있습니다.

:: toString() 메서드 = 객체에 있는 속성을 출력하는 메서드

속성 제거

동적으로 객체의 속성을 제거할 때는 delete키워드를 사용합니다. delete키워드 뒤에 삭제하고자 하는 객체의 속성을 입력합니다.

:: 객체의 속성을 입력할 때는 typeof키워드처럼 괄호를 입력해도 되고 입력하지 않아도 됩니다.

객체의 속성 제거하기 예

var student = {};

student.name = 'shiro';
student.hobby = '컴퓨터';
student.ability = '컴퓨터';

student.toString = function() {
    var output = '';
    console.log(this);
    for(var key in this) {
        if(key != 'toString') {
            output += key + '\t' + this[key] + '\n';
        }
    }
    return output;
}

console.log(student.toString());
/*
name	shiro
hobby	컴퓨터
ability	컴퓨터
*/

delete(student.hobby);

console.log(student.toString());
/*
name	shiro
ability	컴퓨터
*/

delete student.ability;
console.log(student.toString());
/*
name	shiro
*/

위 코드처럼 속성을 제거할 수 있습니다.

객체[Ojbect]

객체는 자바스크립트의 기본 자료형인 숫자, 문자열, 불, 객체, 함수, undefined중 한가지입니다.

키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합입니다. 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있습니다.

중요 용어

• 속성 : 객체가 가진 값을 의미합니다.
• 메서드 : 객체가 가진 속성 중에 함수 자료형인 것을 의미합니다.
• JSON( JavaScript Object Notation ) : 자바스크립트 객체 표현 방식을 사용해 데이터를 표현하는 방법을 의미합니다.

객체와 배열의 관계

배열은 객체의 일부입니다.

배열의 자료형 확인해보기

console.log(typeof([])); // object

배열을 typeof()로 실행해보면 object를 출력합니다. 이때 나오는 object가 바로 객체입니다.

배열 선언하기 예

var array = ['사과', '귤', '바나나', '파인애플', '딸기'];

배열을 선언하면 배열 내에는 '인덱스'와 '요소'가 생깁니다. 각각의 '요소'를 사용하려면 아래처럼 배열 이름 뒤에 '인덱스'로 접근하면 됩니다.

인덱스로 요소에 접근하기 예

var array = ['사과', '귤', '바나나', '파인애플', '딸기'];

console.log(array[0]); // 사과
console.log(array[4]); // 딸기

배열은 객체를 기반으로 만들어졌기 때문에 배열과 객체는 상당히 비슷합니다. 다른 점은 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다는 점입니다.

객체 생성하기 예

var product = {
    제품: 'Mac M1',
    생성날짜: '2022.06.09',
    가격: '3,000,000원'
}

위 코드는 아래 표처럼 표현할 수 있습니다.

표로 나타낸 객체

객체에 접근 하는 방법은 아래와 같습니다.

var product = {
    제품: 'Mac M1',
    생성날짜: '2022.06.09',
    가격: '3,000,000원'
}

console.log(product); // 전체를 불러오기
console.log(product['제품']); // Mac M1
console.log(product.제품); // Mac M1

대괄호를 사용하는 방법과 .를 붙여서 바로 쓰는 방법이 있는데, 일반적으로는 .를 붙여서 사용하는 방법을 많이 사용한다고 합니다.

객체의 키는 식별자 또는 문자열을 모두 사용할 수 있습니다. 대부분 식별자로 키를 사용하지만, 식별자로 사용할 수 없는 단어를 키로 사용할 때는 아래처럼 사용합니다.

문자열을 키로 사용하는 예

var product = {
    "with space" : 273,
    "with ~!@#$%^&*()_+" : 52
}

console.log(product['with ~!@#$%^&*()_+']); // 52

위 코드처럼 식별자가 아닌 문자를 키로 사용했을 때는 무조건 대괄호를 사용해야 객체 요소에 접근할 수 있습니다.

속성과 메서드

배열 내부에 있는 값을 요소(Element)라고 합니다. 반면 객체 내부에 있는 값은 속성(Property)라고 합니다.

:: 다른 프로그래밍 언어에서는 차이가 있기 때문에 요소와 속성이라고 구분해서 부르지만, 자바스크립트는 요소와 속성이 다르지 않습니다. 다른 프로그래밍 언어에서 사용하던 용어 습관때문에 구분해서 부른다고 생각하면 됩니다.

배열의 요소와 마찬가지로 객체의 속성도 모든 형태의 자료형을 가질 수 있습니다.

객체의 속성이 가질 수 있는 자료형 예

var object = {
    number: 273,
    string: "Rink",
    boolean: true,
    array: [52, 273, 5, 1],
    method: function() {}
}

객체의 속성중에서 함수 자료형인 속성을 특별히 메서드(method)라고 부릅니다. 

속성과 메서드의 구분 예

var person = {
    name: 'shiro',
    eat: function(food) {}
};

// 메서드 호출
person.eat();

위 코드에서 person은 name속성과 eat속성이 있으며, eat속성은 함수 자료형이기 때문에 eat()메서드라고 부릅니다.

this키워드 예

var person = {
    name: 'shiro',
    eat: function(food) {
        console.log(this.name + '가 ' + food + '을/를 먹습니다.'); // shiro가 밥을/를 먹습니다.
    }
};

// 메서드 호출
person.eat('밥');

메서드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 합니다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this키워드를 사용해야합니다.

객체와 반복문

배열은 단순 for 반복문과 for in 반복문으로 요소에 쉽게 접근할 수 있습니다. 하지만, 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능합니다. 객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 합니다.

객체와 반복문 예

var person = {
    name: 'shiro',
    age: 30,
    residence: '의정부',
    gender: '남성'
};

var output = '';
for(let key in person) {
    output += '- ' + key + ': ' + person[key] + '\n';
}

console.log(output);

/*
- name: shiro
- age: 30
- residence: 의정부
- gender: 남성
*/

위 코드는 객체를 만들고 for in 반복문으로 배열의 속성을 모두 출력합니다.

for in 반복문에 객체를 넣으면 객체의 요소 개수만큼 반복문을 실행합니다. 이때 변수 key에는 객체의 키가 들어가므로 코드를 실행하면 위처럼 객체의 키와 속성을 모두 출력합니다.

in 키워드

in키워드를 for키워드와 별도로 사용하면 해당 키가 객체 안에 있는지 확인할 수 있습니다.

in키워드 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

output += "'이름' in student: " + ('이름' in student) + '\n';
output += "'성별' in student: " + ('성별' in student);

console.log(output);

/*
'이름' in student: true
'성별' in student: false
*/

위 코드를 실행하면 이름속성은 존재하므로 true를 출력하고 성별속성은 존재하지 않으므로 false를 출력합니다.

with 키워드

with키워드는 복잡하게 사용해야 하는 코드를 줄여주는 키워드입니다.

with키워드 형태

with(<객체>) {
    <내용>
}

with키워드를 사용하지 않은 경우 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

output += '이름: ' + student.이름 + '\n';
output += '국어: ' + student.국어 + '\n';
output += '수학: ' + student.수학 + '\n';
output += '과학: ' + student.과학 + '\n';
output += '영어: ' + student.영어 + '\n';
output += '총점: ' + (student.국어 + student.수학 + student.과학 + student.영어);

console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

with키워드를 사용한 경우 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

with(student) {
    output += '이름: ' + 이름 + '\n';
    output += '국어: ' + 국어 + '\n';
    output += '수학: ' + 수학 + '\n';
    output += '과학: ' + 과학 + '\n';
    output += '영어: ' + 영어 + '\n';
    output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

이전 코드와 같은 결과지만 훨씬 깔끔해진것을 알 수 있습니다.

with키워드와 객체 충돌

만약 with키워드를 사용하는 객체의 속성이름과 외부 변수의 이름이 같으면 충돌이 발생합니다. 이 경우에는 아무것도 출력되지 않습니다.

with키워드 사용시 변수 이름 충돌 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50, output: '아웃풋 등장' };

with(student) {
    output += '이름: ' + 이름 + '\n';
    output += '국어: ' + 국어 + '\n';
    output += '수학: ' + 수학 + '\n';
    output += '과학: ' + 과학 + '\n';
    output += '영어: ' + 영어 + '\n';
    output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output); //

with키워드 사용시 변수 이름 충돌 해결 방법

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50, output: '아웃풋 등장' };

with(student) {
    window.output += '이름: ' + 이름 + '\n';
    window.output += '국어: ' + 국어 + '\n';
    window.output += '수학: ' + 수학 + '\n';
    window.output += '과학: ' + 과학 + '\n';
    window.output += '영어: ' + 영어 + '\n';
    window.output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

window객체는 웹 브라우저에서 동작하는 자바스크립트의 최상위 객체입니다. 웹 브라우저에서 동작하는 자바스크립트의 모든 변수와 함수는 window객체의 속성과 메서드입니다.

매개변수를 하나를 넣으면 제곱, 두개를 넣으면 첫번째 매개변수의 두번째 매개변수 제곱만큼 해주기

function power(a, b) {
    if(b) {
        var output = 1;
        for(let i = 0; i < b; i++) {
            output = output * a;
        }
        return output;
    } else {
        return a * a;
    }
}

console.log(power(5, 5));

매개변수로 넣은 값을 모두 곱하기

function multiply(...list) {
    let arrays = list, output2 = 1;
    for(let i = 0; i < arrays.length; i++) {
        // console.log(arrays[i]);
        output2 = arrays[i] * output2;
    }
    return output2;
}

console.log(multiply(1, 2, 3, 4, 5));

ECMAScript 6

매개변수

기본 매개변수는 자주 사용되는 기술이기 때문에, ECMAScript6부터는 기본 매개변수를 쉽게 만들 수 있는 문법을 제공합니다.

ECMAScript6의 기본 매개변수 예

function test(a, b = 52, c = 273) {
    console.log(a + " : " + b + " : " + c);
}

test(1, 2); // 1 : 2 : 273

다만 이전 기본 매개변수처럼 순서가 정말 중요합니다. 매개변수를 입력하지 않으면 뒤에 있는 매개변수에 값이 입력되지 않으므로, 뒤에 있는 매개변수에만 사용합니다.

function(<매개변수>, <매개변수>, <매개변수> = <값>, <매개변수> = <값>) { }

화살표 함수

화살표 함수는 기존의 코드를 더 쉽게 사용할 수 있는 '문법의 추가'로 발전된 형태입니다.

익명함수를 사용할 때 아래처럼 사용을 했었는데 이를 간단하게 사용할 수 있는 것이 ECMAScript6에서 추가된 화살표 함수(Arrow Function)입니다.

// 익명함수
function() {}

// 화살표 함수
() => {}

하지만 완전히 차이가 없는 것은 아닙니다. 내부에서 사용하는 this키워드의 의미가 다르게 작용합니다.

• 익명 함수 : 함수 자체에 바인딩되어 있는 객체(window객체 또는 prototype객체가 될 수도 있습니다.)
• 화살표 함수 : 전역 객체(웹 브라우저 환경에서는 window객체)

화살표 함수를 사용할 때의 전제 조건

• prototype을 사용하지 않고, ECMAScript6에서 추가된 클래스를 사용할 때
• jQuery의 문서 객체 조작에서 this키워드가 아니라, event.currentTarget을 사용할 때

요약하면 'this키워드를 주의해서 사용하자'입니다. 함수 내부에서 this키워드를 사용하지 않는다면 완전하게 치환해서 사용해도 무방합니다.

:: 코드가 한줄이라면 중괄호를 생략해도 되며, return키워드를 사용하지 않아도 값을 리턴해줍니다.

화살표 함수 사용 예

const abc = (a, b) => a * b;

console.log(abc(1, 2)); // 2
console.log(abc(3, 4)); // 12

이런식으로 사용이 가능합니다.

함수에서의 전개 연산자

ECMAScript6에서 전개 연산자라는 것이 추가되었습니다. 마침표 3개 (...)를 찍어 표기하는 연산자입니다.

전개 연산자는 함수 또는 배열에 적용할 수 있습니다.

함수를 선언할 때의 전개 연산자

전개 연산자는 '가변 매개변수 함수'를 만들 때 사용합니다.

arguments객체 예

function test() {
    console.log(arguments[0]); // 1
    console.log(arguments[1]); // 2
    console.log(arguments[2]); // 3
}

test(1, 2, 3);

전개 연산자를 사용한 가변 매개변수 함수 예

function test(...number) {
    console.log(number[0]); // 1
    console.log(number[1]); // 2
    console.log(number[2]); // 3
}

test(1, 2, 3);

일반 매개변수와 전개 연산자 매개변수 조합 예

function test(a, b, ...number) {
    console.log(a); // 1
    console.log(b); // 2
    console.log(number); // 3, 4, 5, 6, 7, 8, 9
}

test(1, 2, 3, 4, 5, 6, 7, 8, 9);

전개 연산자를 사용한 매개변수를 앞에 붙여두면 어디까지가 가변 매개변수인지 명확하지 않기 때문에 '가장 뒤에 딱 하나만' 사용해야 합니다.

함수를 호출할 때의 전개 연산자

함수를 호출할 때도 전개 연산자를 사용할 수 있습니다.

기존 함수의 매개변수에 배열을 전개해 넣는 방법 예

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2, 3, 4];
test.apply(null, array); // 1 : 2 : 3 : 4

모든 함수에는 apply()메서드가 있습니다. apply()메서드는 첫 번째 매개변수로는 '함수 내부에서 활용할 this 키워드 객체', 두 번째 매개변수로는 '매개변수 배열'을 넣게 됩니다. 단, 첫 번째 매개변수를 잘못 사용하면 문제가 되는 경우도 많고, 코드의 가독성이 매우 떨어집니다.

그래서 ECMAScript6에서는 전개 연산자로 함수를 호출할 때 배열을 전개해서 넣을 수 있게 했습니다.

배열을 전개해서 매개변수로 전달하기

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2, 3, 4];
test(...array); // 1 : 2 : 3 : 4

그냥 매개변수를 전달할 때 배열 앞에 전개 연산자를 입력하면 됩니다.

전개 연산자를 활용한 함수 호출 활용 예

function test(a, b, c, d) {
    console.log(`${a} : ${b} : ${c} : ${d}`);
}

var array = [1, 2];
// 앞에 다른 매개변수를 넣고, 뒤를 배열로 채우기
test(263, 52, ...array); // 263 : 52 : 1 : 2

// 배열을 병합해서 매개변수로 전달하기
test(...array, ...array); // 1 : 2 : 1 : 2

전개 연산자를 사용하면 코드가 정말 단순해 집니다. 

기본 매개변수의 기초

매개변수를 입력하지 않았을 때, 매개변수를 강제로 초기화하는 것을 기본 매개변수(Default Parameter)라고 부릅니다. 단순하게 '매개변수가 undefined자료형이라면, 값을 넣는다'라는 형태로 구성하면 됩니다.

기본 매개변수 예

function test(a, b, c) {
    if(!b) { b = 52; }
    if(!c) { c = 273; }

    console.log(a + ' : ' + b + ' : ' + c);
}

test(1, 2); // 1 : 2 : 273

매개변수를 입력하지 않은 변수C에 273이 들어가기 때문에 위 코드처럼 출력됩니다.

매개변수를 입력하지 않으면 뒤에 있는 매개변수에 값이 입력되지 않는 것이므로, 뒤에 있는 매개변수에만 조건문을 사용합니다.

단, 조건문은 조금 복잡하기 때문에 짧은 조건문으로 초기화하는 것이 일반적입니다.

짧은 조건문을 활용한 기본 매개변수

짧은 조건문 바로가기

짧은 조건문을 사용한 코드 변경 예

function test(a, b, c) {
    b = b || 52;
    c = c || 273;

    console.log(a + ' : ' + b + ' : ' + c);
}

test(1,2); // 1 : 2 : 273

짧은 조건문을 사용해 변경해도 위와 같은 값을 출력합니다.

앞의 값이 없으면(undefined자료형이라면), 뒤의 값을 사용하기 때문에 활용할 수 있는 코드입니다. 많이 활용되는 코드입니다.