본캠프 11/05 TIL

배운 내용: JAVA 스크립트 2주차 내용

 

각종 ES6문법

 

1. let과 const의 특징

-let은 재할당은 가능하지만, 재선언은 불가능하다

 

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

-const는 재할당, 재선언이 불가능, 초기잢이 없으면 불가능

 

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

2. 간단히 알아보는 화살표함수

 

// ES5
function func() {
return true
}

//ES6
const func = () => true
const func = () => {
return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

 

3. 삼항연산자

condition ? expr1 : expr2

console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

 

4.(중요!!)구조분해할당

배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

 

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

 

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

5. (나중에가면 많이 사용함mz세대) 단축 속성명

-객체의 key와 value 값이 같다면, 생략 가능!

 

const name = "nbc"
const age = "30"

const obj = {
name,
age: newAge
}

const obj = {
name,
age
}

 

6. 전개구문(정말 많이사용)

- 배열이나 객체를 전개하는 문법

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

 

7. 나머지 매개변수

function func (a, b, ...args) {
console.log(...args)
}

func(1, 2, 3) // 3 = ...ars
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7  = ...ars

 

8. 템플릿 리터럴(중요!)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식

백틱(`) 과 ${}로 표현

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

 

=================================================================================

================================================================================

일급 객체로서의 함수!

일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

 

1. 변수에 함수를 할당

함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다.

 

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

 

2. 함수를 인자로 다른 함수에 전달

함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다.

 

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

3. 함수를 반환

함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다.

 

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

4. 객체의 프로퍼티로 함수를 할당

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

 

5. 배열의 요소로 함수를 할당

 

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

 

========================================================================================================================================================================================

MAP과 SET

1.MAP

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다.

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

 

2. SET

 

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');

for (const value of mySet.values()) {
  console.log(value);
}

 

 

 

 

 

기본적으로 노션에 있는 내용들을 붙인거지만 붙여가면서 다시 한번 이해하고, 속으로 되집어보면서 복습의 효과도 있었다. 아직까지는 수업에 이해가 안되거나 답답한 부분은 없지만 여전히 숙제에 배운것들을 적용해보는 데에 있어서 어려움이 있다. 보다 잘 복습해서 적용에도 큰 어려움이 없도록 학습해야 될 것으로 보인다.