프론트엔드 개발일지 #11- Javascript(ES6 신문법, 일급객체 함수)

ES6 신 문법

2015년도 이전 => var를 사용했다.

• let(변수) const(상수)

const a = 1;
a = 2; //재할당 안됨. 오류

let b = 1;
b = 3; //재할당 가능. 3

• 화살표 함수

function add() {

}

var add = function add() {

}

//위처럼 기본 함수 표현식이 있다면, 
//이걸 지금처럼 화살표 함수로 쓸 수 있다.

var add = () => {
    return 1;
}

var daa = () => 1;

• 삼항 연산자

condition ? true인 경우 : false인 경우

console.log(treu ? '참' : '거짓'); //참
console.log(false ? '참' : '거짓'); //거짓
console.log( 1 === 1 ? '참' : '거짓'); //참
console.log(1 !== 1 ? '참' : '거짓'); //거짓

구조 분배 할당
배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

• 배열의 경우

let [value1, value2] = [1, new]
console.log("1", value1); //1
console.log("2", value2); //new

let arr = ["value1", "value2", "value3"];
let [a, b, c] = arr;
console.log(a); //value1
console.log(b); //value2
console.log(c); //value3

let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr;

console.log(d); // undefined

let arr = ["value1", "value2", "value3"];
let [a, b, c, d = 4] = arr;

console.log(d); //4

• 객체인 경우

let user = {
    name: "nbc",
    age: 30,
};

let {name, age} = user;

console.log("name =>", name); //name => nbc
console.log("age =>", age); // age => 30

• 새로운 이름으로 할당

let user = {
    name: "nbc",
    age: 30,
};

let { name: newName, age:newAge } = user;

console.log("newName =>", newName); //nawName => nbc
console.log("newAge =>", newAge); //newAge => 30

let {name, age, birthday} = user;
console.log(name); //nbc
console.log(age); //30
console.log(birthday); //undefined

let {name, age, birthday = "today"} = user;
console.log(name); //nbc
console.log(age); //30
console.log(birthday); //today

단축 속성명

const name = nbc;
const age = 30;

const obj = { name, age };
//const obj = { name:name, age: age };

전개 구문

destructureing과 가장 많이 사용되는 ES6 문법!

let arr = [1, 2, 3];
console.log(arr); //[1, 2, 3]
console.log(...arr); //1 2 3

let newArr = [...arr, 4];
console.log(arr); //[1, 2, 3]
console.log(...arr); //1 2 3 4

//객체에서 적용
let user = {
    name: 'nbc',
    age: 30,
}

let user2 = {...user};

console.log(user);//{name: 'nbc', age: 30 }
console.log(user2);//{name: 'nbc', age: 30 }

나머지 매개 변수

function eampleFunc (a, b, c, ...args) {
    console.log(a, b, c);
    console.log(...args);
}
console.log(1, 2, 3); // 1 2 3
console.log(args); // [4, 5, 6 7]

exampleFunc = [ 1, 2, 3, 4, 5, 6, 7];

템플릿 리터럴

const testValue = "안녕하세요!"
console.log(`Hello World ${testValue}`); //Hello World 안녕하세요!
console.log(`
    Hello
        My name is JavaScript!

        Nice to meet you!
    `); 
    //Hello
    //My name is JavaScript!

    //Nice to meet you!

---

일급객체로서의 함수

1. 변수에 함수를 할당 할 수 있다.

함수를 마치 값으로 취급한다.
함수가 나중에 사용 될 수 있도록 조치가 되었다.

const sayHello = function () {
    console.log('Hello!');
}

2. 함수를 인자로 다른 함수에 전달 할 수 있다.

2-1.콜백함수 : 매개변수로서 쓰이는 함수
2-2.고차함수 : 함수를 인자로 받거나 return한 함수

function callFunction (func) {
    //매개 변수로 받은 변수가 사실 함수다.
    func();
}

const sayHello = function () {
    console.log('Hello!');
}

callFunction(sayHello); //Hello!

3. 함수를 반환 할 수 있다.

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

const addFive = creatAdder(5);
//const addFive = function(5) {
//      return x + 5;
//};
console.log(addFive(10)); //15

4. 객체의 요소로 함수 할당.

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

//sayHello: function () {
//    console.log(`Hello, my name is ${this.name}`)
//},
//이 부분을 화살표 함수로 바꾼다면,
//sayHello: () => {console.log(`Hello, my name is ${this.name}`} //this.name이 undifined가 나왔다면 사실

person.sayHello(); //Hello, My name is John

5. 배열의 요소로 함수 할당

const myArr = [
    function(a, b) {
        return a + b;
    }, //0번째 요소
    function(a, b) {
        return a - b;
    },//1번째 요소
];

console.log(myArr[0](1, 3)); //4
console.log(myArr[1](10, 7)); //3

function multiplyBy(num) {
    return function(x) {
        return x * num;
    };
}

function add(x, y) {
    return x + y;
}

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

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

console.log(multiplyByTwo(10)); // 20
console.log(multiplyByThree(10)); //30

const result = add(ultiplyByTwo(5), ultiplyByThree(10));
console.log(`FINAL => ${result}`); // FINAL => 40

---

여기서 제일 헷갈렸던 건 화살표 함수의 개념이 아직 덜 잡힌 느낌이 컸다.
그리고 아직 함수가 익숙하지 않아서 그런지 예제를 좀 많이 풀어봐야겠단 생각이 들었고, 이 예제들을 어디에서 풀어 볼 수 있을지에대한 고민이 많아졌다.
개념은 이해가 가는데 막상 내가 만들고 싶은 함수를 글로 적어놓고,
만들어봐라하면 아직 너무 낯설고 어디서부터 적어내야 할 지 모르는 것 같다
어떤 조건문이나 반복문을 사용해야 한다는 건 알겠는데
그것의 이름들을 정하고 코드로 적어내는게 아직 많이 낯설다ㅠㅠ