javascript 2주차

정태수·2025년 2월 3일

각종 ES6 문법

  • 2015년도 발표 / 대규모 문법적 변경
1. 이전에는 var
let, const
재할당 여부가 둘의 큰 차이.

2. 화살표 함수

function add () {}

const add => () => {}

3. 삼항 연산자

condition ? true : false

4. 구조분해할당 destructuring
//배열이나 객체의 속성을 분해해서 할당

let [value1, value2] = [1, 'new']


let {name, age}= {
    name:'a',
    age: 30,
}

let user = {
    name:'a',
    age: 30,
}

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

console.log(newName, newAge) //a 30

단축 속성명 property shorthand

const obj = {
    name,
    age: newAge
}

왼쪽 변수와 오른쪽 실데이터 이름이 같다면 (name처럼)
생략 가능하다.

//전개구문 = spread operator

let arr = [1,2,3];

console.log(...arr)

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

let user = {
    age: 30,
    name: 'a'
}

let user2 = { ...user, sex:"남" }

console.log(user2)

//나머지 매개변수

function print(a,b,c, ...args) {
    console.log(a,b,c, ...args)
}

print(1,2,3,4,5,) //1 2 3 4 5

//템플릿 리터럴

`${}`


일급 객체로서의 함수


(1) 변수에 함수를 할당

// const sayHello = function hello() {
//     console.log('hello')
// }


(2) 함수를 인자로 다른 함수에 전달가능.

function callFunc(func) {
    func();
}

callFunc(sayHello) //hello

함수를 리턴.

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

const addFive = create(5);

console.log(addFive(10))

//일급 객체로써 함수

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

person.sayHello()

//화살표 함수는 this를 binding하지않는다.

//배열의 요소로 함수를 할당

const myArr = [
    function (a,b) {
        return a+b;
    } ,
    function (a, b) {
        return a-b;
    }
]

console.log(myArr[1](1,3))


//고차함수

function multiPly(num) {
    return function (x) {
        return x * num
    }
}

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

const multiPlyByTwo = multiPly(2)
const multiPlyByThree = multiPly(3)

console.log(multiPlyByTwo(5))
console.log(multiPlyByThree(5))

//Map 자료구조

const myMap = new Map();

myMap.set('key', 'value');

myMap.set('key1', 1)
myMap.set('key2', 2)
myMap.set('key3', 3)

console.log(myMap.keys())
console.log(myMap.values())

for(const key of myMap.keys()) {
    console.log(key)
}

<콘솔>
[Map Iterator] { 'key', 'key1', 'key2', 'key3' }
[Map Iterator] { 'value', 1, 2, 3 }
key
key1
key2
key3


console.log(myMap.size)
console.log(myMap.has('key2'))

//Set자료구조
//고유한 값만 저장 키 저장 x


const mySet = new Set();

mySet.add('value1');
mySet.add('value2');

console.log(mySet)
profile
프론트엔드 개발자

0개의 댓글