개발일지

JavaScript 이것저것 개념정리 본문

HTML,CSS,JavaScript

JavaScript 이것저것 개념정리

devbh 2020. 3. 12. 00:25
  • 논리 연산자 NOT -> AND -> OR 순서로 된다.
// 객체 함수 기본 설명1
const test = {
  name: "이름",
  age: 10,
  "test aa": "test" // 키값을 띄어쓰기가 가능하다.
};

const { name, age } = test; // 비구조화 할당
console.log(name);
console.log(age);
console.log(test["test aa"]) // 띄어쓰기된 키값을 부를 때는 배열을 부르는 것처럼 써야한다.
// 객체 함수 기본 설명2
const people1 = {
    name : '아무개',
    sound : '나 아무개야',
    say : function say(){ //say : function say() => say : function() 또는 say()로 사용가능하다.
        console.log(this.sound); // 만약 () => 화살표 함수로 만들면 this값을 찾지 못한다.
    }
}

const people2 = {
    name : '아무개2',
    sound : '나 아무개2야'
}

people2.say = people1.say;
people1.say(); // 나 아무개야 출력
people2.say(); // 나 아무개2야 출력

const peopleSay = people2.say;
peopleSay(); // 에러 발생 this의 값을 찾지 못 한다.
// getter
const numbers = {
    a: 1,
    b: 2,
    get sum() {
        console.log('sum 함수가 실행됩니다!');
        return  this.a + this.b;
    }
};

console.log(numbers.sum); // getter는 numbers.sum() 함수를 실행하는 것이 아니라 numbers.sum 으로 조회 할때 실행되는 것이다.
numbers.a = 5;
console.log(numbers.sum);
const dog = {
    _name: '멍멍이',
    get name(){
        console.log('_name을 조회합니다.');
        return this._name;
    },
    set name(value){
        console.log('이름이 바뀝니다.' + value);
        this._name = value;
    }
}

console.log(dog.name); // getter가 없으면 dog._name으로 호출
dog.name = '뭉뭉이';
console.log(dog.name);
const dog = {
    name : "멍멍이",
    sound : "멍멍",
    age : 2
}

console.log(Object.entries(dog)); // [Array[2],Array[2],Array[2]] => 각각 Array[2]에는 0: "name" 1: "멍멍이" 이런 형식으로 값이 들어있다.
console.log(Object.keys(dog)); // ["name","sound","age"]
console.log(Object.values(dog)); // ["멍멍이","멍멍",2]
// 배열 안의 값 변경
// 1.
const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];
for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]);
}

console.log(squared);

// 2. 
const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];

array.forEach(n => {
  squared.push(n * n);
});

console.log(squared);

// 3.
const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = n => n * n;
const squared = array.map(square);
console.log(squared);
// 배열 내장 함수
// indexOf
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index); // 2 출력

// findIndex
const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 2 출력

// find
const index = todos.find(todo => todo.id === 3);
console.log(index); // {id: 3, text: "객체와 배열 배우기", done: true} 출력

// filter
const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone); // [ { id: 4, text: '배열 내장 함수 배우기', done: false } ]; 출력

// splice
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(index); // [30]
console.log(numbers); // [10, 20, 40]

// slice
const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

// shift
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value); // 10
console.log(numbers); // [20, 30, 40]

// pop
const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value); // 40
console.log(numbers); // [10, 20, 30]

// unshift
const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); // [5, 10, 20, 30, 40]

// concat
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated); // [1, 2, 3, 4, 5, 6];

// join
const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 

// reduce
// 모든 값 더하기
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
  sum += n;
});
console.log(sum); // 15

// reduce 사용
const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);
// array.reduce((결과값, 현재 배열 값)=> ~~~, 초기값)
console.log(sum); // 15

// reduce 이용해서 평균값 구하기
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);
// array.reduce((결과값, 현재 배열 값, 인덱스 값, 자기 자신 배열) => {}, 초기값)
console.log(sum); // 3

// reduce 알파벳 개수 세기
const alphabets = ['a','a','a','b','c','c','d','e'];
const counts = alphabets.reduce((acc,cur) => {
    if(acc[cur]){
        acc[cur] += 1;
    }else{
        acc[cur] = 1;
    }
},{});
console.log(counts); //{a:3,b:1,c:2,d:1,e:1}

'HTML,CSS,JavaScript' 카테고리의 다른 글

웹 사이트 렌더링 순서 ( 수정중 )  (0) 2020.06.02
노드 개발 환경 설정  (0) 2019.12.28
Modules  (0) 2019.10.27
Enhanced Object Literals  (0) 2019.10.27
Arrow Function  (0) 2019.10.27
Comments