[D+38] 함수 고급, 객체

 

 

국비지원 D+38

-  함수 고급, 객체 -

 

---

 

함수고급

• Arrow 함수

- 화살표함수라고도 불리며 전통적인 함수 표현방식을 간단하게 만든 슈가코드이다.

- 화살표함수는 표현방식이지 메소드가 아니다.

// 기본 함수 표현방식
const numbers = [ 10, 20, 30, 40, 50];
const newNumbers = numbers.map(function(value, index, array) {
	return value + 5;
    });
    
console.log(newNumbers);

// 화살표 함수 표현방식
const numbers = [10, 20, 30, 40, 50];
const newNumbers = numbers.map((value, index, array) => value + 5);

console.log(newNumbers);

 

• Method Chaining

- 임시객체를 사용해서 메소드를 연속적으로 호출하는 코딩기법이다.

- 메소드에 대해 한번 실행된 결과물은 컴파일러가 임시변수를 사용해 담아둔 다음에 그다음 '.' 뒤에 붙어있는 메소드를 실행하는 방식이다.

- 단, 과도한 메소드 체이닝은 코드의 복잡도를 오히려 올리기 때문에 3번정도까지만 사용하는 것이 좋다.

// 배열의 각 요소에 5를 더한 뒤 30보다 큰 값만 뽑아내시오.
const numbers = [27, 40, 25, 30, 77];

const newNumbers = numbers.map((value) => value + 5)
			   .filter((value) => value > 30);
                            
console.log(newNumbers);

// [32, 45, 35, 82]

 

• 즉시 호출

- 임시객체를 사용해서 함수의 선언과 동시에 호출하는 기법이다.

- 복수개의 <script>에 대한 독립성을 보장한다.

(function dummy(x)
{
	console.log('Dummy!');
})(10);

 

 

---

객체

• 개념

- 프리미티브 타입을 제외한 나머지 데이터 타입의 베이스 인스턴스이다.

- 자바스크립트에서 거의 모든 객체는 기본으로 Object의 파생 인스턴스 이다.

- "{ }"로 데이터들을 감싸며 key-value형식으로 데이터를 가지고 있다.

- key-value형식에서 key는 객체 안에서 유니크한 값이어야한다.

 

• 객체형의 선언 및 호출

-  "{ }"안에 key-value 형식으로 넣어서 선언해준다.

- 객체안에 value값에는 primitive type 뿐만 아니라 객체형도 들어갈 수 있다.

- 객체안의 값을 호출하고 싶을때에는 "객체명['key이름']" 또는 "객체명.key이름"으로 값을 불러올 수 있다.

const product = 
{
	name : 'mouse',
    type : 'wireless',
    color : 'black',
    buttons : 6,
    scroll : true
};

console.log(product.name);
console.log(product['type']);

 

• 객체 속성의 변경

-  속성변경 : 변경하고 싶은 속성을 불러와 값을 새로 입력하면 된다.

- 속성 추가 : 속성 변경과 같은 방식이며 속성이 없다면 자동으로 추가된다.

- 속성의 삭제 : delete를 사용해 삭제할 수 있다.

// 속성 변경
product.buttons = 8;

// 속성 추가
product.ligth = true;

// 속성 삭제
delete product.light;

 

• 객체형 메소드

-  객체에 포함되는 함수를 의미한다.

- this : 해당메소드를 가지고 있는 객체의 참조값을 나타낸다.

- 화살표 함수의 경우 this를 사용할 수 없기 때문에 가급적 메소드에서는 사용하지 않는다. → 기존 함수의 경우 this를 콘솔에 찍으면 해당 메소드를 가지고 있는 객체가 나오지만, 화살표함수의 경우 this를 콘솔에 찍어서 확인해보면 메소드를 소유하고 있는 객체가 아니라 가장 상위객체인 window를 나타내기 때문에 this를 사용할 수 없다.

const product = 
{
	name : 'mouse',
    type : 'wireless',
    color : 'black',
    buttons : 6,
    scroll : true,
    getName : function() {
    	return this.name;	
        // getName을 소유하고 있는 객체 product의 name --> 'mouse'
    }
};

console.log(product.getName());		// mouse

 

• 객체를 만드는 여러가지 방법 ( Object literal )

- ES6에서 Object literal이라는 객체를 만드는 새로운 방법이 등장하였다.

 

1. 속성(property) 축약

- 속성값으로 변수를 사용하는 경우 변수이름과 속성이름이 같다면 키를 생략할 수 있다.

 

2. 메소드 축약

- 메소드의 이름과 키를 동일한 이름으로 사용할 경우에 메소드를 축약하여 표현할 수 있다.

 

3. 계산된 속성이름

- 표현식을 사용해 key를 동적으로 생성할 수 있다.

 

4. 객체의 순회

- Object는 배열과 달리 인덱스를 가지고 있지 않기 때문에 순서성이 없다는 특징을 가지고 있어 기존 for문을 사용할 수 없다.

- for~in을 사용해서 마치 배열처럼 반복문을 사용할 수 있다.

 

• Primitive type을 Object type으로 변환하기

기존에 우리가 사용하는 Number형과 같은 프리미티브 타입같은 경우 스택에 메모리를 잡아서 데이터값을 넣어서 값을 보관했다.

그런데 데이터값을 스택이 아닌 힙에다가 잡고 싶을 때에는 new라는 키워드를 사용해 데이터 값을 힙에다가 저장할 수 있다.

 

만약 객체 안에 있는 값을 불러오고 싶을 때에는 valueOf를 사용해 객체안에 있는 값을 불러올 수 있다.

 

• Primitive type의 일시적 Object type 변환

우리가 str.length에서 .length는 str의 메소드를 의미한다.

그런데 기본 자료형 같은 경우는 메소드나 속성을 가질 수 없다.

하지만 우리가 왼쪽의 사진처럼 코드를 작성해주면 컴파일 하면서 컴파일러가 str에서 문자열을 입력할때 new를 붙여서 str를 일시적으로 객체화시켜서 메소드를 사용할 수 있게해 개발자에게 편의성을 제공한다.