[Vanilla JS] ES6 문법 - 1 -

P1ush·2021년 5월 31일
0

TIL Vanilla JS

목록 보기
3/6

공부 날짜 : 2021-05-31

참고 자료


함수 (Function)


함수 생성 규칙

fucntion name (item1){
    code
}

ex)

function FunCoding(name){
    return 'hi' + name;
}
console.log(FunCoding('dave'));

return 생략

function FunCoding(name){
    console.log('hi' + name);
}
FunCoding('fun')



화살표 함수 (arrow function)

  • 함수 선언을 보다 간단하게 하기 위해 고안된 문법입니다.
  • 화살표 함수는 익명 함수입니다. (함수 이름이 없음)

아래와 같은 방식으로 쓸 수 있습니다.

let func = (함수인자) => expression

함수 호출 코드가 여러줄이라면 아래와 같이 중괄호를 추가합니다.

let func = (함수인자) => { expression }

코드가 여러줄 / 함수 인자가 있는경우

let func = (name) => {
    console.log('Hi' + name);
}
func('Dave')

// 결과 : HiDave

함수 인자가 없을경우

let func = () => {
   console.log('Hi');
}
func();



함수 생성 단축문법 3가지


  • function 키워드 생략
let f1 = function() {
    return 'hi';
}
let f1 = () => 'hi';

  • 함수 인자가 하나뿐이면 괄호 생략 가능
let f2 = function(age){
    return age * 2;
}
let f2 = age => age * 2;
console.log(f2(1));

  • 함수 코드가 한 라인이면, 중괄호 및 return 생략 가능
let f3 = function(item1,item2){
    return item1 * item2;
}
let f3 = (item1,item2) => item1 * item2;
console.log(f3(1));

빈 객체에 프로퍼티와 메소드 추가

const empty = {}; // 빈 객체 선언 

empty.name = 'dave'; 
empty.age = 10;
empty.get_data = () => { //함수
    return 1 + 2;
}

console.log(empty.name);
console.log(empty.age);
console.log(empty.get_data());

//결과 : dave 10 3

객체 안에 객체생성

const user = {
    age: 20,
    name: 'dave',
    get_data: () => { //함수
        return 1 + 2;
    }
};
console.log(typeof user , user); // 결과 : object {age: 20, name:'dave', get_data:ƒ}
console.log(user.age); // 20
console.log(user.name) // dave
console.log(user.get_data()); // 3

const people = {
    age: 10,
    name: 'dave',
    details: { //객체 안에 객체 생성
        hobby: "coding",
        major: "korea",
        getDetails: (item) => {
            return item * 2;
        }
    }
}

console.log(people.age,people.name); // 10 'dave'
console.log(people.details.hobby, people.details.major, people.details.getDetails(2)); // 인자값
// coding korea 4

0개의 댓글