코딩앙마님의 자바스크립트 기초 강좌 몰아보기 100분.
기본적인 내용들이 일목요연하게 나열되어 있다.
기억을 되살리는 의미로 스킵하지 않고 전부 들었다.
필요한 내용, 추가 공부가 필요한 부분들을 기록해보자.
1. 벡틱 사용
function sayHello(name){
let msg = `Hello, ${name}`;
}
sayHello(‘Mike’);
// 결과 : Hello Mike2. 논리연산자
이미 알고 있는 개념이었지만, 이렇게 신경써서 코드를 작성하지 못했던 것 같다.
대수롭지 않게 조건을 나열하며 코드를 작성해온 나날들을 반성하게 되었다.
- Or : 첫번째 true를 발견하는 즉시 평가를 멈춤
- And : 첫번째 false를 발견하는 즉시 평가를 멈춤
실제 코드를 작성할 때에는 어떠한 순서로 평가를 배치할지 고민해보자
ex) 운전면허가 있고, 시력이 좋은 여군
운전면허 소지 확률 : 80% / 시력이 좋다 60% / 여군 : 7% 일 때
여군인데, 시력이 좋고 운전면허가 있는 사람 으로 평가하는 것이 좋다.
첫번째 평가에서 93%가 걸러지므로 성능 향상에 좋다.
3. switch
case문의 내용이 같다면 case를 붙여쓸 수 있다.
let fruit = prompt("얼마에요")
switch(fruit){
case '사과' :
console.log("100원");
break;
case '멜론' :
case '수박' :
console.log("500원");
break;
default :
console.log("안팔아요")
}4. 함수
// (1)
Function sayHello(name){
let msg = ‘Hello’
if(name){
msg += name
}
console.log(msg);
}
sayHello();
// 결과 : Hello
// 왜냐하면 name이 없으면 undefined 그럼 if(name)은 false.// (2)
function sayHello(name){
let newName = name || ‘friend’;
let msg += `Hello, ${name}`
Console.log(msg)
}
…
// 변수에 논리연산자를 사용하면 코드를 간결하게 작성할 수 있다.// (3)
Function sayHello(name = ‘friend’) {
let msg = `Hello, ${name}`
console.log(msg)
}
// name의 기본값(default value)을 설정하는 형태로 코드를 간결하게 작성할 수 있다.
5. 함수선언문과 함수표현식
- 함수선언문
: 어디서든 호출할 수 있다. 호이스팅(Hoisting)
sayHello();
function sayHello(){
console.log(‘Hello’);
}자바스크립트는 위에서 아래로 순차적으로 작동하는 인터프리터언어이기 때문에 아래와 같이 사용할 수 있다. 실행 전 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성한다. 그렇기 때문에 함수를 사용할 수 있는 범위는 코드 위치보다 위로 올라간다. 이러한 개념을 호이스팅(Hoisting)이라 한다.
(코드의 위치가 올라간다는 것이 아니라 개념적인 것)
- 함수표현식
: 이름이 없는 함수를 만든 후 변수에 할당해준다.
let sayHello = function() {
console.log(‘Hello’);
}
sayHello();함수표현식은 함수선언문과 달리 코드에 도달하면 생성된다. 그렇기 때문에 표현식 이후 사용해야한다.
- 화살표 함수
//***** TEST CODE ******
let add = function(num1, num2){
return num1 + num2;
}
// function을 없애고 괄호 뒤에 화살표 => 를 넣어준다.
let add = (num1, num2) => {return num1 + num2;}
// return문은 중괄호가 아닌 소괄호를 사용하여 바꿀 수 있다.
let add = (num1, num2) => (num1 + num2;)
// return문이 1줄이라면 소괄호도 생략하여 쓸 수 있다.
let add = (num1, num2) => num1 + num2;
// 인수가 하나라면 괄호를 생략할 수 있다.
let sayHello = (name) => `Hello ${name}`;
let sayHello = name => `Hello ${name}`;
// 인수가 없을 경우에는 괄호를 생략할 수 없다.
let showError = () => {
alert(‘error!’);
}화살표 함수는 일반함수와 달리 자신만의 this를 가지지 않는다. 화살표 함수 내부에서 this를 사용하면, 그 this는 외부값을 가져온다. (브라우저 : window , node.js : global)
6. Object(객체)
- 기본적인 생성, 접근, 추가, 삭제, 확인 방법
// Object(객체) 생성
const superman = {
name : ‘clark’,
age : 33,
}
// 접근
superman.name // ‘clark’
superman[‘age’] // 33
// 추가
superman.gender = ‘male’
superman[‘hairColor’] = ‘black’
// 삭제
delete superman.hairColor;
// 존재여부 확인
superman.birthDay; // 에러발생x undefined
‘birthDay’ in superman; // false
‘age’ in superman; // true
- for ... in : 객체를 순회하면서 값을 얻을 수 있다.
// (1)
for (let key in superman){
console.log(key)
console.log(superman[key])
}
// (2)
const superman = {
name : ‘clark’,
age : 33,
}
for(x in superman) {
console.log(superman[x]);
}
// superman[‘name], superman[age] 를 순회하여 값을 얻는다.for (key in object명) 여기서 key는 object가 가진 프로퍼티들을 말한다.
key가 아니라 x, a, b 등으로도 사용가능하다
7. Method
: 객체에 프로퍼티로 할당된 함수를 말한다.
const superman = {
name : ‘clark’,
age : 33,
fly : function() {
console.log(‘날아간다')
}
// ( fly : {} )fly : function(){}가 method에 해당된다. function 키워드를 생략하고 작성할 수 있다.
8. Array
- 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다.
let arr = [
‘ABC’,
3,
false,
{
name : ‘Mike’
age : 10
},
function() {
console.log(‘test’);
];
- for ... of
let days = [‘월’, ‘화’, ‘수’];
for(let day of days){
console.log(day)
}
// 결과 : 월 화 수배열도 객체형이기 때문에 for in을 쓸 수는 있으나, 장점보다 단점이 많기때문에 권장히지 않는다. for보다 간단하지만 index를 얻을 수 없다.
끝으로...
자바스크립트를 공부할 때마다 이론만 공부해와서 실습이 부족했다.
앞으로는 실습도 병행해서 공부해야겠다.
기초강좌지만 보면서 다시 떠올릴 수 있어서 좋았다.
for / for...in / for...of / foreach 반복문별 특징고 차이점을 추가 학습해야겠다.
공부자료 : 자바스크립트 기초 강좌 : 100분 완성
