본문 바로가기

html+CSS+JS

스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #11 - 메소드/for…in 반복문/for…of 반복문/다차원 배열

반응형
#11회차
메소드, for…in 반복문, for…of 반복문

 

1. 메소드(Method)

- 객체의 속성 값에 함수가 할당된 경우, 해당 속성을 메소드(method)라고 부릅니다

// 형태
// {메소드 이름(methodName): function(){동작 부분}, {methodName: function(){동작 부분},};
let insa = {
	sayAn: function(){
    	console.log('안녕!');
    },
	sayHaseyo: function(name){
    	console.log(`안녕하세요, ${name}!`);
    },
	sayHello: function(){
    	console.log('헬로!');
    }
};

// 실행시 형태
// objectName.methodName();
insa.sayAn(); // 안녕!
insa[sayHaseyo]('킹지'); // 안녕하세요, 킹지!

 

메소드를 사용하는 이유

: 함수 이름이 중복되지 않도록 유의하면서도 같은 유형의 코드를 짜야할 때, 객체별 분류가 가능함 (아래 예시)

let korean = {
	sayHi: function(){
    	console.log('안녕!');
    }
};
let english = {
	sayHi: function(){
    	console.log('Hello!');
    }
};

korean.sayHi(); // 안녕!
english.sayHi(); // Hello!

 

 

2. for…in 반복문 (객체 필요)

- 객체의 property개수만큼 실행 코드를 반복

- 객체의 property name을 for문의 변수에 순서대로 할당해주는 방식

let me = {name: 'KingJI', bornYear: 2021, isVeryFantasic: true};

// 형식
// for(변수 in 객체) { 동작 부분 }
for(let k in me){
	console.log(k);
    console.log(me[k]);
}

// name
// KingJI
// bornYear
// 2021
// isVeryFantasic
// true

 

정수형 property name을 사용하는 경우

: property name 중 정수(숫자)를 먼저 오름차순으로 정렬하고, 다른 프로퍼티들을 추가한 순서대로 정렬

: 정수가 string 형태이든 numer 형태이든 상관없음

let test = {
	3: '정수3',
    name: 'KingJI',
    '1': '정수 1',
    bornYear: 2021,
    2.5: '소수 2.5'
};

for(let k in test){console.log(k);}
// 1
// 3
// name
// bornYear
// 2.5

* 배열도 객체의 일종이기는 하지만 부적합하고, index를 사용하고 싶으면 for문이 더 적합합니다.

 

 

 

3. for…of 반복문 (배열 필요)

- 배열의 length만큼 실행 코드를 반복

- 배열의 값을 for문의 변수에 순서대로 할당해주는 방식

let thisYear = ['KingJI', 2021, 'wasHard'];

// 형식
// for(변수 in 배열) { 동작 부분 }
for(let v of thisYear){	console.log(v); }

// KingJI
// 2021
// wasHard

 

 

4. 다차원 배열 (multidimensional array)

- 배열 값에 또다른 배열이 있는 경우

- 배열 또한 객체이기에 배열을 넣을 수 있음

let twoDimensional = [
	[1,2],
    [3,4]   
];

console.log(twoDimensional[0][1]); // 2

가로, 세로 나열(엑셀 같은 분류) 같은 곳에서 활용하기 좋음!

 

 

 

 

밀린 복습 찬찬히...2222 머리 빠개질 거 같으니 그만...

 

반응형