Notice
Recent Posts
Recent Comments
Link
개발일지
JavaScript 이것저것 개념정리 본문
- 논리 연산자 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