[개념] JS와 ES6 문법

Node.js란?

• 구글에서 만든 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 (V8은 구글이 만들었지만 node는 'Ryan Lienhart' 님이 만들었다는 사실)
• javascript는 기존에 브라우저 내에서만 실행할 수 있는 언어였지만, 브라우저가 없이 로컬에서 혹은 서버에서 실행할 수 있도록 만든 것이다.

• 서버 환경으로 유명한 Node.js에서는 express 모듈을 사용해서 웹 서버를 구축할 수 있다.

쉽게 말해서, Node.js란 자바스크립트를 브라우저가 아닌 컴퓨터에서 로컬 혹은 서버에서 실행하도록 도와주는 환경이라 생각하면 된다.

 

npm이란?

나중에 실습할 때 나올 아이로, 웹 개발을 진행하는데 필요한 여러 라이브러리를 설치해야할 때 'npm' 을 사용하게 된다.

• node.js의 package manager(세계에서 가장 큰 오픈 소스 library 생태계)
• node를 사용하는데 필요한 패키지들을 설치할 때 사용한다.

 

ES6란?

원래 javascript는 기존 HTML로 만들어진 정적인 element들을 역동적으로 구현하기 위해 생성된 언어이다. (made by 넷스케이프)

• 이후에 넷스케이프 외에도 IE같은 다른 브라우저들도 비슷한 언어를 개발하기 시작하여, 이들을 표준화하기 위해 나온 것이 ECMAScript이다.

• ES6란 ECMAScript의 6번째 버전을 의미한다. (2015년에 발표되어 ECMAScript 2015라고도 불린다)

• 아직까지 많은 곳에서 ES6를 표준으로 쓰고있다고 한다!

 

 

기존 JS 문법 + ES6 버전에 추가된 새로운 문법들을 확인해보겠다.

JS의 기본 문법

조건문

if (조건문) {
	실행문
} elseif (조건문) {
	실행문
} else {
	실행문
}

 

반복문 (+조건문, 함수정의)

function isValidAge(person) {
	if (person["age"] > 19) {
		return true
	} else {
		return false
	}
}

var personArray = {
	"name": "Moon", "age":23, 
	"name": "Younji", "age": 23,
}

for (var i=0; i< personArray; i++) {
	console.log(personArray[i]['age']);
	if (isValidAge(personArrayi[i]) {
		console.log("Here is your Beer!");
	} else {
		console.log("Get out!");
	}
}

 

예시) 연령 평균 구하기

function getAgeAverage(personArray) {
	var average = 0;
    for (var i=0; i<personArray.length; i++) {
        average += personArray[i]['age']
    }
    average /= personArray.length
	// 연령 평균을 구해주는 함수를 만들어 봅시다.
	// 평균은 총합을 갯수로 나눠주면 됩니다.

	return average;
}

var personArray = [
										{"name": "John Doe", "age": 20},
										{"name": "Jane Doe", "age": 19},
										{"name": "Fred Doe", "age": 32},
										{"name": "Chris Doe", "age": 45},
										{"name": "Layla Doe", "age": 37},
									];

console.log(getAgeAverage(personArray)); // 30.6

 

ES6의 새로운 문법

1) var, let, const

2) 호이스팅(Hoisting)

3) 반복문의 변형

4) arrow function (화살표 함수)

5) Promises (다음 글에서!)

var

기존에 변수를 할당해줄 때는 var를 이용해주었다.

• var의 문제점은 범위의 개념이 없다는 것이다.

var num = 10;
if (num==10) {
	var num = 20;
	console.log("num in if : ", num);  // 20이 출력
}

console.log(num);   // if문 밖에서 정의한 10이 찍힐 줄 알았지만 20이 찍힘

 

let

ES6부터는 scope 라는 개념이 추가된 let 을 사용할 수 있다.

• 재선언(같은 범위 안에서 같은 변수명으로 선언)은 할 수 없지만 재할당은 할 수 있다.

let num = 10;
if (num==10) {
	let num = 20;
	console.log("num in if : ", num);  // 20이 출력
}

console.log(num); // 10이 찍힘

• scope는 변수의 접근을 결정한다. 위 예제처럼 if문 안에서 선언된 num은 if문 밖에서 접근이 불가능하다.

 

const

변하지 않는 상수 를 선언할 때 쓰인다.

재선언도, 재할당도 할 수 없다.

const PI = 2.1415;
PI = 3.141592;   // Error

 

 

Hoisting(호이스팅)

ES6에서 가장 크게 변화된 요소 중 하나

• 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 내의 최상단에 선언하는 것을 의미한다.

• 변수나 함수를 미리 선언해놓고, 순차적으로 사용하는 것이다. (실제 코드가 변동되는 것이 아닌, 자바스크립트 parser 내부적으로 이루어진다.)

• Hoisting에서는 var 변수를 쓸 경우 문제가 발생할 수 있다.

 

이제 var 대신 const, let을 쓰는 습관을 들이자!

 

 

반복문의 변형

기존의 반복문은 for 루트!

• 변형된 for of 반복문
  • 편리한 점은 반복문의 길이를 명시해주지 않아도 된다는 점이다.

const students = ["Moon", "Younji", "Kim"];
for (let student of students) {   // students 배열에서 student를 하나씩 접근
	console.log(student);
}

배열의 원소를 꺼내주는 게 for of라면, for in은 배열의 원소의 위치를 출력해준다.

 

• 변형된 for in 반복문
  • 배열의 원소 위치(index)를 출력한다.

const students = ["Moon", "Younji", "Kim"];

for (let index in students) {
	console.log(student);   // 0 1 2
	console.log(students[index]);
}

 

• 변형된 for each 반복문
  • 해당 배열의 원소에 하나씩 접근하여 Callback함수를 실행시킨다.
  • 형식은 students.forEach(Callback함수 선언);

const students = ["Moon", "Younji", "Kim"];

students.forEach(student) => {
	console.log(student);  //Moon Younji Kim
})

웹 개발 관련 코드를 볼 때 forEach를 사용하는 것을 많이 볼 수 있었는데 이 의미였군..

 

 

arrow function (화살표 함수)

기존의 함수와 기능은 비슷하지만, 화살표(⇒)가 있다 하여 arrow function이라 한다.

• 형식은 const 함수명 = (인자) => {}; 로, 상수에 함수를 담아주는 것이다.

• 함수명(); 으로 호출해줄 수 있다.

const arrowFunction = () => {
	console.log("Hello arrow function");
}

arrowFunction();  //"Hello arrow function" 출력

• 만약 함수 내부 실행문이 한 줄 일 때는 중간 괄호 없이 선언해줄 수 있다.const arrowFunction = () => console.log("Hello arrow function");

 

기존 함수와 Arrow Function은 완전히 같은 함수일까?
몇가지 차이가 있으나, 대표적으로 this가 가리키는 곳이 다르다.
화살표 함수에서의 this는 자신을 감싼 정적 범위이다.
[참고]

 

예시) arrow function과 forEach를 사용한 연령 평균 구하기

let personArray = [
    {"name": "John Doe", "age": 20},
    {"name": "Jane Doe", "age": 19},
    {"name": "Fred Doe", "age": 32},
    {"name": "Chris Doe", "age": 45},
    {"name": "Layla Doe", "age": 37},
];

// personArray의 나이 평균을 구해주는 Arrow Function을 작성해봅시다.
const getAgeAverage = (personArray) => {
    let sum = 0;
    for (person of personArray) {
        sum += person['age'];
    }
    const average= sum / personArray.length;
    return average;
}

console.log(getAgeAverage(personArray));

 

---

코딩 퀴즈 (쉽습니다ㅎㅎ) 

스파르타 코딩클럽 1주차 코딩 퀴즈

1. 객체 내용 출력하기

var personArray = [
	{"name": "John Doe", "age": 20},
	{"name": "Jane Doe", "age": 19},
];

// 위에서 배운 4가지 for문을 이용해서 아래 문장을 출력해봅시다 (console.log)

// His/her name is John Doe. He/She is 20 years old.
// His/her name is Jane Doe. He/She is 19 years old.

정답

// for문 종류로는 일반 for문, forOf, forIn, forEach가 있었죠!

//일반 for문
for (let i=0;i<personArray.length;i++) {
    person = personArray[i]
    console.log(`His/her name is ${person['name']}. He/She is ${person['age']} years old.`);
}

// forIn : 원소 위치 출력!
for (let idx in personArray) {
    person = personArray[idx];
    console.log(`His/her name is ${person['name']}. He/She is ${person['age']} years old.`);
}

// forOf
for (let person of personArray){
    console.log(`His/her name is ${person['name']}. He/She is ${person['age']} years old.`);
}

// forEach : 각 원소에 함수 적용
personArray.forEach((person) => {console.log(`His/her name is ${person['name']}. He/She is ${person['age']} years old.`);
});

 

2. 홀수/짝수 구분 함수 만들어보기

function isEven(n) { 
  // n이 짝수면 true, 홀수면 false 를 반환하는 함수를 만들어 봅시다
}
function isOdd(n) { 
  // 반대로 n이 홀수면 true, 짝수면 false 를 반환하는 함수를 만들어 봅시다
}

console.log(isEven(10)); // true
console.log(isEven(3)); // false
console.log(isOdd(5)); // true
console.log(isOdd(8)); // false

정답

function isEven(n) { 
    if (n%2 == 0){
        return true;
    } else if (n%2 !=0) {
        return false;
    }
    // n이 짝수면 true, 홀수면 false 를 반환하는 함수를 만들어 봅시다
}
function isOdd(n) { 
    if (n%2 !=0) {
        return true;// 반대로 n이 홀수면 true, 짝수면 false 를 반환하는 함수를 만들어 봅시다
    } else if (n%2 == 0) {
        return false;
    }
}
  
  console.log(isEven(10)); // true
  console.log(isEven(3)); // false
  console.log(isOdd(5)); // true
  console.log(isOdd(8)); // false

 

3. John Doe만 마실 수 있는 맥주

function checkName(person) {
	// 사람의 이름이 "John Doe" 일때만 true 를 리턴해주도록 합시다.
    
}

var personArray = [
                    {"name": "Mark Bae", "age": 30},
                    {"name": "John Doe", "age": 20},
                    {"name": "Jane Doe", "age": 19},
                ];

for (var person of personArray) {
	if (checkName(person)) {
		console.log("Here is your beer! ", person["name"]);
	} else {
		console.log("Get out! ", person["name"]);
	}
}

정답

function checkName(person) {
    if (person["name"] == "John Doe") {
        return true;
    } else {
        return false;
    }    
}

var personArray = [
                    {"name": "Mark Bae", "age": 30},
                    {"name": "John Doe", "age": 20},
                    {"name": "Jane Doe", "age": 19},
                ];

for (var person of personArray) {
	if (checkName(person)) {
		console.log("Here is your beer! ", person["name"]);
	} else {
		console.log("Get out! ", person["name"]);
	}
}

 

4. 미성년자만 찾아보기

function getChildrens(personArray) {
	// 20세이하의 사람들만 배열로 반환해봅시다
}

var personArray = [
    {"name": "John Doe", "age": 10},
    {"name": "Jane Doe", "age": 29},
    {"name": "Fred Doe", "age": 13},
    {"name": "Chris Doe", "age": 22},
    {"name": "Layla Doe", "age": 8},
];

console.log(getChildrens(personArray)); 
// [
// 	{"name": "John Doe", "age": 10},
// 	{"name": "Fred Doe", "age": 13},
//  {"name": "Layla Doe", "age": 8},
// ]

정답

function getChildrens(personArray) {
    child = [];
	for (person of personArray) {
        if (person["age"] < 20) {
            child.push(person)
        }
    }
    return child;
}

var personArray = [
    {"name": "John Doe", "age": 10},
    {"name": "Jane Doe", "age": 29},
    {"name": "Fred Doe", "age": 13},
    {"name": "Chris Doe", "age": 22},
    {"name": "Layla Doe", "age": 8},
];
console.log(getChildrens(personArray));

 

공부하면서 정리한 내용이라 잘못된 내용이 있을 수 있습니다.
따뜻한 피드백은 환영입니다♥