자바스크립트 알짜배기 - 1

2011년 자바스크립트를 처음 배웠을 때만 하더라도 ES3의 아주 거지 같은 환경이었는데, 1년 마다 정말 크게 변화하게 되어 예전 지식은 휴지통에 버려야 할 정도였다.

Typescrpit가 완전히 표준으로 자리잡는 일은 얼마 안 남았다고 생각한다.

 

그럼에도 자바스크립트 알짜배기를 정리하는 이유는 아무래도 새로운 프로젝트는 Typescript로 시작하더라도 그 베이스에는 자바스크립트가 있고 자바스크립트의 변화는 Typescript에 변화를 줄 수 밖에 없다 생각한다.

 

사실 나는 외우는 거에 재능이 없어서 자주 볼 수 있는 자료를 만드는 편이다.

 

참고로 2년 간의 스타트업 프로젝트 실패로 "코드 권태기(번아웃)"가 와서 6개월 동안 코드와 헤어졌었다. 

 

기억이 안 난다. 배열에 항목을 추가하기 위해 add() 메소드 써보았지만 add 메소드는 delphi에서나 쓰는 것이다... 

변수

• var, let, const
  • var 사용을 피합니다. 어휘적 유호범위를 가지기 때문에 코드 가독성이 좋지 못 합니다.
  • 이 중에서 const를 사용하는 것이 가장 좋고 그 다음이 let 입니다.
• const
  • 변하지 않는 값을 가지는 상수아닌 상수 같은 변수를 생성합니다.
  • const는 재할당 불가한 변수를 생성 할 뿐 이다. 참조하는 메모리 주소만 못 변경 할 뿐 입니다.
  • 같은 유효범위에 중복 변수를 선언 할 수 없습니다.
  • ^ECMAScript 6 == ^ ES2017
  • 가장 적은 일을 하기 때문에 코드를 읽게 쉽게합니다.
    • 즉, 해당 변수를 신경 쓰지 않아도 됩니다.
    • 100 줄 밑에 있어도 값은 동일합니다.
• let
  • 재할당이 필요한 경우 사용합니다.
  • 블록 유효 범위를 따릅니다.
  • 같은 유효범위에 중복 변수를 선언 할 수 없습니다.
  • 코딩 규칙으로 변경되지 않는 변수에는 const를... 변경되는 변수에는 let을 사용합니다.
    • 이러한 규칙으로 let 변수를 사용하면 변경 될 수 있음을 암시합니다.
  • ^ECMAScript 6 == ^ ES2017

연산자

• 펼침 연산자(...)
  • 단독으로 할당 연산에 사용할 수 없습니다.
  • 활용하기 나름... 코드 간결화 일등 공신

const crew = [
    'Wayne',
    'Dean',
    'Vicky',
    'Sera'
];

const recrew = [...crew];
console.log(crew);   // [ 'Wayne', 'Dean', 'Vicky', 'Sera' ]
recrew.sort();
console.log(recrew); // [ 'Dean', 'Sera', 'Vicky', 'Wayne' ]

 

배열

• filter(function) : array

const crew = [
    {
        name : 'Wayne',
        age : 27
    },
    {
        name : 'Dean',
        age : 30
    }
];

const recrew = crew.filter(man => man.age > 29);

console.log(crew);    //[ { name: 'Wayne', age: 27 }, { name: 'Dean', age: 30 } ]
console.log(recrew);  //[ { name: 'Dean', age: 30 } ]

 

• Object.keys() : array

const man1 = {
    name : 'wayne',
    age : 27,
    annual : 3
}

const man2 = {
    name : 'dean',
    age : 30,
    annual : 5
}

const total = {};
const stats = Object.keys(man1);

for(let i = 0; i < stats.length; i++){
    const stat = stats[i];
    if(stat != 'name'){
        total[stat] = man1[stat] + man2[stat];
    }
}
total['avgAge'] = total.age / 2;
total['avgAnnual'] = total['annual'] / 2;

console.log(total); //{ age: 57, annual: 8, avgAge: 28.5, avgAnnual: 4 }

 

• find(function) : 

const crew = [
    ['name', 'wayne'],
    ['age', 27]
]

const name = crew.find(attribute => {
    return attribute[0] === 'name'
});

console.log(name); // ['name', 'wayne']

 

• includes()

const names = ['wayne', 'dean'];

names.includes('wayne'); // true
names.includes('wayn');  // false

 

• slice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));     // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));  // ["camel", "duck"]
console.log(animals.slice(1, 5));  // ["bison", "camel", "duck", "elephant"]
console.log(animals);              // ['ant', 'bison', 'camel', 'duck', 'elephant']

 

• splice()

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.splice(3));      //[ 'duck', 'elephant' ]
console.log(animals.splice(2, 1));   //[ 'camel' ]
console.log(animals);                //[ 'ant', 'bison' ]

 

•