variable
먼저 변수의 이름을 설정할 때는 숫자가 첫번째로 올 수 없다.
var
var test = 'string1';
console.log(test);// string1
var test = 'string2';
console.log(test);// string2유연한 사용 방식에 편할 수는 있지만 혼란을 야기하기 쉽다
let
let test = 'string1';
console.log(test);// string1
// let test = 'string2';
// SyntaxError: Identifier 'test' has already been declared
test = 'string2'
console.log(test);// string2- 재선언 불가능, 재할당 가능
const
const test = 'string1';
console.log(test);// string1
test = 'string2';
console.log(test);
// TypeError: Assignment to constant variable.- 재선언 불가능, 재할당 불가능 (불변)
변수 선언 방식
- 기본적으로
const를 사용하고 재할당이 필요한 경우let을 사용하는 것이 좋다 - hoisting 현상은 적용되지 않는 것인가???
hoisting
var변수 선언과 함수 선언문 에서만 일어난다고 생각하자
console.log(test1);// undefined
var test1 = 'hoisting';
//var 호이스팅 1단계 선언, 2단계 초기화 진행후 출력
console.log(test2);// ReferenceError: Cannot access 'test2' before initialization
let test2 = 'hoisting';
console.log(test3);// ReferenceError: Cannot access 'test3' before initialization
const test3 = 'hoisting';
//let 호이스팅 1단계 까지만 진행됨
test_func1();// hosting
function test_func1(){
console.log('hoisting');
}
test_func2();// TypeError: test_func2 is not a function
var test_func2 = function(){
console.log('hoisting');
} string
String과 Number형을 더하면 항상 String 형으로 변환됩니다.
let test = 200 + '10';
console.log(test);// 20010
console.log(typeof(test));// string
//뺄셈
test = '200'- 10;
console.log(test);// 190
console.log(typeof(test));// numberarray
push는 array의 마지막 부분, 즉 꼬리에 요소들을 추가하고,
unshift는 array의 맨 앞부분, 즉 머리에 요소를 추가합니다.
data type
null
null은 말그대로 아무것도 아닌 빈 객체를 가리고 있어서 object라고 나옵니다.
대소문자
lastName에 toUpperCase 함수를 사용한다고 lastName 변수의 값 자체가 바뀌지는 않았습니다.
lastName는 이전 값을 그대로 갖고 있습니다.
전화번호
- 전화번호는 문자열 형식이어야 0을 인식.
indexOf
indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인하고,
만약 있다면 몇번째 순서(index) 에 해당 문자열이 있는지 알려줍니다.
해당 문자열이 없다면 -1을 반환합니다.
string&number
Number 함수를 사용해서 String에서 Number형으로 전환할 수 있습니다.
Number함수 말고 parseInt, parseFloat 등이 있습니다.
Number형에서 String형으로 변환하고 싶을 수도 있습니다. toString()
console.log(Number("1.901"));// 1.901
console.log(parseInt("1.901"));// 1
console.log(parseFloat("1.901"));// 1.901random number
min, max 사이의 랜덤 숫자를 구하는 함수식?
function getRandomNumber (min, max) {
return Math.floor((Math.random() * (max - min + 1)) + min);
}- 0<a<1 범위를 min<a<max 라고 만드는 과정이다
a 에다가 어떤 수를 곱하여 min만큼의 여분을 만들어주고 마지막에 min을 더해주는것.
어떤수: (min 만큼의 여분을 만들어주어야 하므로 max-min + 주어진 수를 살리기 위한 1)
object
var객체이름 = {property이름1 : property값1, property이름2 : property값2}- 객체이름.property이름 / 객체이름['property이름']
객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.
property이름은 서로 중복이 되면 안된다.
scope
JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.
Block({})
코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
코드가 한줄한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.'
좋은 scoping 습관
즉, 한마디로 요약하면 global 변수는 쓰지 않도록 노력해야 하고,
최대한 {}내에서 let, const을 사용하여 변수를 새로 만들어서 쓰자는 말입니다.
class
- 객체(object)의 설계도인 클래스(class)는 문법이 비슷합니다.
둘의 가장 큰 차이는 cunstructor 라는 생성자 함수입니다.
생성자(constructor)
- class를 통해 생성된 객체를 인스턴스라고 부릅니다.
class는 새로운 instance를 생성할 때마다 constructor() 메소드를 호출합니다.
인스턴스
위에서 class instance를 생성했습니다.
인스턴스(Instance)는 class를 통해 생성된 객체입니다.
인스턴스는 class의 property이름과 method를 갖는 객체입니다.
인스턴스 마다 모두 다른 property 값을 갖고 있습니다.
인스턴스는 Class 이름에 new를 붙여서 생성합니다.
클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.
메서드
객체가 프로퍼티 값으로 갖고 있는 함수를 메서드라고 부릅니다
예시
class Car {
constructor(name, price) {// 생성자
this.name = name;
this.price = price;
this.department = "선릉지점";
}
applyDiscount(discount) {// 메서드
return this.price * discount;
}
changeDepartment(departmentName) {// 메서드
this.department = departmentName;
}
}
const morning = new Car('Morning', 20000000);// 인스턴스화(new 필수)
console.log(morning);// Car { name: 'Morning', price: 20000000, department: '선릉지점' }
// 인스턴스 출력object(2)
객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다.
변수(variable) 선언할 때는 할 수 없었던 표현입니다.
let difficult = {
33: '숫자 형식도 되네',
'my name': '스페이스 포함 가능',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군!!',
'!키': '느낌표 있는 키는 따옴표가 필요하군',
$special: '$는 없어도 되는군'
};object 추출
- 스페이스가 포함된 키는 대괄호로 접근하면 됩니다.
숫자로 된 키는 대괄호로 접근해야 합니다. - const로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만,
그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다. - 객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference가 저장됩니다
진짜 값은 메모리 주소인 reference입니다.
arrow function
const getName1 = function(name){};
const getName2 = name => {};
function hi1(text){
text += '하세요';
return text;
}
const hi2 = text => {
text += '하세요';
return text;
}
function func1(name){
return name;
}
const func2 = name => name;template literals
const handleEdit = (nickname, interests) => {
const Object = {
nickname:nickname,
interests:interests.split(','),
bio:`제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
}
return Object;
}array methods
arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 입니다.
callback 함수란, 인자로 전달되는 함수라고 생각하시면 됩니다.
map vs forEach
- map 메서드는 배열을 반복해주는데,
callback 함수에서 return한 값으로 매(each) 요소를 수정해줍니다.
- forEach는 for 대신 사용하는 반복문입니다.
map과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것입니다.
그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 됩니다.
- map은 요소가 수정된 새로운 배열이 return되었다면,
forEach는 아무것도 return하는 것이 없습니다.
forEach는 단지 for문 대신 사용하는 반복 method 입니다.
const arr = [1,2,3];
console.log(arr.map(x=>x*x));// [1,4,9]
let test = [1,2,3,4];
test.forEach(i => {test.push(i+1)});// return 값은 없다
console.log(test);//[1,2,3,4,2,3,4,5]object(3)
const information = {
name: '김개발'
}
const verb = 'developes'
const project = 'facebook'
information[verb] = project // [A] 값을 할당받은 변수를 활용하는 방식
information.developes = 'facebook' // [B] 값을 직접 활용하는 방식
console.log(information);// { name: '김개발', developes: 'facebook' }- A와 같이 할당이 가능합니다.
- B의 방식으로도 할당이 가능할 수도 있겠지만, 이 경우 키와 값은 항상 정해져 있게 됩니다.
하지만 A와 같은 방법은 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해집니다.
다행히도 객체도 배열처럼 순회가 가능합니다!
다만 배열과 다르게 명확하게 정해진 순서가 없기 때문에, 어떤 순서에 따라 객체의 키에 접근하게 될지 알 순 없습니다.
때문에 객체의 순회는 "순서가 보장되지 않은 순회" 라고 부릅니다.
Object.keys, Object.values, Object.entries
Object.keys(obj)
- 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드
Object.values(obj)
- 객체의 키가 아닌 값으로 이루어진 배열을 리턴
Object.entries(obj)
- 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴
for in
- 객체를 가지고 for-in 문을 사용하면,
for-in 문의 인덱스에 해당하는 변수(숫자)가,
객체의 키에 해당하는 문자열을 할당받게 됩니다.
