10/13 JavaScript 문법 2

내일배움캠프 오늘 학습 내용

 

• JavaScript 문법 2주차 : ES6 문법, 함수를 객체로서의 활용하는 방법, 자료구조 Map, Set에 대해 배웠다.
• 1주차, 2주차에 해당하는 과제 수행 

문자열에 p와 y의 개수가 같으면 true, 아니면 false를 반환하는 함수

절댓값과 부호가 각각 담긴 배열을 통해 전체 배열의 합을 구하는 함수

배열 안의 문자열을 num번째 글자 우선으로 정렬하는 함수

 

 

ES6 문법

 

ES6은 2015년 발표된 JavaScript의 새 버전으로 새롭고 다양하게 활용되는 문법들이 발표되어 자주 사용되는 문법이다.

• 배열과 객체에 있는 원소들을 구조분해 할당이 가능하다. (Destructuring)
• 객체에 키와 value값이 같은 것을 할당할 시(변수에 저장된 값을 할당할 시) value 값은 생략 가능하다.
• ... : 전개 구문 문법
• func(a, b, ...args) : rest parameter. 매개변수의 개수가 정해져있지 않아도 함수 수행 가능
• Template literals : 문자열 사용시 " " 이 아닌 ` `을 사용. 여러 줄의 문자열이나 자바스크립트문을 수행할 수 있다. (${ })

 

객체로서의 함수

 

함수는 JavaScript에서 일급 객체라고도 부를 수 있다.

 

- 해당 기능

• 변수에 함수 할당 가능
• 함수를 인자로 다른 함수에 전달 가능
  

const sayHello = function() {
    console.log("hello");
}

// 콜백함수 : 매개변수로서 쓰이는 함수 : sayHello
// 고차함수 : 함수를 인자로 받거나 return하는 함수 : callFunction
function callFunction(func){
    func();
}

callFunction(sayHello);

 

• 함수를 return 가능

function createAdder(num){
    return function (x) {
        return x + num;
    };
}

const addFive = createAdder(5);
// 다음과 의미가 같다.
// addFive = function(x){
//     return x + 5;
// }

console.log(addFive(10));

 

• 객체 안에 함수 사용 가능

const person = {
    name: "han",
    age:31,
    sayHello: function(){                   //화살표 함수는 this를 바인딩하지 않음
        console.log("Hello", this.name);    //this : 자기 자신의 객체 가리킴
    }                       
}

 

• 배열의 요소로 함수 할당.  -> 각 인덱스에 해당하는 함수를 실행할 수 있음.

 

 

Map, Set

 

map , set : 데이터 자료구조 중 하나이다. 기존 자료구조보다 데이터를 효율적으로 처리 가능하다.

• map

key, value 값을 저장하는 자료구조. 다만 key에 어떤 데이터 타입도 전부 들어올 수 있다. (객체는 문자열만 가능하다. obj.name과 같이)

값 삽인은 set, 검색은 get. 반복하는 iterater 값으로 keys, values, entries를 사용할 수 있다. (for of 구문 사용 가능)

• set

key없이 value 값만 저장하는 자료구조. 중복을 허용하지 않는 집합 구조와 비슷하다. 배열에서 중복을 제거할 때 등 사용한다.