[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(1) JavaScript - Getter/Setter, 배열, for..of/in

수강한 클립명 && 수강 인증샷

(1) 15. 객체 - Getter와 Setter 함수

(2) 16. 배열

(3) 19. 반복문 - for...of, for...in

 

Getter 와 Setter 함수

getter : 특정 값을 조회하고자 할 때 사용합니다.

setter :특정 값을 설정하고자 할 때 사용합니다.

 

코드 예시.

const numbers {
    // (1) 명칭 중복 방지를 위해 _사용.
    _a: 1,
    _b: 2,
    sum: 3,

    calculate() {
        console.log('calculate 실행');
        this.sum = this._a + this._b;
    },

    get a() {
        return this._a;
    },
    get b() {
        return this._b;
    }

    set a(value) {
        this._a = value;
        this.calculate();
        // (2) 값을 설정할 때마다 sum을 최신화 해주기 위해 calculate() 실행.
    }

    set b(value) {
        this._b = value;
        this.calculate();
    }
};

console.log(numbers.sum);  // 3 출력
numbers.a = 5; // 'calculate 실행' 출력
numbers.b = 7; // 'calculate 실행' 출력
numbers.a = 9; // 'calculate 실행' 출력

console.log(numbers.sum); // 16 출력

// (3) 조회할 때마다 계산하는게 아니라 값이 바뀔때 마다 계산하기 때문에 조금 더 효율적인 코드이다. (재사용)

(1) 변수 명칭에 대한 중복 방지를 위해 _을 사용했습니다.

 

(2) 값을 Setter 함수를 사용하여 설정해주게 되면 변수 sum의 내용을 최신화합니다.

 

(3) (2)의 대한 이유입니다.

 

 Setter 함수를 이용하여 값을 설정해줄 때마다 calculate()를 호출해주기 때문에, 함수를 재사용함으로써 좀 더 효율적으로 코드를 작성할 수 있습니다.

 

 만약 sum을 변수가 아닌 Getter함수를 이용하여 호출하게 된다면, 매번 sum의 값을 구할 때마다 값을 더해줌으로 비효율적이라고 할 수 있습니다.

 

 

배열

- 배열은 여러 개의 항목들이 들어있는 리스트와 같습니다.

- 배열은 [대괄호]를 이용하여 선언합니다. 배열 안에는 "문자열", 숫자, {객체} 등등 넣을 수 있습니다. 섞어서 넣는 것도 가능합니다.

- 배열의 인덱스는 0부터 시작합니다. 이 인덱스를 활용하여 값을 조회, 수정, 추가, 삭제 등을 할 수 있습니다.

! 대표적인 Array 내장함수

Array.isArray()

- 인자로 전달받은 객체가 배열이면 true, 그렇지 않으면 false를 리턴하여 해당 객체가 배열인지 확인 합니다.

- 유사배열은 false를 반환합니다.

 

push()

- 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환합니다.

 

pop()

- 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다.

 

unshift()

- 배열의 첫 번째 자리에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환합니다.

 

shift()

- 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환합니다.

 

splice()

- 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용합니다. 리턴값은 삭제한 배열 요소입니다. 삭제한 요소가 없더라도 빈 배열을 반환합니다. 예시 코드를 보여드리겠습니다. 

arr.splice(start, deleteCount, el);

/* 배열 임의의 위치에 요소 추가 제거 */
// start - 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소 개수, 제거하지 않을 경우 0
// el - 배열에 추가될 요소

var arr = [1, 5, 7];
arr.splice(1, 0, 2, 3, 4);  // return : [], arr: [1, 2, 3, 4, 5, 7]
arr.splice(1, 2);           // return : [2, 3], arr: [1, 4, 5, 7]

reverse()

- 배열 요소의 순서를 뒤집습니다. 

 

sort()

- 배열 내부의 요소를 정렬하는데 사용합니다. sort함수는 기본적으로 배열의 요소를 문자열로 반환한 후 오름차순으로 정렬합니다. 예시 코드를 보여드리겠습니다. 

var arr = [11, 1, 115, 42, 12];
arr.sort();    //-> [ 1, 11, 115, 12, 42 ]
// 이렇게 사용할 경우 위 예제와 같이 의도하지 않은 결과를 돌려줄 경우가 있습니다. 
// 이는 내부적으로 숫자를 문자열로 변환한 후 값을 비교하기 때문입니다.


var arr = [11, 1, 115, 42, 12];
// 비교함수
arr.sort(function(a, b) { return a - b; });
//-> [ 1, 11, 12, 42, 115 ]


var arr = [
  {name: "Dinah"},
  {name: "Jack"},
  {name: "Alice"},
  {name: "Ada"}
];

// name 프로퍼티의 값을 기준으로 알파벳 순으로 정렬
arr.sort(function(a, b) { return a.name > b.name });  

- 비교함수는 두개의 인자 (a, b) 를 받으며 각각 비교할 첫 번째, 두 번째 요소가 됩니다. 비교함수는 배열 요소의 가장 처음 두 요소부터 순차적으로 비교해가며 정렬을 실행합니다.

 

- 비교함수 "function(a, b) { }" 의 반환값에 따라 정렬 규칙은 아래와 같습니다.

• 결과값이 0보다 작으면 a가 낮은 색인으로 정렬됩니다.

• 결과값이 0이면 a와 b의 순서를 바꾸지 않습니다.

• 결과값이 0보다 크면 b가 낮은 색인으로 정렬됩니다.

• ex ) 위의 예에서 11과 1을 비교할 경우 a - b 는 10으로 0보다 크므로 b 가 앞으로 이동하게 됩니다.

 

 

반복문 - for...of, for...in

for of

- 배열 내부를 접근합니다. 

- 헷갈리기 쉬운 문법입니다. 헷갈린다면 자바 처럼 일반 for문을 사용하는 것도 괜찮습니다.

const numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
    console.log(number);
} 

for (let i=0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// 둘이 같음. 10 20 30 40 50 출력.

 

for in

- 객체 내부를 접근합니다. 

- 유용한 문법입니다. 

const doggy = {
    name : '멍멍이',
    sound: '멍멍',
    age : 2
};

for (let key in doggy) {
    
    console.log(key);
    // name, sound, age 출력.
    
    console.log(`${key}: ${doggy[key]}`);
    // name: 멍멍이, sound: 멍멍, age: 2 출력.
}

 

Object 클래스

- 코드로 보여드리겠습니다.

const doggy = {
    name : '멍멍이',
    sound: '멍멍',
    age : 2
};

console.log(Object.keys(doggy));
// ["name", "sound", "age"] 출력.

console.log(Object.values(doggy));
// ["멍멍이", "멍멍", 2] 출력.

console.log(Object.entries(doggy));
// [Array[2], Array[2], Array[2]]
/* 0: Array[2]
	0: "name"
	1: "멍멍이"
   1: Array[2]
	0: "sound"
	1: "멍멍"
...*/

 

 

 

강의 링크

 

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스