개발일지(2023.05.22)

* JS 2주차

• ES6문법 : 2015년에 발표된 JS버전(대규모 문법적 향상 & 변경이 있었기에 언급)

* ES6 추가 기능

• 1. let, const : 호이스팅으로 인한 var문제점 해결 방안 제시(let- 재할당가능 / const - 재할당x)
• 2. arrow function : var add = function() {}; -> let add = (x) => {return 1;}; -> let add = x =>1;
• 3. 삼항 연산자 : condition ? result1 : result2 (참이면 result1, 거짓이면 result2 할당)
• 4. ★★★★★★구조분해할당(destructuring) : 구조를 반대로 찢어버린다(구조를 없애서 각각에 할당한다), 각각의 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 것(객체 안에 있는 각각의 속성(구조)들을 분해해서 하나하나 변수에 할당하는 것)
• 4-1. Array : ex) let [val1, val2] = [1, 'new', 4] // 우측 배열을 분해해 1을 val1값에 'new'를 val2 값에 할당 해줌,               ex2) let arr = ['val1', 'val2', 'val3']; let [a, b, c] = arr; // a에 val1, b에 val2, c에 val3를 할당 => 여기서 만약 let [a, b, c, d] = arr; 라면 d자리의 값은 없으므로 undefined로 출력! let [a,b,c,d=4]처럼 초기 값 세팅가능(initial value)
• 4-2. 객체 (key가 중요) ex1) let {name , age } = {name:'abc', age=30}; // 왼쪽 name에 'abc' & age에 30을 할당(string/number type), ex2) let user = {name:'abc', age=30}; let { name: newName, age: newAge } = user;  => name으로 출력하는 게 아니라 newName / newAge로 출력해야 한다!!
• 위와 결과 동일 (만약 let {name, age, birthday } = user; 이라면 birthday는 user에 값이 없으므로 undefined(마찬가지로 초기 값 가질수 있음)
• 5. 단축 속성명(Property shorthand) - ★★★진짜 많이 사용, JS에서 오브젝트는 key-value pair이고 오른쪽에 있는 value가 실직적 데이터(변수로 쓸 수 있음)인데, 이것이 왼쪽 key와 value의 값이 가끔 한 번씩 이름이 겹치는 경우가 있는데 이때는 과감히 생략이 가능함! ex) const name='abc'; const age=30; const obj = {name:name, age: age} -> {name, age}로 생략함! - 배열이랑 헷갈리면 안됨(객체의 단축 속성명임) // 만약 age:newAge라면 age로 생략이 안됨
• 6. ★★★★★★전개 구문(Spread Operator) : 기존에 있었던 객체의 중괄호를 풀어버리고 다 ☆퍼지게 한 다음에 이를 이용(destructuring과 더불어 가장 많이 사용!!) ex) let arr = [1, 2, 3]; console.log(...arr); //1 2 3으로 대괄호인 배열이 없어지고 전개가 되어버림 - 이 구조를 벗어버린 후 새로운 구조를 덧입혀야 할 때 사용!, ex2) let newArr = [...arr, 4]; console.log(newArr); // 출력 : [1, 2, 3, 4], 배열 1, 2, 3을 가져온거에 4를 추가로 더해 새로운 배열 만듬
• 6-1. 전개 구문(객체) : ex) let user = {name : 'abc', age: 30} let user2 = {...user} //user와 동일한 값 가짐 -> 본문이 뮤테이트 되지 않음
• 7. Rest parameter : 매개변수의 개수를 정확히 모를 때, ...args로 사용이 가능( 꼭 이걸로 정의를 해 줘야 나머지 args를 인식 할 수 있음) -> spread operator를 사용하지 않는다면 배열 형태로 나오게 됨. (Point는 args이다)

function exampleFunc(a, b, c, ...args) {     //추가적으로 arguments가 들어올 수 있다라고 명시

    console.log(a, b, c);

    console.log(...args);          //...을 빼면 배열 형태로 들어감 ex) console.log(args) / exampleFunc(1,2,3,4,5,6,7)      

                                                                                                                                     => [4, 5, 6, 7]

}

exampleFunc(1, 2, 3, 4, 5, 6, 7)

• 8. Template Literal : 엄청 많은 활용! ``(backtick)안에 JS가 들어 갈 수 있음 넣을 때 ${JS} 안에 넣고 사용! & 템플릿 리터럴은 멀티라인을 지원(기본 따옴표는 멀티라인 지원 x) - 개발자 측면에서 표현 할 수 있는 편리성★★★★★★
• 9. 일급 객체(First-class Object) : JS의 함수는 일급 객체로 불림, 다른 객체들에 일반적으로 적용이 가능한 연산을 모두 지원하는 객체(parameter, return, argument 등등) => 일급 객체로서의 함수는 변수가 되기도 하고 인자로 들어가기도 하고 return이 되기도 함(일급 객체로서의 중요성!), 함수를 매우 ★★★유연하게 사용할 수 있는것이 특징
• 9-1. 변수에 함수 할당 가능(함수가 마치 값처럼 취급됨 & 함수가 나중에 사용될 수 있도록 조치가 되었다.)
• 9-2. 함수를 인자로 다른 함수에 전달 가능 (callback함수 - 매개변수로써 쓰이는 함수(고차 함수의 한 종류, 인자를 받는 것에 해당) || 고차함수 - 함수를 인자로 받거나 return 하는 함수) 

function callFunction(func) {

    func();

}

const Hello = function() {

    console.log('hello')

}

callFunction(Hello); // 9번줄의 fuc로 Hello라고 저장된 함수가 전달이 됨

=>callFunction(Hello)는 callFunction(function() { console.log('hello')}); 와 동일 함

• 9-3. 함수를 반환 할 수 있다(return 자리에 함수 넣기 가능)

function createAdder(num) {

    return function(x) {

        return x+num;

    }

}

const addFive = createAdder(5);       //num을 5가 대체 => const addFive = function(x) { return x+5; } 와 동일

console.log(addFive(10));                  //15가 출력

* 일급 객체로서의 함수(2)

const person = { name : 'John', age : 31, isMarried : true, sayHello : function() { console.log(`hello, my name is ${this.name}`) }}

// const person = { name : 'John', age : 31, isMarried : true, sayHello : () => { console.log(`hello, my name is ${this.name}`) }} // 얘는 name이 undefined로 나옴!!(★★화살표함수는 this를 바인딩 하지 않는다! 상위 객체를 가리킴)

 

person.sayHello();

=> 객체 안에 함수를 넣음(person.sayHello() 출력 시, hello, my name is John이 출력!) - 객체의 this는 항상 자기 자신 객체를 가리킨다. (따라서 여기서의 this는 person이 된다!!

 

* 배열의 요소에 함수를 할당(실화냐.. 개 신기하네..)

const myArr = [

    function(a, b) {

        return a+b;

    }, function(a, b) {

        return a-b;

    }

];

console.log(myArr[0](2, 6));    //더하기 호출 2+6 =8 출력

console.log(myArr[1](10, 6));   //빼기 호출 10-6 = 4 출력

* 9-3 함수 반환 예제)

function multiplyBy(num) {

    return function(x) {

        return x *num;

    };

}

function add(x, y) {

    return x + y;

}

 

//리펙토링 한거 : multiplyBy함수를 만들어 반복되는 코드에 대한 처리를 하는 것

const multiplyByRTwo = multiplyBy(2); //= function (x) { return x*2};

const multiplyByRThree = multiplyBy(3); //= function (x) { return x*3};        

 

console.log(multiplyByRTwo(5));     // 2*5 반환 = 10

console.log(multiplyByRThree(5));  // 3*5 반환 = 15

const result = add(multiplyByRTwo(5), multiplyByRThree(10));   //2*5 + 3*10 = 40이 나오는 것

console.log(`Final => ${result}`);

• 10. Map&Set : JS에서 현실세계를 반영하는데 많이부족, 이를 프로그래밍적 부분 보완을 위해 등장한 추가 자료구조, Map&Set의 목적은 기존의 객체와 배열보다 데이터의 구성, 검색, 사용을 더 효율적으로 처리하기 위함
• 10-1. Map : key/value pair을 저장, 일반 객체에서의 key값은 무조건 문자형태이지만 Map은 key값에 어떠한 유형의 데이터 타입도 들어올 수 있음 => how? Map은 키가 정렬된 순서로 저장되기 때문이다.(기능으로는 검색, 삭제, 제거, 여부 확인이 있음), Map은 대량 데이터 처리에 사용을 하기 위해 반복적인 부분이 상당히 중요(이를 위한 메소드 존재 - keys, values, entries(이 메소드는 iterator (->iteraor을 가지고 있다면 for of 사용할 수 있다)를 가지고 있다) /이 메소드에 for of를 사용해 데이터를 순회하게끔 처리), Map에 데이터를 넣을 때에는 myMap.set('key', 'value') 형태로 넣고 검색 시 myMap.get('key')형태로 검색(set&get은 항상 페어)
• 10-1-1. 반복을 위한 메소드 : keys(), values(), entries() //세 개 다 iterator 형태를 가지고 있기에 for of 사용 가능!

const myMap = new Map();

myMap.set('one', 1);

myMap.set('two', 2);

myMap.set('three', 3);  //Map에 데이터 넣기! 

console.log(myMap.get('one'));  // 키 기반으로 Map의 데이터 검색(value값인 1 출력)

// console.log(myMap.keys());      //[Map Iterator] {'one' , 'two', 'three' } 가 출력, 얘를 이용해서 for of문을 돌려보기

for (const key of myMap.keys()) {

    console.log(key);

}                                                   //key가 하나하나하나 들어가면서 데이터를 처리(key값을 출력 one two three)

// console.log(myMap.values());

for (const value of myMap.values()) {

    console.log(value);

}                                                    //value 하나하나가 console.log 안에 배정이 되는 것(value 값 출력 1 2 3)

// console.log(myMap.entries());      // 각 key-value를 배열로 묶어 전체를 객체로 감쌌음

for (const entry of myMap.entries()) {

    console.log(entry)

}             //각각의 entry인 [key, value]를 하나하나 console.log안에 들어가 배정(['one', 1] ['two', 2] ['three', 3] 출력

              //여기서 만약 i의 key나 value를 개별적으로 활용하려면 i[0] / i[1]로 활용(각각 key / value이다)

console.log(myMap.size) //(길이) : Map크기 확인(여기서는 3)

console.log(myMap.has("two"))//- key기반 검색 myMap에서 two라는 키가 있는지 : Map에 해당 값이 있는지 확인(true)

• 10-2. Set : 고유한 값을 저장하는 자료구조이다, Map과 다르게 key값은 저장 하지 않고 value값만 저장함! & 값이 중복되지 않는 유일한 요소로만 구성되어 있음(Unique), 기능으로 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인 이 있음(Set을 수학의 집합이라 생각하면 편함) /Set을 이용해 교집합과 차집합을 흉내(simulate)낼 수 있다!

let mySet = new Set();

let sorted = [];

let i = 0;

mySet.add('value1');     //Map과 다르게 key는 넣지 않고 value만 넣음!(집합이기에 & 값이 중복안됨 - 중복되면 합쳐짐)

mySet.add('value2');

mySet.add('value2');     //이렇게 중복된 값을 추가하면 중복 값으로 인식하기에 Set은 변하지 않음(size또한 5)

mySet.add('value3');

mySet.add('value5');

mySet.add('value8');        //Set에 데이터 넣기

console.log(mySet.size)     //Set크기(길이)로 여기서는 5(6개가 add되었어도 value2가 중복값이므로

console.log(mySet.has('value1'));      //true

console.log(mySet.has('value2'));      //true

console.log(mySet.has('value3'));      //Set이 값을 가지고 있는지 확인, true

//Iterator

for(const value of mySet.values()){

    console.log(value)

    sorted[i] = value

    i++;

}                  //얘는 키를 저장하지 않기에 Map과 다르게 선택지가 없음=> value만 출력하기에 mySet.values()로만 가능함

console.log(sorted)    // [ 'value1', 'value2', 'value3', 'value5', 'value8' ] 출력

 

* 숙제 : 문자열로 구성된 리스트 Strings와 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하기, Strings = ['sun', 'bed', 'car'] & n = 1 이면 각 단어의 인덱스위치가 1인 문자 'u', 'e', 'a'를 기준으로 Strings 정렬

let Strings = ["abce", "abcd", "cdx"];

let n = 2;

function sort_String(list, number) {                        // 두개를 매개변수로 전달

    let i=0;

    for(a in list) {

        list[i] = list[i].slice(number, number+1) + list[i];     //각 배열에 n위치 인덱스를 slice해 맨앞에 붙임

        i++;

    }

    list.sort();                                                           //배열을 정렬시킴

    i=0;

    for(a in list) {

        list[i] = list[i].substring(1, list[i].length);         //배열에서 맨 앞에 붙였던 문자 제거

        i++;

    }

console.log(list)

}

sort_String(Strings, n);          // 결과 값 : [ 'abcd', 'abce', 'cdx' ]

=> 처음에 문제를 풀 때 앞에서 배운 Set이나 Map을 활용하려 했다가 너무 복잡해져서 힌트를 보고 풀었음.

  1. 문자열 앞에 인덱스에 해당하는 문자를 붙임 2. 사전순으로 정렬 3. 정렬된 배열의 가장 앞 글자 제거

 

※ 바로 푸는 방법을 찾지 못해서 좀 아쉬움을 느꼈고 내일 AWS 배포 오류 마치고 강의 나가면서 프로그래머스 문제 풀어볼 예정!!