[Node.js 2팀] 1장 자바스크립트( Introductions ~ Objects )

 

 
1번째 블로그는 codecademy에서 javascript에 해당하는 내용 전부이기에 쉬운 내용을 제외하고 주로 작성자가 헷갈렸거나, html/css/js 학교 수업에서 배우지 않았던 내용을 위주로 작성하려고 함. 
주로 Iterator(반복자)와 Object(객체)의 내용이 많음을 참고하길 바람.
 
 
 

 
 

1. 변수

   1) +로 변수와 문자열을 연결하는 방법

let myPet = 'armadillo';
console.log('I own a pet ' + myPet + '.'); 
// Output: 'I own a pet armadillo.'

   2) console.log에 변수를 문자열에 넣을 때 ${}로 {}안에 넣는 방법

let myName="yeoni"
consolog.log("My Name is ${myName}");

 
 

---

2. 비교 연산자

   1) 둘 다 모두 일때 (&&)

let mood = 'sleepy';
let tirednessLevel = 6;
if(mood==='sleepy'&& tirednessLevel>8){
  console.log('time to sleep')
}
else{
  console.log('not bedtime yet')
}

 
   2) 둘 중에 하나 일때 (||)

if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

 
   3) 주어진 문장의 반대를 말할 때 (!)

let excited = true;
console.log(!excited); // Prints false

let sleepy = false;
console.log(!sleepy); // Prints true

 

---

3. switch case 문

    else if문은 여러 조건을 확인해야 하는 경우 문장은 훌륭한 도구.
    프로그래밍에서 우리는 종종 여러 값을 확인하고 각각에 대해 다르게 처리해야 하는 경우가 많음. 

let groceryItem = 'papaya';

if (groceryItem === 'tomato') {
  console.log('Tomatoes are $0.49');
} else if (groceryItem === 'papaya'){
  console.log('Papayas are $1.29');
} else if (groceryItem === 'lime'){
  console.log('limes are $1.49');
} else {
  console.log('Invalid item');
}

   

    만약 else if에 해당하는 조건이 엄청 많아진다면 어떨까?
코드가 상당히 길어질 것임 이를 방지하기 위한 문법이 바로 switch문  
위의 코드블럭이 else if문을 사용한 코드이고 아래의 코드블럭은 switch문을 사용한 코드
간단하게만 보더라도 아래 코드가 더 읽기에도 보기에도 편하다는 것이 느껴질 것!

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

// Prints 'Papayas are $1.29'

 

---

4. 화살표 함수의 간결화

 
    1) 화살표 함수

const squareNum = (num) => {
  return num * num;
};

 
     2) 화살표 함수 간단 버전

const squareNum = num => num * num;

 
 

---

5. 배열 객체 함수

• push: 배열의 끝에 요소를 추가

const chores = ['wash dishes', 'do laundry', 'take out trash'];

chores.push('washingdish','cleanRoom');

• pop: 배열의 마지막 요소를 삭제하고 반환

const newItemTracker = ['item 0', 'item 1', 'item 2'];
const removed = newItemTracker.pop();
console.log(newItemTracker); 
// Output: [ 'item 0', 'item 1' ]
console.log(removed);
// Output: item 2

• unshift: 배열의 시작에 요소를 추가
• shift: 배열의 시작 요소를 삭제하고 반환
• slice: 시작과 끝 범위 요소를 잘라 새로운 배열 생성
• indexOf: 찾고자 하는 요소의 인덱스번호 찾기

const groceryList = ['orange juice', 'bananas', 'coffee beans', 'brown rice', 'pasta', 'coconut oil', 'plantains'];

groceryList.shift(); // 배열의 0번째 요소 삭제

console.log(groceryList);

groceryList.unshift('popcorn'); //배열의 0번째에 요소 추가

console.log(groceryList);

console.log(groceryList.slice(1, 4)); //배열 나누기

console.log(groceryList);

const pastaIndex = groceryList.indexOf('pasta'); //찾고자 하는 요소의 인덱스번호 찾기

console.log(pastaIndex);

• splice: 특정 위치에 요소를 추가하거나 삭제
• sort: 배열의 요소를 정렬

 

---

6. 반복자(Iterators)

    1) forEach : 배열의 각 요소를 반복해서 어떤 동작을 수행할 때 사용

const fruits = ['mango', 'papaya', 'pineapple', 'apple'];

fruits.forEach(fruitItem => console.log('I want to eat a '+fruitItem));

/*
I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a apple
*/

 
    2) filter :  조건을 만족하는 요소만 걸러내서 새로운 배열을 반환

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 

const shortWords = words.filter(word => {
  return word.length < 6;
});

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']

 
    3) map : 배열의 각 요소를 변형해서 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5]; 

const bigNumbers = numbers.map(number => {
  return number * 10;
});

console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]

 
    4) findIndex : 조건에 맞는 첫 번째 요소의 인덱스를 반환 ( 만약 조건에 맞는 요소가 없으면 -1 반환 )

const jumbledNums = [123, 25, 78, 5, 9]; 
const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});

console.log(lessThanTen); // Output: 3 
console.log(jumbledNums[3]); // Output: 5


const greaterThan1000 = jumbledNums.findIndex(num => {
  return num > 1000;
});

console.log(greaterThan1000); // Output: -1

 
    5) reduce : 배열을 하나의 값으로 줄일 때(누적) 사용  
        여기서는 accumulator와 currentValue가 매개변수로 존재

• accumulator: 지금까지 누적된 값
• currentValue: 현재 배열에서 꺼낸 요소

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
})

console.log(summedNums) // Output: 17

       
       여기에서는 accumulator+currentValue를 반환해주는 형태
       summedNums는 0(acc)+1(cur)->1(acc)+2(cur)-> 3(acc) +4(cur)->7(acc)+10(cur)->17의 순서로 작동
 
    6) some : 배열 안에 하나라도 조건을 만족하는 요소가 있는지 확인해 만족하는 게 하나라도 있으면 true를, 없다면 false를 반환

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

console.log(words.some(word => {
  return word.length < 6;
}));

//result: true

 
    7) every : 배열의 모든 요소가 조건을 만족하는지 확인하여 모두 만족하면 true, 아니라면 false를 반환

const words = ['unique', 'uncanny', 'pique', 'oxymoron', 'guise'];

const interestingWords = words.filter((word) => {return word.length > 5});

console.log(interestingWords.every((word) => {return word.length > 5}));
//result: true

 
 

---

8. 객체 (Object )

    1) 객체의 기본 구조
        객체는 주로 key와 value로 구성되어있는 구조입니다. key와 value세트는 ,로 연결

let 구조명 ={
    key(키): value(값),
    key2 : value2 
};

 
    2) 객체 안의 키에 접근하는 법
        객체 안의 키값을 가져오거나 변경하려면 해당 키값을 부를 때 특정한 방법이 필요
        ① dot notation (점 연산자)
            ● 객체. 키(프로퍼티); 
            ●  값 고칠 시 -> 객체.키='바꿀 값'; 
            ●  프로퍼티 및 값을 추가할 시에도 값 고칠 때와 동일
            ●  값 삭제 시 delete 객체.프로퍼티; 

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth'
spaceship.color = 'gold'; // Returns 'silver'

 
        ② bracket notation (브라켓 표기법)
            ●  객체 [프로퍼티]; 
            ●  값 고칠 시 -> 객체 [프로퍼티] = '바꿀 값';
            ●  프로퍼티 및 값을 추가할 시에도 값 고칠 때와 동일
            ●  값 삭제 시 delete 객체 [프로퍼티]; 

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};
spaceship['Active Duty'];   // Returns true
spaceship['Fuel Type'];   // Returns 'Turbo Fuel'
spaceship['numCrew'];   // Returns 5
spaceship['!!!!!!!!!!!!!!!'];   // Returns undefined
spaceship['homePlanet']= 'moon';

 
 
    3) 메서드 ( Method )
        객체에 저장된 데이터가 함수인 경우를 메서드라고 부름

const alienShip = {
  invade: function () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

//ES6에서는 ': function' 작성 안해도 됨. 아래의 코드 참고

const alienShip = {
  invade () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

 
 
    4) 중첩 객체 (Nested Objects)
        간단하게 말하자면 객체 안에 객체가 안에 들어가 있는 구조
        대부분의 실무 데이터(API 응답 등)가 중첩 객체 형태로 오기 때문에 필수 개념

        [출처] 📘 Day 10 – 자바스크립트 객체 심화 완전 정리: 중첩 객체, 메서드, 키 제어, 복사까지|작성자 zini

const spaceship = {
  telescope: {
    yearBuilt: 2018,
    model: '91031-XLT',
    focalLength: 2032 
  },
  crew: {
    captain: { 
    //crew객체 내에 captain 객체가 들어감
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') } 
    }
  },
  engine: {
    model: 'Nimbus2000'
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: 'HD'
    },
    'back-up': {
      battery: 'Lithium',
      terabytes: 50
    }
  }
};

 
    5) 참조에 의한 전달( Pass by Reference )
        함수를 호출할 때, 변수의 값이 아닌 원본 변수의 메모리 주소(참조)를 넘겨주는 방식
        이 방식의 핵심은 함수 안에서 매개변수를 수정하면, 그 함수를 호출할 때 사용된 원본 변수까지 함께 변경됨!

const spaceship = {
  homePlanet : 'Earth',
  color : 'silver'
};
 
let paintIt = obj => {
  obj.color = 'glorious gold'
};
 
paintIt(spaceship);
 
spaceship.color // Returns 'glorious gold'

 
 
위의 경우에는 paintIt 함수를 만들고 spaceship을 매개변수로 갖는 paintIt함수를 실행
그로 인해 원래의 spaceship의 value도 같이 변했음.
하지만 아래의 경우는 이와 다름.
아래는 spaceship을 복사한 것을 tryReassignment에 매개변수로 넣은 것이기에 원래의 spaceship값이 변하지 않음
 

let spaceship = {
  homePlanet : 'Earth',
  color : 'red'
};
let tryReassignment = obj => {
  obj = {
    identified : false, 
    'transport type' : 'flying'
  }
  console.log(obj) // Prints { 'identified': false, 'transport type': 'flying' }
 
};
tryReassignment(spaceship) // The attempt at reassignment does not work.
spaceship // Still returns { homePlanet: 'Earth', color: 'red' };

 
 
    6) 객체 내에서의 Loop (Looping Through Objects)
        루프는 조건이 충족될 때까지 코드 블록을 반복하는 프로그래밍 도구
        숫자 인덱싱을 사용하여 배열을 반복하는 방법을 배웠지만, 객체의 키-값 쌍구조를 반복하는 방법은 모름
        JavaScript는 for...in 구문을 사용하여 객체를 반복하는 대체 솔루션을 제공
 

let spaceship = {
  crew: {
    captain: { 
      name: 'Lily', 
      degree: 'Computer Engineering', 
      cheerTeam() { console.log('You got this!') } 
    },
    'chief officer': { 
      name: 'Dan', 
      degree: 'Aerospace Engineering', 
      agree() { console.log('I agree, captain!') } 
    },
    medic: { 
      name: 'Clementine', 
      degree: 'Physics', 
      announce() { console.log(`Jets on!`) } },
    translator: {
      name: 'Shauna', 
      degree: 'Conservation Science', 
      powerFuel() { console.log('The tank is full!') } 
    }
  }
}; 

// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

/* result
captain: Lily
chief officer: Dan
medic : Clementine
translator : Shauna
*/

 
    7) this
        this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
        간단하게 생각하면 this.무언가 라고 할 때 무언가에 해당하는 것이 자신이 속한 객체에 존재하여 그 무언가에 대한
        value(값)을 가리키는 것

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};

goat.diet(); 
// Output: herbivore

 
 
    8) privacy
        특정 언어에는 객체에 대한 개인정보 보호 기능이 내장되어 있지만 JavaScript에는 이러한 기능이 없음.
        오히려 JavaScript 개발자는 다른 개발자에게 속성과 상호 작용하는 방법을 알리는 명명 규칙을 따름.
        그 중 하나가 변수에 _(언더바=underscore) 사용하기!
        변수앞에  _가 붙으면 관습적으로 값(속성)을 바꾸면 안된다는 것.

const bankAccount = {
  _amount: 1000
}

 
 
    9) Getter와 Setter
        Getter는 객체의 속성값을 반환하는 메서드고 Setter는 객체의 속성값을 설정, 변경하는 메서드
        Getter와 Setter는 거의 세트라 봐도 무방

const user = {
	name: 'inpa',
    age: 50,
    
    getAge() {
    	return user.age;
    },
    setAge(value) {
    	// 만일 나이 값이 100 초과일 경우 바로 함수를 리턴해서 user.name이 재설정되지 않도록 필터링
    	if(value > 100) {
        	console.error('나이는 100을 초과할 수 없습니다.')
            return;
        }
        	
    	user.name = value;
    }
}

user.setAge(400); // 나이는 100을 초과할 수 없습니다.

코드 출처:  [JS] 📚 자바스크립트의 Getter & Setter 완벽 정리 
 
       Getter와 Setter를 사용하는 이유?
       Getter와 Setter를 사용하면 객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉을 가능하게 해주어 보안을 강화할 수 있음
       코드의 안전성과 유지보수성을 높일 수 있고 옳지 않은 값을 넣으려고 할 때 방지할 수 있음.( 위 코드에서의 if문)
 
       주의해야 할 점
      속성이 게터/세터 함수와 동일한 이름을 공유할 수 없음
      동일한 이름을 공유하게 되면메서드를 호출하면 무한 호출 스택 오류가 발생함
      한 가지 해결 방법은 위의 예제에서와 같이 속성 이름 앞에 밑줄을 추가하는 것!
 

//무한 호출 스택 오류 방지

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName() {
    if (this._firstName && this._lastName){
      return `${this._firstName} ${this._lastName}`;
    } else {
      return 'Missing a first name or a last name.';
    }
  }
}

// To call the getter method: 
person.fullName; // 'John Doe'

 
 
    10) 팩토리 함수( Factory Function )
          class나 new 키워드를 사용하지 않고, 단순히 객체를 생성해서 반환(return)하는 함수
          글로만 들으면 이해가 안갈 수 있으니 코드 예시를 보며 설명
 

//팩토리 함수가 없을 때

const monster1 = {
  name: '슬라임',
  level: 1,
  attack: function() {
    console.log(`${this.name}이(가) 공격합니다!`);
  }
};

const monster2 = {
  name: '고블린',
  level: 3,
  attack: function() {
    console.log(`${this.name}이(가) 공격합니다!`);
  }
};

 

위 코드는 팩토리 함수를 사용하지 않을 때의 모습
비슷한 구조인데 여러번 작성해야 함...
 
아래 코드는 팩토리 함수를 사용할 때의 모습
기본 구조를 설정하고 들어가는 변수값만 변경해서 함수 호출하는 형태로 코드가 매우 간결

 

// 몬스터를 만드는 공장(Factory) 함수
const createMonster = (name, level) => {
  return {
    name, // Property Value Shorthand 사용!
    level,
    attack() {
      console.log(`${this.name}이(가) 공격합니다!`);
    }
  };
};

// 공장을 사용해서 몬스터 객체를 쉽게 생성
const slime = createMonster('슬라임', 1);
const goblin = createMonster('고블린', 3);
const dragon = createMonster('드래곤', 10);

slime.attack();   // "슬라임이(가) 공격합니다!"
goblin.attack();  // "고블린이(가) 공격합니다!"

 
 
 
    11) 속성값 단축 구문
          객체를 정의할 때 변수의 이름과 객체의 속성(property) 이름이 같으면, 하나로 축약해서 쓸 수 있는 방법

//단축 구문 사용 전

const monsterFactory = (name, age) => {
  return { 
    name: name,
    age: age
  }
};

 

위 아래를 비교해보면 아래의 코드가 적을 것이 줄어드는 것으로 보임.
해당 예시 코드는 간단해서 크게 차이가 나지 않아보이지만 실제로 코드를 사용할 때는 코드가 길어지기에
이런 방법을 사용하면 코드를 간략하게 작성할 수 있음

//단축 구문 사용 후

const monsterFactory = (name, age) => {
  return { 
    name,
    age 
  }
};

 
 
12) 구조 분해 할당( Destructured Assignment )
배열이나 객체와 같은 복잡한 자료 구조에서 원하는 값만 개별 변수에 추출하여 할당할 수 있게 해주는 방법
이것도 코드를 보면서 설명
 
예시1)

//구조 분해 할당 사용 전

const person = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

// 객체의 속성 값을 변수에 할당하기 위해 반복적인 코드 작성
const name = person.name;
const age = person.age;
const job = person.job;

console.log(name); // 'Alice'

 

위의 코드에서는 const key= 객체.키; 형태로 일일이 다 작성해주고 콘솔로 찍어야 원하는 값이 나옴
그러나 아래 코드에서는 const {key1, key2,key3}=객체; 로 하고 바로 콘솔로 찍어서 사용 가능함

//구조 분해 할당 사용 후

const person = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

// name, age, job 키에 해당하는 값이 자동으로 각 변수에 할당됨
const { name, age, job } = person;

console.log(name); // 'Alice'
console.log(age);  // 25
console.log(job);  // 'Developer'

 
 
예시2 )

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

//사용전
const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania'

 

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

 

---

★ KEYWORD  

• Conditional ~ Scope ) #if-else #elseif #논리연산자 #전역변수 #함수선언 #truthy_falsy
• Arrays ~ Iterator ) #switch-case문 #화살표함수 #배열메서드 #reduce #반복자
• Object) #Getter #Setter #팩토리함수 #this #구조분해할당

---

♬ QUESTIONS

빈칸QUIZ

1. 배열의 각 요소를 반복해서 어떤 동작을 수행할 때 사용하는  _______ 는 반복자 중 하나이다.
2. 속성을 바꾸면 안된다는 것을 알리기 위해 쓰는  _____ 는 개발자들끼리 정한 관습이다.
3. 배열 메서드 중 주어진 조건을 모두 만족했는지 알아보는 ________ 이 있고, 하나라도 만족하는지 알아보는 _______이 있다.
4. 비교 연산자 중 주어진 두 조건이 모두 만족하는 지 알아볼 때 사용하는 연산자는  _____ 이다.
5. 배열 객체 함수에서 pop과 shift는 둘 다 요소를 삭제하는 것과 관련된 함수다. 이 두 개의 차이는 pop은 요소의  ____에 있는 것을, shift는 요소의 ______ 에 있는 것을 삭제한다.

 

코드작성QUIZ

1. '변수 num이 8보다 크고 20보다 작을 때'를 코드로 구현하시오. if에서 ()안에 들어갈 부분만 작성하면 됩니다.
2. 아래 코드에서 console.log을 했을 때 콘솔에 찍히는 값과 동일하게 나오도록 하는 코드를 작성하시오. 
(물론 아래 코드와 다른 방식으로)

const user = {
  name: 'Alex',
  age: 30,
  job: 'Programmer'
};

console.log(user['name']);

 

 
 

---

<빈칸QUIZ 답>
     1. forEach
     2. __ (underscore)
     3. every, some
     4. &&
     5. 끝, 첫번째
 
<코드작성QUIZ 답>
    1. num>8 && num<20
    2. 7번째 줄을 console.log(user.name);

---

 Editor yeonyeon