[node js] 1주차 - 2

JS 기본 문법 - 01

🔥 수업을 원활히 진행하기 위해서는 JS의 기본 문법을 이미 알고 있더라도 자신이 제대로 알고 있는지 확인하며 넘어가주세요! 소소한 구문 설탕과 실무에서 자주 사용되는 코드 패턴이 섞여있어요!

변수 선언, 대입 연산자

변수 선언 veriable

var만 쓰지 않으면 됨    Hoisting 떄문에

대입 연산자 

REPL 시나리오

var age;

// Print: undefined

 

age = 10;

// Print: 10

 

let age2 = 999;

// Print: undefined

 

age;

// Print: 10

 

age2;

// Print: 999

 

const name = 'Tim Kang';

// Print: undefined

 

name;

// Print: 'Tim Kang'

 

name = 'Gildong Hong';

// Print: Uncaught TypeError: Assignment to constant variable.

 

age = 12;

// Print: 12

 

age = age2 = 25

// Print: 25

 

age;

// Print: 25

 

age2;

// Print: 25

Object (객체)

• { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
• 다른 언어에서는 이와 같은 자료형을 Dictionary(딕셔너리)로 부르기도 하지만 JS에서의 공식 명칭은 Object입니다.
• key를 기준으로 객체에 있는 값에 접근할 수 있습니다.
• 객체의 key에 접근하는 방법은 두가지 표현이 존재합니다.
  • obj.key
  • obj['key']

  const person = {
  	name: '강승현',
  	age: 52
  };
  
  person.name;
  // Print: '강승현'
  
  person['name'];
  // Print: '강승현'
  
  person.hobby;
  // Print: undefined
  

• 만약 유효한 자바스크립트 식별자를 사용하지 않는 경우 반드시 obj['key'] 와 같은 표현식을 사용해야 합니다.여백

const person = {
	name: '강승현',
	age: 52,
	'키우는 🐶': '푸들',
}

여백(스페이스), 대쉬(-) 등 허용되지 않은 문자열이 포함된 경우 변수를 만들 수 없는것처럼 object의 키로 사용하기 위해서는 따옴표로 감싸야 합니다.

person.'키우는 🐶'는 참조가 불가능하지만, person['키우는 🐶']로 하는 경우 참조가 가능합니다.

Array (배열)

• [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있습니다.
• 다른 언어에서는 이와 같은 자료형을 List(리스트)로 부르기도 하지만 JS에서의 공식 명칭은 Array입니다.
• 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자입니다.
  • 비유하자면 책의 목차(Index)에 있는 페이지 수와 같으며, 목차를 보고 해당 페이지를 펼치면 원하는 내용을 볼 수 있는것과 같습니다.
  • Index의 최소 값은 0입니다.

  const names = ['강승현', '홍길동', '김아무개'];
  
  names[0];
  // Print: '강승현'
  
  name[2];
  // Print: '김아무개'
  
  name[3];
  // Print: undefined
  

Function (함수)

함수는 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용됩니다.

• 아래와 같은 형태로 표현할 수 있으며, 위의 예시에서는 getMyName이 함수의 이름이 됩니다.

function getMyName() {

return '함수가 반환할 값';

}

 

getMyName(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.

// Print: '함수가 반환할 값'

• 아래와 같은 형태로 변수에 할당이 가능합니다. (일급 객체)

const variable = function getMyName() {

return '함수가 반환할 값';

}

 

variable(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.

// Print: '함수가 반환할 값'

• Argument(인수 또는 인자)를 입력 받을 수 있습니다.

function getMyName(myName) {

return myName;

}

 

getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.

// Print: '인자를 넣습니다.'

📝 REPL 시나리오

falsey한 값 : 0, '', null

Boolean(true)

// Print: true

 

Boolean(false)

// Print: false

 

Boolean(10)

// Print: true

 

Boolean('')

// Print: false

 

Boolean(0)

// Print: false

 

Boolean(-1)

// Print: true

 

Boolean(null)

// Print: false

 

Boolean(undefined)

// Print: false

 

Boolean()

// Print: false

선언되지 않은 변수를 참조하면 어떻게 되나요?

Reference error를 일으키게 됩니다.

console.log(foo);
// ReferenceError: foo is not defined

배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 뭘까요?

Array.prototype.filter() - JavaScript | MDN

Array.prototype.filter() - JavaScript | MDN

 

반복문

• for...of 문
• Array, Map과 같은 반복 가능한(Iterable) 객체의 요소를 하나씩 반복할 수 있게 해줍니다. (Object는 반복 가능한 객체에 해당하지 않습니다!)
• 지금은 배열을 하나씩 반복해주는 문법이라고 생각해도 괜찮습니다.
• 인터페이스

for (변수선언문 of 반복가능한객체) {

// 명령문

}

• 실 사용 예

const persons = ['강승현', '홍길동', '김아무개'];

 

for (const person of persons) {

console.log(person);

}

 

// Print: '강승현'

// '홍길동'

// '김아무개'

 

• for...in 문
  • for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달합니다.
  • for...of 문처럼 반복 가능한(Iterable) 객체는 모두 사용할 수 있습니다.
  • 인터페이스
  • for (변수선언문 of 반복가능한객체) { // 명령문 }
  • 실 사용 예

    const persons = ['강승현', '홍길동', '김아무개'];
    
    for (const index in persons) {
      const person = persons[index];
    	console.log(person);
    }
    
    // Print: '강승현'
    // '홍길동'
    // '김아무개'
    

  • const persons = ['강승현', '홍길동', '김아무개']; for (const person in persons) { console.log(person); } // Print: 0 // 1 // 2

 💡 반복문 중엔 while문도 존재하지만 if문과 동일하게 표현상의 차이일 뿐 모두 for문으로 처리가 가능하기 때문에 (시간 제약상)다른 내용을 더 자세히 알려드리기 위해 생략합니다! 또한 break 문, continue 문은 모든 반복문에서 똑같이 사용이 가능해요!

함수

• • 일반적으로 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용합니다.
  • 변수 선언, 조건문과 더불어 가장 많이 사용 할 문법이므로 잘 익혀두시는게 좋습니다.
  • 인터페이스

function 함수이름(인자1, 인자2, 인자3) {

// 명령문

}

 

함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다.

• • 인자(Parameter 또는 매개변수)란 함수를 호출할때 전달 받기 위해 지정한 변수를 뜻하며, 몇개든 콤마를 이어붙여 입력받을 수 있습니다. 인수(Argument)란 인자에 전달하는 값 그 자체를 일컫습니다.
  • 함수는 return 키워드로 값을 반환할 수 있습니다.
  • 실제로 구현해보기
    • 요구사항: persons 변수로 입력받은 값의 사람들에게 맥주 주문을 받습니다. 성인(19세 이상)인 경우에만 맥주 주문을 받아 맥주를 제공할 수 있도록 해주세요.
    • 성인에게 주문을 받은 경우 "맥주 나왔습니다! [주문한 사람 이름]님" 처럼 출력합니다.
    • 미성인에게 주문을 받은 경우 "나이 더 먹고 오세요! [주문한 사람 이름]님" 처럼 출력합니다.
    • 정답 확인

function isAdult(person) {

// 왜 이런 코드가 가능한지 모르겠다면 비교 연산자를 복습하세요! 기초 튼튼!

return person.age >= 19;

}

 

function orderBeer(person) {

if (isAdult(person)) {

console.log('맥주 나왔습니다! ' + person.name + '님');

} else {

console.log('나이 더 먹고 오세요! ' + person.name + '님');

}

}

 

const persons = [

{ name: "강승현", age: 19 },

{ name: "홍길동", age: 18 },

];

 

// for...of문이 어떻게 동작하는지 모르겠다면 반복문을 복습하세요!

for (const person of persons) {

orderBeer(person);

}

 

// Print: 맥주 나왔습니다! 강승현님

// 나이 더 먹고 오세요! 홍길동님

화살표 함수

• • ES6에서 새롭게 추가된 문법인 화살표 함수(Arrow function)에 대해 알아봅시다.
  • 문법의 생김새 처럼 화살표 모양을 하고 있어 이러한 이름이 붙게 되었고, 이를 이용해 기존 함수보다 더 간결한 문법으로 함수를 만들 수 있습니다.
  • 일반 익명 함수 표현식

const sum = function(a, b) {

return a + b;

};

이제 알고 있는 표현식이죠? 아래의 화살표 함수 표현식과 비교해보세요!

• • 화살표 함수 표현식 (1): 기본 형태

const sum = (a, b) => {

return a + b;

};

인자가 두개이면 무조건 ()

• • 화살표 함수 표현식 (2): return 생략 형태
  • 여러 줄의 코드를 포함하고 싶은 경우엔 기본 형태를 사용해야 합니다.
  • const sum = (a, b) => a + b;
  • 화살표 함수 표현식 (3): 인자 괄호 생략 형태
  • 하나의 인자를 입력받는 경우에는 괄호 생략이 가능합니다.
  • const hello = a => { return a; }; hello('hi'); // hi

💡 기존 함수와 Arrow Function는 완전히 같을까요?

아닙니다! 몇가지 차이가 있으나 대표적으로 this가 가리키는 곳이 다릅니다. this에 대해서는 MDN문서를 참고하시면 좋습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

 

익명 함수

• • 익명 함수는 일반 함수와 다르게 함수의 이름이 존재하지 않고 변수에 함수를 담아 사용하는 함수입니다.
  • 변수에 값을 저장하는 방법처럼 변수에 함수를 저장해서 사용합니다.

// 일반 함수

function foo() {

console.log("bar");

}

 

// 익명 함수

let foo = function () {

console.log("bar");

};

• • 익명 함수는 주로 재사용 되지 않고 한번만 사용되는 함수일 경우에 자주 사용하게 되는데, 이는 일회성인 함수를 일반 함수로 구현 함으로서 불필요한 메모리를 차지하는것을 방지하여 메모리 낭비를 줄일 수 있다는 장점 때문에 주로 사용됩니다.
  • 하지만 익명 함수 또한 단점이 있는데 밑에서 소개할 Hoisting이 적용되지 않는다는 단점이 있습니다. (이후 설명되는 호이스팅 참조) 일반적으로 작성된 함수의 경우 함수 선언보다 호출이 위에 있더라도 호출하는 위치에 상관없이 사용될 수 있지만, 익명함수의 경우 Hoisting이 적용되지 않아 에러가 나오게 됩니다.

  // 일반 함수로 선언부보다 위에서 함수를 호출했을 때
  hello(); // hello!
  
  function hello() {
    console.log("hello!");
  }
  

  // 익명 함수의 경우
  hello(); // Uncaught ReferenceError: Cannot access 'hello' before initialization
  
  const hello = function() {
    console.log("hello!");
  }
  

   

익명함수와 화살표 함수랑 별 다를게 없다.

 

함수에서 return을 사용하지 않으면 무엇을 반환할까요?

• 정답

const a = 1;

const b = 2;

 

function foo(a, b){

const c = a + b;

}

 

foo(a, b);

// Print: undefined 

• return 키워드가 없는 경우 함수는 아무런 동작을 하지 않습니다.
• 위와 같이 변수 c 에 a 와 b의 합을 선언하였지만 반환해주지 않아서 아무런 동작이 하지 않는것을 볼 수 있습니다