[Node.js 1] 1장 ~ 3장 자바스크립트 복습

 

 

 

 

 

 

 

• 변수 선언

1. var 

- 새 변수를 생성하거나 선언한다.

- myName처럼 이러한 방식으로 대문자를 사용하는 것을 Camel Casing 이라고 한다.

 

2. let 

- 변수에 다른 값을 다시 할당할 수 있다.

- 변수에 값을 할당하지 않고도 변수를 선언할 수 있으며, 변수는 undefined과 같이 자동으로 초기화된다.

 

3. const

- 상수 변수를 선언한다.

- 상수 변수는 선언 시 값을 할당 해야 한다.

 

! 변수를 다시 할당해야 하는 경우 let를 사용하고 그렇지 않으면 const 을 사용한다.

 

 

 

 

 

• 템플릿 리터럴

ES6 버전의 JavaScript에서는 템플릿 리터럴을 사용하여 문자열에 변수를 삽입하거나 보간 할 수 있다. 

 

1.  템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)을 사용한다.

 

const myPet = 'cat';

console.log(`I own a pet ${myPet}.`);

•  ${myPet} 값이 myPet 템플릿 리터럴에 삽입된다.
•  'I own a pet cat.'으로 출력된다.

-> 템플릿 리터럴 사용의 장점 

- 코드의 가독성 향상

- 큰따옴표나 작은따옴표를 이스케이프하는 것에 대해 걱정할 필요가 없다.

 

---

 

함수

 

 

• 함수 선언

함수 선언 구성

• 키워드 function.
• 함수 이름 또는 식별자와 그 뒤에 괄호가 온다.
• 함수 본문 또는 명령문 블록을 { } 중괄호로 묶어 기술한다. 

helloWorld(); 

function helloWorld() {
  console.log('Hello, World!');
}

 

 

 

• 함수 호출

helloWorld(); // 함수 호출

function helloWorld() {
	console.log('hello World')
}

 

 - 함수 호출은 함수 본문 또는 중괄호 사이의 모든 명령문을 실행한다.

- 위의 코드에서 함수 호출문이 실행되면 helloWorld()이라는 함수가 실행되고 함수 본문 내부의 코드가 실행된다.

 

 

 

 

 

• 매개변수 및 인수

- 함수를 선언시 매개변수를 지정할 수 있다. 

- 매개변수를 사용하여 함수에 정보를 전달하고 이를 함수가 받아들여 작업을 수행한다.

 

function rectangle(width, height) {
	
	console.log(width,height);	
}

rectangle(5,8);

 rectangle 함수 호출 시 인자로 5와 8을 각각 width와 height에 전달하고,  rectangle 함수 실행을 통해 값 출력한다.

 

 

 

 

 

• 화살표 함수

//일반 함수 
function reFunction(x) {
  return x * 2;
} 

//화살표 함수
const arrFunction = (x) => x * 2;

 

const rectangle = (width, height) => {
  let area = width * height;
  return area;
};

 

- 화살표 함수를 사용하면  함수를 생성해야 할 때마다 키워드를 입력할 필요가 없다.

-  먼저 매개변수를 내부에 포함시킨 다음 함수 본문을 가리키는 화살표를 추가하여 사용한다. =>

- 파라미터 (매개변수)가 하나일 때는 주변 괄호를 생략할 수 있다.

 

 

 

 

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

//함수를 다음과 같이 리팩토링할 수 있다.

const Number = num => num * num;

 

- 한 줄 블록으로 구성된 함수 본문에는 중괄호가 필요하지 않다.

- 중괄호가 없으면 해당 줄이 평가하는 모든 항목이 자동으로 반환된다.

- 블록의 내용은 화살표 바로 뒤에 있어야 하며 return은 제거될 수 있다. 이를 암시적 반환이라고 한다.

---

 

 배열

 

 

• 배열 생성과 접근

- 배열 리터럴을 사용한다.

- 배열 리터럴 -> 대괄호로 묶어 배열을 만든다. [ ] 

- 동일한 데이터 유형을 모두 포함하는 배열을 가질 수도 있고 다른 데이터 유형을 포함하는 배열을 가질 수도 있다.

• 배열은 대괄호 []와 그 안의 내용으로 표시된다.
• 배열 내부의 각 콘텐츠 항목을 요소라고 한다 .

 

- 배열 접근 시 첨자를 이용하여 접근한다. 

var Array = ['a', 'b', 'c', 'd'];

Array[0] //  a 출력

 

 

•  .length() 메소드

- 배열의 항목 수를 반환한다.

- 배열에 몇 개의 요소가 있는지 알고 싶을 때 사용한다.

const favorite = ['go hiking', 'Take a rest'];

console.log(favorite.length); 
//2 출력

 

 

• .push() 메소드

- 배열 끝에 항목을 추가할 수 있다. 

const itemNumber = ['item 0', 'item 1', 'item 2'];

itemTracker.push('item 3', 'item 4');

console.log(itemNumber);

//item 3, item 4 끝에 추가

 

 

 

 

• .pop() 메소드

- 배열의 마지막 항목을 제거한다.

const newItem = ['item 0', 'item 1', 'item 2'];

const cancle = newItem.pop();

console.log(newItem); 
// [ 'item 0', 'item 1' ] 출력

console.log(cancle);
// item 2 출력

 

 

 

---

 

 

반복자

 

 

 

• .forEach() 메소드

- 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달한다. 

- 이 메서드는 배열의 각 요소에 대해 제공된 콜백함수를 오름차순 인덱스 순서로 한 번씩 호출한다.

 

 

[! 콜백 함수란?

 

function print(callback) {
    callback();
}

print() 함수는 다른 함수를 파라미터로 받아서 내부에서 그것을 호출하고 있으며 이것을 “콜백”이라고 한다.

즉, 다른 함수의 파라미터로써 전달되는 함수를 콜백 함수라고 한다.  ]

 

 

 

- function (value, index, array) { } 
-> 이 형태로 콜백 함수 사용한다.

 

const items = ["item1", "item2", "item3"];
const copyItems = [];

// for 루프 
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// .forEach 메소드 
items.forEach((item) => {
  copyItems.push(item);
});

 

 

 

• .map() 메소드

- 메서드가 배열에서 호출되면 콜백 함수의 인수를 사용하여 새 배열을 반환한다. 

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

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

// 기존 배열에서  *10 한 배열이 반환

 -. forEach()와 다른 점은 반환값이 있으며 , 새 배열을 반환하는 것이다.

 

 

 

• . filter() 메소드

-. map() 메서드와 마찬가지로 새 배열을 반환하지만, 원래 배열에서 특정 요소를 필터링한 후 요소 배열을 반환한다.

 

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

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

//word의 길이가 6보다 작은 요소들만 새 배열로 출력

 

 

 

• .findIndex() 메서드

-  배열에서 요소의 위치를 ​​찾고 싶을 때 사용한다.

- 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환하고, 만족하는 요소가 없으면 -1을 반환한다.

-  참인 값을 반환할 때까지 반복하며 해당 요소의 인덱스를 반환하고 배열 반복을 중단한다.

 

const jumbledNums = [123, 25, 78, 5, 9]; 

const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});
//3을 반환하고 반복 중단

 

 

 

• .reduce() 메소드

- 배열 요소를 반복한 후 단일 값을 반환한다. -> 결과적으로 배열이 줄어든다.

const Array = [0, 1, 2, 3, 4];

Array.reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);

 

callback                                         accumulator  currentValue  currentIndex         array                                          반환 값

1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3

 

---

 

 

 

객체

 

 

• 객체 리터럴

- 객체 리터럴을 지정하기 위해 중괄호{}를 사용한다.

- 데이터는 키-값 쌍으로  구성된다. 키는 값을 보유하는 메모리 내 위치를 가리키는 변수 이름과 같다.

- 키 값은 언어의 모든 데이터 유형이 될 수 있다.

- 객체 리터럴의 각 키-값 쌍은 쉼표( ,)로 구분되며, 키는 문자열이지만 특수 문자가 없는 키가 있는 경우 따옴표를 생략할 수 있다.

 

let objectLiteral = {
  'object': 'Literal',
  color: 'gold'
};

 

let objectLiteral = {
  'object': 'Literal',
  color: 'gold'
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};

objectLiteral['Active Duty'];   // Returns true
objectLiteral['numCrew'];   // Returns 5
objectLiteral['..'];   // Returns undefined

 

 

 

 - 객체 업데이트 

 

let objectLiteral = {
  'object' : 'Literal',
  homePlanet : 'Earth',
  color: 'silver',
  'Secret Mission' : 'Discover life outside of Earth.'
};


objectLiteral.color = 'glorious gold';

 

 

 

 

ES6에 도입된 새로운 메서드 구문을 사용하면 콜론과 function키워드를 생략할 수 있다.

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


변경 후

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

 

 

 

 

• 중첩된 객체 

const spaceship = {
     telescope: {
        yearBuilt: 2018,
        model: '91031-XLT',
        focalLength: 2032 
     },
    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
         }
    }
}; 

spaceship.nanoelectronics['back-up'].battery;  

// Lithium 출력

 

 

Object 생성자는 주어진 값에 대한 객체 래퍼를 생성한다.

• 값이 null 또는 undefined이면 빈 객체를 생성하여 반환한다.
• 그렇지 않으면 주어진 값에 해당하는 타입의 객체를 반환한다.
• 값이 이미 객체인 경우 그 값을 반환한다.

 

[출처] codecademy

---

 

빈칸 채우기 문제 - (빈칸을 드래그해서 답을 확인해 보세요)

 

1. 변수를 다시 할당해야 하는 경우 (   let   )를 사용하고 그렇지 않으면 ((const)을 사용한다.

2. 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 (백틱(`))을 사용한다.

3. ( 화살표 함수)를 사용하면  함수를 생성해야 할 때마다 키워드를 입력할 필요가 없다.

4. 배열의 마지막 항목을 제거하는 메서드는 (. pop() 메서드)이다.

5. 다른 함수를 파라미터로 받아서 내부에서 그것을 호출하고 이것을 (“콜백”)이라고 하며, 다른 함수의 파라미터로써 전달되는 함수를 (콜백 함수)라고 한다.

6. 메서드가 배열에서 호출되면 콜백 함수의 인수를 사용하여 새 배열을 반환하는 메서드를 (. map () 메서드)라고 하며. forEach() 메서드와다른 점은 (반환값)이 있으며 , (새 배열)을 반환하는 것이다.

7. 객체 리터럴에서 데이터는 (키-값 쌍)으로 , (키)는 값을 보유하는 메모리 내 위치를 가리키는 변수 이름과 같다.

 

 

코드 문제 

 

 1. 배열 속 짝수만 갖는 요소를 출력하시오.

const numbers = [11,33,98,42,36]; 

const evenNum = // 여기에 코드 입력

console.log(evenNum);

 

 답 : numbers.filter(number => number % 2 === 0); 

(드래그해서 확인)

 

 

 

2. 자신의 이름, 학번을 추가하는 코드를 작성하시오.

const University = ['yoon' , '20220782'];

// 여기에 코드 입력

console.log(University);

답: University.push(' kim' , '20220000');

(드래그 해서 확인)

 

---

출처: 이고잉,  『생활코딩! Node.js 노드제이에스 프로그래밍』 위키북스, 1-14장 ~ 1-25장

Node.js #1

Editor : 수정