1. ES6 문법 소개 및 실습 1

JavaScript/2주차

1. ES6 문법 소개 및 실습 1

tnals634 2023. 5. 23. 11:01

1. 각종 ES6 문법 소개

- JavaScript 버전 중 하나

- 2015년에 발표

- 보다 쉽고 효율적으로 코드 작성

- 대규모 문법적 향상 및 변경

-1. let , const

- 이건 직접 코드를 작성해서 확인해보겠습니다.

- 2015년도 이전 => var

- 1. es6 => let, const

- 1_2. arrow function

- 첫번째 방법

function add () {
	//메인로직
}

- 두번째 방법

var add = function () {
	//메인 로직
}

- arrow 화살표 방법

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

또는 return 이 있는 한줄이면

var add = (x) => 1;

- 1_3. 삼항 연산자

//condition ? true : false;
(1 === 1) ? "참" : "거짓";

출력 : 참

- 1_4. 구조분해할당

- desctructuring ( de + structure + ing)

- de = not , structure = 구조

- 구조를 찢어버려서 할당한다.

- 배열이나 객체의 속성을 가지고한다.

- 1. 배열의 경우

let [val1, val2] = [1,"new"];
console.log("1",val1);
console.log("2",val2);

출력 : 1 1

2 new

let arr = ['val1', 'val2', 'val3'];
let [a,b,c] = arr;
console.log(a)
console.log(b)
console.log(c)

출력 : val1

val2

val3

let arr = ['val1', 'val2', 'val3'];
//이렇게 변수가 하나 더 있는경우 자바스크립트가 자동으로
//없다는것을 인식해 undefined를 넣어준다.
let [a, b, c, d] = arr;

출력 : val1

val2

val3

undefined

let arr = ['val1', 'val2', 'val3'];
//d의 값이 undefined일 경우 4라는 값을 넣어준다.
//그렇지 않고 값이 있을 경우엔 4가 아닌 그값을 넣어준다.
let [a, b, c, d = 4] = arr;

d값이 없을 경우

출력 : val1

val2

val3

let arr = ['val1', 'val2', 'val3', 'val4'];
//d의 값이 undefined일 경우 4라는 값을 넣어준다.
//그렇지 않고 값이 있을 경우엔 4가 아닌 그값을 넣어준다.
let [a, b, c, d = 4] = arr;

arr에 val4가 있어 d값에 할당 되는 경우

출력 : val1

val2

val3

val4

- 2. 객체인 경우

// 2. 객체인 경우
let user = {
    name: "abc",
    age: 30
};

let {name,age} = user;
console.log("name =>", name); //string
console.log("age =>",age); //number

객체인 경우는 키값이 중요하다.

이번엔 객체를 새로운 이름으로 할당하는 방법입니다.

//새로운 이름으로 할당하는 방법
let user = {
        name: "abc",
        age: 30
    };

//name이라는 값을 가져올건데 newName이라는 변수로 가져올꺼다.
let {
    name: newName,
    age: newAge
} = user;
//그래서 값을 가져오려면 아래와 같이 작성해야한다.
console.log("newName => ",newName);
console.log("newAge => ",newAge);

객체도 배열과 마찬가지로 객체내에 값이 없는것을 가져오려고 하면 undefined를 반환해준다.

let user = {
        name: "abc",
        age: 30
    };
//birthday는 user에서 값이 없다
let {name, age, birthday} = user;
console.log(name);
console.log(age);
console.log(birthday);

출력 : abc

undefined

마찬가지로 아래와 같이 값을 넣어주면 그 값이 나온다.

birthday 가 defined인 경우

let user = {
        name: "abc",
        age: 30
};
// string을 넣어줬다.
let {name, age, birthday = "5월7일"} = user;
console.log(name);
console.log(age);
console.log(birthday);

출력 : abc

5월7일

birthday가 값이 있는 경우

let user = {
        name: "abc",
        age: 30,
        birthday: "9월10일"
};
let {name, age, birthday = "5월7일"} = user;
console.log(name);
console.log(age);
console.log(birthday);

출력 : abc

9월10일