학습목표
javascript의 주요 개념인 아래의 내용에 대해 설명할 수 있다
- JavaScript의 타입
- 변수 선언 키워드 let과 const
- 함수 호이스팅, 스코프, 클로저
- 화살표 함수
- 원시자료형, 참조자료형
- 배열
- 객체
- 전개문법 (Spread syntax)
- 구조분해할당
학습목표는 테스트하는 값과 기대값을 비교하기 위해 expect함수를 사용 정말로 정확한 확인이 가능하다
Javascript의 타입
동치연산자의 개념을 주로 다루고 설명하고 있으며,
느슨한 동치 연산자 '=='과 엄격한 동치 연산자 '==='
개념을 조금더 파악할 수 있었다
// ex)
let value1 = 1 + 1;
let value2 = 2;
value1 == value2 // 느슨한 동치 연산자 이지만 매우 비효율적이다
value1 === value2 // 엄격한 동치 연산자로 이 연산자만 사용하면 된다변수 선언 키워드 let과 const
재할당도 안되는 const 키워드를 굳이 써야하는지 이해가 안 될수도 있다
let 키워드를 사용하면 재할당이 가능하기 떄문에 여러모로 편하고, 큰 문제도 없어보기이 때문
하지만 const는 재할당이 안돼는만큼 코드 내에세 변하지 말아야하는 값에는 반드시 필요하다라는
개념이 있기에, const도 적극 활용을 해야한다
// ex)
const constString = 'hello';
constString = 'hello const'; // 이 줄을 없애거나 주석처리를 해야만 오류가 안난다
constString // 결과 값 윗줄 주석처리시 Hello 출력함수 호이스팅, 스코프, 클로저
scpoe는 변수의 값(변수에 담긴 값)을 찾을때 확인하는 곳을 말한다
이것만 기억하면 된다
함수 호이스팅을 통해 함수선언식과, 함수 표현식의 차이도 확인이 가능하다
//ex)
it('함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.', function () {
let funcExpressed = 'to be a function';
expect(typeof funcDeclared).to.equal('function'); // 작성부분
expect(typeof funcExpressed).to.equal('string'); // 작성부분
function funcDeclared() {
return 'this is a function declaration'; // 작성부분
}
funcExpressed = function () {
return 'this is a function expression'; // 작성부분
};
const funcContainer = { func: funcExpressed };
expect(funcContainer.func()).to.equal('this is a function expression'); // 작성부분
funcContainer.func = funcDeclared;
expect(funcContainer.func()).to.equal('this is a function declaration'); // 작성부분
});// ex) scope에 대해 정확히 확인이 가능하다
it('lexical scope에 대해서 확인합니다.', function () {
let message = 'Outer';
function getMessage() {
return message;
}
function shadowGlobal() {
let message = 'Inner';
return message;
}
function shadowGlobal2(message) {
return message;
}
function shadowParameter(message) {
message = 'Do not use parameters like this!';
return message;
}
expect(getMessage()).to.equal('Outer'); // 작성부분
expect(shadowGlobal()).to.equal('Inner'); // 작성부분
expect(shadowGlobal2('Parameter')).to.equal('Parameter'); // 작성부분
expect(shadowParameter('Parameter')).to.equal('Do not use parameters like this!'); // 작성부분
expect(message).to.equal('Outer'); // 작성부분
});// ex) 클로저에 대해 편안하게 확인이 가능하다
it('클로저(closure)에 대해 확인합니다.', function () {
function increaseBy(increaseByAmount) {
return function (numberToIncrease) {
return numberToIncrease + increaseByAmount;
};
}
const increaseBy3 = increaseBy(3);
const increaseBy5 = increaseBy(5);
expect(increaseBy3(10)).to.equal(13); // 작성부분
expect(increaseBy5(10)).to.equal(15); // 작성부분
expect(increaseBy(8)(6) + increaseBy(5)(9)).to.equal(28); // 작성부분
});화살표 함수
화살표 함수는 function 키워드를 생략하고 화살표 => 를 붙인다
보다 어렵지 않으며 요즘 트렌드에선 대부분 화살표 함수를 사용하기에 반드시 기억해야될 함수중 하나이다
// ex) 화살표 함수에 대해 한번더 익힌다
it('화살표 함수 사용법을 익힙니다', function () {
// function 키워드를 생략하고 화살표 => 를 붙입니다
const add = (x, y) => {
return x + y
}
expect(add(10, 20)).to.eql(30) // 작성부분
// 리턴을 생략할 수 있습니다
const subtract = (x, y) => x - y
expect(subtract(10, 20)).to.eql(-10) // 작성부분
// 필요에 따라 소괄호를 붙일 수도 있습니다
const multiply = (x, y) => (x * y)
expect(multiply(10, 20)).to.eql(200) // 작성부분
// 파라미터가 하나일 경우 소괄호 생략이 가능합니다
const divideBy10 = x => x / 10
expect(divideBy10(100)).to.eql(10) // 작성부분
})원시자료형, 참조자료형
원시자료형의 경우 값 자체에 대한 변경은 불가능 하다
다만 원시자료형을 변수에 할당할 경우 또는 원시자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어난다
// ex) 원시자료형 기본구조에 대한 이해
it('원시 자료형은 값 자체에 대한 변경이 불가능(immutable)합니다.', function () {
let name = 'Hello';
expect(name).to.equal('Hello'); // 작성부분
expect(name.toUpperCase()).to.equal('HELLO'); // 작성부분
expect(name).to.equal('Hello'); // 작성부분
// 새로운 값으로 재할당은 가능합니다.
name = name.toUpperCase();
expect(name).to.equal('HELLO'); // 작성부분참조자료형의 경우 데이터는 동적(dymamic)으로 변하며,
변수에 할당할 경우 데이터의 주소가 저장된다 라는 점 꼭기억
// ex) 참조자료형 구조에 대한 이해
it('참조 자료형의 데이터는 동적(dynamic)으로 변합니다.', function () {
const arr = [1, 2, 3];
expect(arr.length).to.equal(3); // 작성부분
arr.push(4, 5, 6);
expect(arr.length).to.equal(6); // 작성부분
arr.pop();
expect(arr.length).to.equal(5); // 작성부분
const obj = {};
expect(Object.keys(obj).length).to.equal(0); // 작성부분
obj['name'] = 'codestates';
obj.quality = 'best';
obj.product = ['sw engineering', 'product manager', 'growth marketing', 'data science'];
expect(Object.keys(obj).length).to.equal(3); // 작성부분
delete obj.name;
expect(Object.keys(obj).length).to.equal(2); // 작성부분
});배열
배열은 햇갈릴만한 요소들이 자리잡고 있으며, 요소를 잘 다뤄야 한다
// ex) 배열의 기본에 대해 다시한번 확인한다
it('Array의 기본을 확인합니다.', function () {
const emptyArr = [];
expect(typeof emptyArr === 'array').to.equal(false); // 작성부분
expect(emptyArr.length).to.equal(0); // 작성부분
const multiTypeArr = [
0,
1,
'two',
function () {
return 3;
},
{ value1: 4, value2: 5 },
[6, 7],
];
expect(multiTypeArr.length).to.equal(6); // 작성부분
expect(multiTypeArr[0]).to.equal(0); // 작성부분
expect(multiTypeArr[2]).to.equal('two'); // 작성부분
expect(multiTypeArr[3]()).to.equal(3); // 작성부분
expect(multiTypeArr[4].value1).to.equal(4); // 작성부분
expect(multiTypeArr[4]['value2']).to.equal(5); // 작성부분
expect(multiTypeArr[5][1]).to.equal(7); // 작성부분
});객체
객체또한 배열과 비슷하게 느껴진다 분명 배열과는 차이점이 존재하며 이또한 예제로 정확히 확인해본다
// ex) 객체의 기본을 보다 정확히 확인
it('Object의 기본을 확인합니다.', function () {
const emptyObj = {};
expect(typeof emptyObj === 'object').to.equal(true); // 작성부분
expect(emptyObj.length).to.equal(); // 작성부분
const megalomaniac = {
mastermind: 'Joker',
henchwoman: 'Harley',
getMembers: function () {
return [this.mastermind, this.henchwoman];
},
relations: ['Anarky', 'Duela Dent', 'Lucy'],
twins: {
'Jared Leto': 'Suicide Squad',
'Joaquin Phoenix': 'Joker',
'Heath Ledger': 'The Dark Knight',
'Jack Nicholson': 'Tim Burton Batman',
},
};
expect(megalomaniac.length).to.equal(); // 작성부분
expect(megalomaniac.mastermind).to.equal('Joker'); // 작성부분
expect(megalomaniac.henchwoman).to.equal('Harley'); // 작성부분
expect(megalomaniac.henchWoman).to.equal(); // 작성부분
expect(megalomaniac.getMembers()).to.deep.equal(['Joker', 'Harley']); // 작성부분
expect(megalomaniac.relations[2]).to.equal('Lucy'); // 작성부분
expect(megalomaniac.twins['Heath Ledger']).to.deep.equal('The Dark Knight'); // 작성부분
});전개문법
전개문법은 ES6에서 새로 추가된 문법으로
배열 혹은 객체를 그대로 펼칠수 있게 해준다
// ex) spread 활용법
it('여러 개의 배열을 이어붙일 수 있습니다.', function () {
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const concatenated = [...arr1, ...arr2];
expect(concatenated).to.deep.equal([0, 1, 2, 3, 4, 5]); // 작성부분
// 아래 코드도 같은 동작을 수행합니다.
// arr1.concat(arr2);
});// ex) rest 활용법
it('Rest Parameter는 전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용할 수 있습니다.', function () {
function sum(...nums) {
let sum = 0;
for (let i = 0; i < nums.length; i++) {
sum = sum + nums[i];
}
return sum;
}
expect(sum(1, 2, 3)).to.equal(6); // 작성부분
expect(sum(1, 2, 3, 4)).to.equal(10); // 작성부분
});구조분해할당
앞서배운 배열과 객체, 그리고 전개문법을 이용해 활용하며, 기본적인 구조는 어렵지 않다
// ex) 배열 분해
it('배열을 분해합니다', () => {
const array = ['code', 'states', 'im', 'course']
const [first, second] = array
expect(first).to.eql('code') // 작성부분
expect(second).to.eql('states') // 작성부분
const result = []
function foo([first, second]) {
result.push(second)
result.push(first)
}
foo(array)
expect(result).to.eql(['states', 'code']) // 작성부분
})// ex) 객체 분해
it('객체를 분해합니다', () => {
const student = { name: '박해커', major: '물리학과' }
const { name } = student
expect(name).to.eql('박해커') // 작성부분
})주요문법 총 9가지를 다시 과제로 공부해보며 복습이 중요하다는것을 다시한번 깨닫게 된다 난이도가 엄청 어렵거나 하진 않았지만 문제를 보면 조금의 딜레이가 걸리고 생각하는 시간이 조금 있었기에, 다시한번 초기화 후 문제를 풀다보면 보다 정확히 이해할 수 있을듯 하다
Front-end