1. nodejs.js
console.log('안녕하세요. node.js 입니다')
2. function.js
function sum(num1, num2){
console.log('sum() 호출');
return num1 + num2;
}
const result = sum(10, 3);
console.log(result);
console.log('-------------------')
// 함수의 메모리 주소 전달하는 방법
const add = sum;
console.log(sum(10,3));
console.log(add(10,3));
console.log('-------------------')
// 함수의 작성팁
// 조건식이 있을 때 조건을 만족하지 않은 경우를 함수 도입부분에서 모두 처리 후 함수를 미리 종료
function print(num){
if(num < 0) return;
console.log(num);
}
print(10);
print(-5);
console.log('-------------------')
// 매게변수의 기본값은 무조건 undefinded
// arguments: 함수의 전달된 인수에 해당하는 값을 array 형태의 객체로 반환
function total(num1, num2){
console.log(num1);
console.log(num2);
console.log('arguments: ', arguments);
console.log('arguments[0]: ', arguments[0]);
console.log('arguments[1]: ', arguments[1]);
return num1 + num2;
}
console.log(total());
console.log(total(10, 3));
// 콜백함수 활용
const calc_add = (a,b) => a + b;
const calc_multipy = (a,b) => a * b;
console.log(calc_add(10,3));
console.log(calc_add(10,3));
// calculater(num1, num2, action)
function calculater(num1, num2, action){
if(num1 < 0 || num2 < 0) return;
const result = action(num1, num2);
console.log(result);
return result;
}
calculater(4, 2, calc_add);
calculater(4, 2, calc_multipy);
3. object.js
const Rucy = {
name: '루시',
age: 14,
'weight': 3.5,
['height']: 0.7,
['owner-name']: '김사과'
}
console.log(Rucy.name);
console.log(Rucy.weight);
console.log(Rucy.height);
// console.log(Rucy.owner-name);
console.log(Rucy['owner-name']);
Rucy.family = '포메라니안';
console.log(Rucy.family);
console.log(Rucy['family']);
console.log(Rucy);
delete Rucy['owner-name'];
console.log(Rucy['owner-name']);
console.log(Rucy);
console.log('-------------------')
// 동적으로 프로퍼티에 접근하는 함수
function getValue(obj, key){
return obj[key];
}
console.log(getValue(Rucy, 'age'));
// 동적으로 요소를 추가하는 함수
function addKey(obj, key, Value){
obj[key] =Value;
}
addKey(Rucy, 'owner-name', '김사과');
console.log(Rucy);
// 동적으로 요소를 삭제하는 함수
function deleteKey(obj, key){
delete obj[key];
}
deleteKey(Rucy, 'owner-name');
console.log(Rucy);
console.log('-------------------')
// 객체 생성 함수 만들기
//좌표 객체 만들기
const x =0;
const y =0;
const coord = {x, y}
console.log(coord)
// 이름, 나이를 전달하여 객체로 만들어주는 함수 만들기
function makeObj(name, age){
return {name, age};
}
console.log(makeObj('김사과', 20));
console.log('-------------------')
// 리터럴 표기법으로 객체 만들기
const apple = {
name: '김사과',
display: function(){
console.log(`${this.name}: 🍎`)
}
}
const banana = {
name: '반하나',
display: function(){
console.log(`${this.name}: 🍌`)
}
}
console.log(apple);
apple.display()
console.log(banana);
banana.display()
// fruit 생성자를 만들고 위 결과와 같은 동일한 결과를 출력하는 객체를 만들어보자
// fruit(name, emoji)
// const apple = new Fruit('apple', '🤩');
//console.log(apple);
// apple.display();
function Fruit(name, emoji){
this.name = name;
this.emoji = emoji;
this.display = () => {
console.log(`${this.name}: ${this.emoji}`)
}
}
const apple2 = new Fruit('apple','🍎');
const banana2 = new Fruit('banana', '🍌');
console.log(apple2);
apple2.display();
console.log(banana2);
banana2.display();
4. class.js
class Fruit{
// static
// 정적 프러퍼티 및 메서드를 생성
// 클래스 레벨 메소드에서는 this를 참조할 수 없음
static count_fruits = 10;
static makeBanana(){
return new Fruit('banana', '🍌');
}
constructor(name, emoji){
this.name = name;
this.emoji = emoji;
}
display = () => {
console.log(`${this.name}: ${this.emoji}`)
}
}
const apple = new Fruit('apple', '🍎');
console.log(apple);
apple.display();
console.log('-------------------')
console.log(Fruit.count_fruits)
const banana = Fruit.makeBanana();
console.log(banana);
console.log('-------------------')
// 객체지향 프로그래밍의 은닉성
// private
class Dog {
#name; // private
#color;
constructor(name, color){
this.#name = name;
this.#color = color;
}
// 프러퍼티명과 setter 프러퍼티메서드의 이름은 일치할 필요 없음
set name(value){
console.log('set', value);
this.#name = value;
}
get name(){
return this.#name;
}
set color(value){
console.log('set', value);
this.#color = value;
}
get color(){
return this.#color;
}
run = () => {
console.log(`${this.#color} 색상의 강아지 ${this.#name} 달립니다`)
}
#eat = () => {
console.log(`${this.#name} 사료를 먹습니다`)
}
myEat = () => {
this.#eat();
}
}
const Rucy = new Dog('루시' , '흰색');
console.log(Rucy);
console.log(Rucy.name);
// set 프러퍼티가 실행
Rucy.name = '뽀미';
// get 프러퍼티가 실행
console.log(Rucy.name);
Rucy.run();
Rucy.myEat();
console.log('-------------------')
/*
문제
카운터 만들기
카운터를 0으로 값을 초기화 한 뒤 하나씩 값이 증가하는 메서드를 구현한 클래스를 만들어보자.
단, 객체 생성시 값이 0보다 작을 경우 0으로 초기화를 시키고 그 외의 값은 엽력한 값으로 설정. 또한 프러퍼티에 값을 직접 불러오거나 설정할 수 없음
const cnt = new Counter(10); // 10
cnt.increment(); // 11
cnt.increment(); // 12
const cnt = new Counter(-1); // 0
cnt.increment(); // 1
cnt.increment(); // 2
*/
class Counter {
#value;
constructor(value){
if(isNaN(value) || value < 0){
this.#value = 0;
}else{
this.#value = value;
}
}
get value(){
return this.#value
}
increment = () => {
this.#value++;
}
}
const cnt = new Counter(-1);
console.log(cnt.value);
cnt.increment();
cnt.increment();
console.log(cnt.value);
5. inherit.js
class Animal {
constructor(color){
this.color = color;
}
eat(){
console.log('먹습니다');
}
sleep(){
console.log('잡니다!');
}
}
class Dog extends Animal {
constructor(color){
super(color);
}
play() {
console.log('놉니다!')
}
// 오버라이딩
eat(){
console.log('맛있게 먹습니다!')
}
}
const Rucy = new Dog('흰색');
console.log(Rucy);
Rucy.eat();
Rucy.sleep();
Rucy.play();
/*
문제
정직원, 아르바이트생을 나타낼 수 있는 클래스를 설계
부모 클래스: Emplyee
자식 클래스: FullTimeEmployee, PartTimeEmployee
직원의 정보: 이름, 부서명, 한달 근무 시간
급여: 정직원(일 200,000), 아르바이트(일 100,000원)
매달 직원들의 정보를 이용해서 한달 급여를 계산하는 메서드를 구현(calculatePay)
한달의 근무일수는 21일로 함
const kim = new FullTimeEmployee('김사과', '개발팀');
const ban = new PartTimeEmployee('반하나', 'QA팀');
console.log(kim.calculatePay());
console.log(ban.calculatePay());
*/
class Emplyee {
static daysPerMonth = 20;
constructor(name, department, payRate){
this.name = name;
this.department = department;
this.payRate = payRate;
}
calculatePay(){
return this.payRate * Emplyee.daysPerMonth;
}
}
class FullTimeEmployee extends Emplyee {
static PAY_RATE = 200000;
constructor(name, department){
super(name, department, FullTimeEmployee.PAY_RATE);
}
}
class PartTimeEmployee extends Emplyee {
static PAY_RATE = 100000;
constructor(name, department){
super(name, department, PartTimeEmployee.PAY_RATE);
}
}
const kim = new FullTimeEmployee('김사과', '개발팀');
const ban = new PartTimeEmployee('반하나', 'QA팀');
console.log(kim.calculatePay());
console.log(ban.calculatePay());
6. iterator.js
const arr = [1, 2, 3, 4, 5]
console.log(arr.values());
console.log(arr.entries());
console.log(arr.keys());
const iterator = arr.values();
while(true){
const item = iterator.next();
if(item.done) break;
console.log(item.value);
}
for(let item of arr){
console.log(item);
}
7. iterable.js
function iterable(){
let index = 0;
let data = [1, 2, 3, 4];
return {
next(){
if(index < data.length){
return { value: data[index++], done: false};
} else {
return { value: undefined, done: true};
}
}
}
}
let i = iterable();
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());
console.log(i.next());
8. spread.js
// 원시값과 객체갑의 비교
// 원시값: 값에 의한 복사가 일어남
// 객체값: 참조에 의한 복사(메모리 주소)
function display(num){
num = 10;
console.log(num); // ?
}
const value = 5;
display(value);
console.log(value) // ?
console.log('----------')
// 객체의 값을 변경하는 것은 좋지 않은 알고리즘
function displayObj(obj){
obj.age = 14;
console.log(obj);
}
const Rucy = {name:'루시', age:10};
displayObj(Rucy);
console.log(Rucy);
// 객체를 복사하여 age를 변환하고 해당 객체를 반환
function changeAge(obj){
return { ...obj, age: 6};
}
PPomi = changeAge(Rucy);
console.log(Rucy);
console.log(PPomi);
console.log('----------');
function add(num1, num2, num3){
return num1 + num2 + num3;
}
console.log(add(10, 20, 30));
const nums = [10, 20, 30];
console.log(add(nums[0], nums[1], nums[2]));
console.log(add(...nums));
console.log('----------');
const fruits1 = ['🍎', '🍉'];
const fruits2 = ['🍌', '🍓'];
let arr = fruits1.concat(fruits2);
console.log(arr);
arr = [...fruits1, ...fruits2];
console.log(arr);
arr = [...fruits1, '🍕', ...fruits2];
console.log('----------');
console.log(arr);
const apple = {name:'김사과', age:20, address: {si:'서울시', gu:'서초구', dong:'양재동'}};
console.log(apple);
const new_apple = {...apple, job: '프로그래머'};
console.log(apple);
console.log(new_apple);
console.log('----------');
const fruits = ['🍈','🍉','🍊','🍌','🍍'];
const [fruit1, fruit2, ...others] = fruits;
console.log(fruit1);
console.log(fruit2);
console.log(others);
console.log('----------');
function sendEmoji(){
return ['🍈','🍉','🍊','🍌','🍍'];
}
const [f1, f2, f3, f4, f5]= sendEmoji();
console.log(f1);
console.log(f2);
console.log(f3);
console.log(f4);
console.log(f5);
console.log('----------');
console.log(new_apple);
function display({name, age, address, job}){
console.log('이름', name);
console.log('나이', age);
console.log('주소', address);
console.log('직업', job);
}
display(new_apple);
console.log('----------');
const {name, age, pet='루시', address, job: hobby} = new_apple;
console.log(name);
console.log(age);
console.log(pet);
console.log(address);
console.log(hobby);
console.log('----------');
const component = {
name: 'Button',
styles: {
size: 20,
color: 'black'
}
};
function changeColor({styles: {color}}){
console.log(color);
}
changeColor(component);
'웹 개발' 카테고리의 다른 글
28. 자바스크립트 다양한 출력들6 (0) | 2024.04.23 |
---|---|
27. 자바스크립트 고급 정리2(node.js) (0) | 2024.04.23 |
25. 자바스크립트 고급 정리1(node.js) (0) | 2024.04.18 |
24. 자바스크립트 다양한 출력들4 (0) | 2024.04.18 |
23. 자바스크립트 기본 정리4 (0) | 2024.04.18 |