Chapter 2. 프로그래밍 기초 주차
4.23 - 2일차
1.es6 문법
-ECMAScript 6 (ES6)는 자바스크립트 버전 중 하나로 ,2015년 발표됨.
-이전 버전 ES5에서 새로운 문법과 기능 도입하여 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선함.
-2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급되곤 함
(1) let, const
- 변수 선언
- 선언 : 변수명을 자바스크립트 엔진에 알리는 것
- 할당 : 변수에 값을 지정하는 것 ( = 할당연산자)
- let : 재할당 가능 ,재선언 불가
- const : 재할당, 재선언 불가
- var : 재선언, 재할당 가능
(2) 화살표 함수 (arrow function)
( ) => { }
function add () {
}
var add = function () {
}
var add = () => {
return 1;
}
var add = () => 1; //return 값이 하나일떄
var add = x => 1;
(3) 삼항 연산자
// condition ? true인경우 : false인 경우 //콘솔
console.log(true ? "참" : "거짓"); 참
console.log(false ? "참" : "거짓"); 거짓
console.log(1===1 ? "참" : "거짓"); 참
console.log(1 !== 1 ? "참" : "거짓"); 거짓
(4) 구조분해할당 : destructuring(de + structure + ing)
de = not
structure = 구조
배열이나, 객체의 속성
1) 배열의 경우
let [value1, value2] =[1, "new"];
console.log("1",value1);
console.log("2",value2); // 1,new
let arr = ["value1","value2","value3","value4"];
let [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
2) 객체의 경우
let user = {
name: "nbc",
age: 30,
};
let {name, age} = {
name: "nbc",
age: 30,
};
console.log("name =>",name); //string name => nbc
console.log("age =>",age); //number age => 30
// 새로운 이름으로 할당
let user = {
name: "nbc",
age: 30,
brithday: "yesterday",
};
// let {name: newName, age: newAge} = user;
// console.log("newName =>", newName);
// console.log("newAge =>", newAge);
let {name, age, brithday = "today"} = user;
console.log(name);
console.log(age);
console.log(brithday); //yesterday로 나옴
(5)단축 속성명 (property shorthand)
const name = "nbc";
const age = "30";
//key-value
const obj = {name, age};
const obj1 = {name: name ,age: age};
(6) 전개 구문 (spread operator)
// destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나!
let arr = [1, 2, 3];
let newArr = [...arr,4];
console.log(arr); [ 1, 2, 3]
console.log(newArr); [ 1, 2, 3, 4]
//객체
let user ={
name: 'nbc',
age: 30,
};
let user2 = {...user};
console.log(user); { name: 'nbc', age: 30 }
console.log(user2); { name: 'nbc', age: 30 }
(7) 나머지 매개변수 (rest parameter)
function exampleFunc(a, b, c, ...args) {
console.log(a, b, c);
console.log(...args); //(...args)에서 ...넣지 않는다면 [4, 5, 6, 7]
}
exampleFunc(1, 2, 3, 4, 5, 6, 7);
(8) 템플릿 리터럴 (Template Literal)
const testValue = "안녕하세요!";
console.log(`Hello World ${testValue}`); //` ` -> 빽틱 //콘솔 => Hello World 안녕하세요!
console.log(`
Hello
My name is Javascript!!
Nice to meet you!!
`);
2. 일급 객체로서의 함수
일급객체 - 다른 객체들에 일반적으로 적용 가능하다
함수를 매우 유연하게 사용 가능
( ); - 실행한다
{ } 중괄호안에서의 this 본인 객체 자신을 가르킨다
(1) 변수에 함수를 할당할 수 있다.
함수가 마치 값으로 취급된다.
함수가 나중에 사용될 수 있도록 조치가 되었다.
const sayHello = function () {
console.log("Hello!");
};
(2) 함수를 인자로 다른 함수에 전달할 수 있다.
2 - 1. 콜백함수 : 매개변수로써 쓰이는 함수
2 - 2. 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFuntion(func) {
//매개변수로 받은 변수가 사실, 함수다.//
func();
}
const sayHello = function () {
console.log("Hello!");
};
callFuntion(function(){
console.log("Hello!");
});
(3) 함수를 반환할 수 있다.
function createAdder(num) {
return function (x) {
return x + num;
};
}
const addFive = createAdder(5);
console.log(addFive(10)); //15
ex.2
const person = {
name: 'John',
age: 31,
isMarried: true,
// sayHello: () => {
// console.log(`Hello, My name is ${this.name}`); //**Hello, My name is undefined 화살표함수는 this를 바인딩하지 않는다.
// },
sayHello: function() {
//console.log("Hello, My name is" + this.name);
console.log(`Hello, My name is ${this.name}`) //**${} 중괄호로 묶을 것!!!
},
};
person.sayHello(); //Hello, My name is John
3. Map 과 Set
JS -> 객체, 배열 : 많고, 다양하고, 복잡한 프로그램을 만들어 왔다
그럼에도, 현실세계 반영하기는 좀 많이 어려웠음!
Map, Set 추가적인 자료구조가 등장함!
Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리 > 기존의 객체 또는 배열보다
(1) Map
- Key / Value
- Key에 어떤 데이터타입(유형)도 다 들어올 수 있다.
- Map은 키가 정렬된 순서로 저장되기 때문이다.
- 기능
> 검색, 삭제, 제거, 여부 확인
const myMap = new Map();
myMap.set('key','value');
myMap.get('key')
반복 ...!! -> method : keys, values, entries
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
console.log(myMap.keys());
for (const key of myMap.keys()) { //one , two ,three
console.log(key);
}
console.log(myMap.values());
for (const value of myMap.values()) { //1, 2, 3
console.log(value);
}
console.log(myMap.entries());
for (const entry of myMap.entries()) { // ['one',1] ['two',2] ['three',3] 출력
console.log(entry);
}
console.log(myMap.size); // map의 사이즈(길이)
console.log(myMap.has("two")); //key 기반 검색 //3 , true
(2)Set
- 고유한값을 저장하는 자료구조다.
- 값만 저장한다.
- 키를 저장하지는 않는다.
- 값이 중복되지 않는 유일한 요소로만 구성된다.
값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value5");
mySet.add("value8");
console.log(mySet.size); //5
console.log(mySet.has("value1")); //true
console.log(mySet.has("value2")); //true
console.log(mySet.has("value4")); //false
// Iterator, 반복했던 그 친구.
for (const value of mySet.values()) {
console.log(value);
}
- 오늘의 하루 -
하나하나 들을 때는 잘 이해가 됐는데
들은 내용을 활용해서 과제(숙제)를 풀려고 하니 시작방향과 무엇을 활용해야 할지 막막했다..
*최대한 많이 써보고 익숙해질 것!!
📢튜터님의 조언
- 모르는 내용은 리스트로 만들어서 체크해놓기 (2주차 ,3주차 듣다보면 반복되면서 이해될 수 있음 = 일단 진도나가기)
- 듣다가 앞에서 이해못했던 부분이 나와 막힌다면 그때 다시 듣기
- 혼자 해결이 되지않는다면 팀원에게 질문하거나 튜터님께 질문
- 일단 쭉 들어보기 (체크된 부분 확인하면서 다시 듣거나 강의자료 참고하기)
🙄내일은 강의 최대한 들을 수 있는 만큼 듣고 오후 3시에 팀원들과 개인과제 시작해보기
