클래스, const 객체, 메서드, map 메서드

자바스크립트 클래스 개념

 

// 클래스를 쓴다. (옛날 방식)
function 기계(){
	this.q = 'consume';
    	this.w = 'snowball';
}

var nunu = new 기계();
var garen = new 기계();



// 클래스를 쓰지 않고 객체만 생성하였을 때
var nunu = {
	q: 'consume',
    	w: 'snowball'
}

var garen = {
	q: 'strike',
   	w: 'courage'
}

 

 

 

function 기계(구멍){
	this.q = 구멍;
    	this.w = 'snowball';
}

var nunu = new 기계('consume');
var garen = new 기계('strike');

 

nunu 의 출력결과는 기계 {q: "consume", w: "snowball"}

garen 의 출력결과는 기계 {q: "strike", w: "snowball"}

 

 

 

class Hero {
	constructor(구멍){
    	this.q = 구멍;
        this.w = 'snowball';
    }
}

 

클래스는 관습적으로 영어 대문자를 쓴다.

new Hero( )

 

 

 

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}


const rayPriceByPropertyName = ray.price;
console.log('프로퍼티명으로 접근 => '+ rayPriceByPropertyName);


const rayPriceByFunction = ray.getPrice( );
console.log('함수로 접근 => ' + rayPriceByFunction);

 

프로퍼티 값에 함수가 할당되어있다.

객체의 프로퍼티 값에 함수도 넣을 수 있다.

 

 

위에서 getPrice 라는 함수는 다음과 같이 호출할 수 있다.

 

const rayPriceByFunction = ray.getPrice( );
console.log( '함수로 접근 => ' + rayPriceByFunction );

 

 

 

 

 

아래와 같이 class로 객체를 생성하는 과정을 '인스턴스화' 라고 부른다.

 

const morning = new Car('Morning', 2000000);

 

class 를 통해 생성된 객체를 인스턴스라고 한다.

 

 

 

 

class 는 새로운 instance를 생성할 때마다 constructor( ) 메서드를 호출한다.

 

class Car {
	constructor(name, price) {
		this.name = name;
		this.price = price;
	}
}

 

 

• Car class의 instance를 생성할때마다 constructor 메서드가 호출된다.
• constructor() 메서드는 name, price 2개의 argument(인자)를 받는다.
• constructor() 메서드에 this 키워드를 사용한다. class의 실행범위(context)에서 this 는 해당 instance를 의미한다.
• constructor() 에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당한다.
• 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.
• 멤버 변수는 this 키워드로 접근한다.

 

 

 

 

 

---

const

 

const 로 선언된 변수는 값을 절대 수정할 수 없다. 

 

const a = 1;
a = 2;

 

를 시도하면 자바스크립트 오류가 난다.

 

 

 

 

 

 

그런데 const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능하다.

 

const mutableObj = {
  name: '객체'
};


mutableObj.name = '수정';
mutableObj.type = 'Object 타입';
console.log(mutableObj);


// { name: '수정', type: 'Object 타입'}

 

 

 

 

 

 

---

메서드

객체에 저장된 값이 함수일 때, 메서드라고 부른다.

 

console.log( );

 

 

"

console.log( ) 도 형태를 보니 객체인가 봅니다. 자바스크립트 어디에나 접근이 가능 했으니 global 객체입니다. console 다음에 dot(.)으로 프로퍼티를 접근했고, log 라는 키의 값은 함수인 것 같습니다. log는 console 이라는 객체의 메서드입니다. 객체에 메서드를 정의하려면 아래와 같이 할 수 있습니다.

"

 

 

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

methodObj.do();   // 메서드 호출은 이렇게

 

 

 

 

 

 

 

let nestedObj = {
	type: {
		year: '2019',
		'comment-type': [{
			name: 'simple'
		}]
	}
}

 

 

위에서 'simple' 을 출력하려면 어떻게 해야할까?

console.log(nestedObj.type['comment-type'][0].name);

 

 

 

• nestedObj.type 는 year, comment-type 이 있는 객체이다.
• nestedObj.type['comment-type'] 는 요소 1개인 배열이다.
• nestedObj.type['comment-type'][0] 첫 번째 요소인 객체를 가져온다.
• nestedObj.type['comment-type'][0].name 드디어 'simple'에 접근!

 

 

 

 

---

map 메서드

 

map 은 모든 배열의 아이템에 대해서 함수를 실행시키는 메서드이다.

그리고 나서 그 함수의 결과값으로 새로운 배열을 만든다. (그러나 기존의 배열이 변하지 않음)

 

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];
const smilingDays = days.map( )  // days 에 있는 모든 요일에 funciton 을 실행한다.

 

 

const smilingDays = days.map(potato => `smile ${potato}`);

["smile Mon", "smile Tue", "smile Wed", ... ]

 

 

 

 

 

이렇게 나온다. Arrow Function은 return 을 함축적으로 가지고 있기 때문이다.

보통의 function으로 만들고 싶다면 중괄호와 return 을 써주면 된다.

 

 

 

 

const smilingDays = days.map((day, index) => `#${index+1} ${day});

 

결과값이 ["#1 Mon", "#2 Tue", "#3 Wed", "#4 Thurs", "#5 Fri"]

 

 

 

 

const moreThan100 = nums => {
	return nums.map((x, index) => x>=100)
}

 

 

return 을 x>=100 앞에 적었고 뭐가 잘못됬는지를 몰라 한참 헤매었다....

 

Arrow Function은 return 을 함축적으로 가지고 있기 때문이다.

보통의 function으로 만들고 싶다면 중괄호와 return 을 써주면 된다.

 

앞서 배웠던 개념이었다. 다시 보고 생각해보자.

 

 

 

 

 

주의!

 

map 함수는 기존의 배열을 callbackFunction에 의해 새 배열을 만드는 함수이다.
그러니 기존의 배열이 변하지는 않는다.