24/1/2 오랜만의 자바스크립트 문법(1)
2024. 1. 3. 08:46ㆍ카테고리 없음
var name = 'mike' //var는 초기에 호이스팅되서 파일 최상단으로 호이스팅 된서 선언된다. 재선언 재할당이 가능하다.
// 함수 스코프이기 떄문에 함수를 제외하고 지역적으로 선언할당 되면 전역이든 지역이든 할당된 값을 사용 가능하다.
//함수 안에서 선언된것은 함수에서만 사용가능
let name = 'tom' // let은 재선언은 안되고 재할당만 가능하다. 블록스코프이기 때문에 if문 for문 함수 등에서 선언되면
//지역적으로만 쓸수 있다.
const name = 'jame' //const 재선언 ,재할당 불가 블록스코프이기 때문에 이하동문
<생성자 함수> 동일한 객체를 뽑아낼때 하드코딩하지 말고 서야할 붕어빵틀
function User(name, age) { // 함수명을 대문자로 쓰는게 컨벤션
//this = {} //생성자함수로서 호출됐을때 내부적으로 생기는 코드
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
//return this //이것도 생성자함수로서 호출됐을때 내부적으로 생기는 코드
}
let user1 = new User("han", 10); //꼭 new를 붙여줘야 객체로 결과값이 반환된다. this는 user1이 된다.
let user2 = new User("kim ", 20); //new가 없으면 그냥 함수이다.
user2.sayName()
<computed property> 객체안에 키에 미리 선언한 변수도 넣을수 있다.
let a= 'age'
const user = {
[a] : 30, //대괄호 안에 a를 넣으면 key가 'age' 가 된다.
[1+5] : 10 // key가 6이됨
}
function User(key, val) { //객체를 리턴하는 함수 형식이 유용하다.
return {
[key]: val, //받은 인자 두개를 이런식으로 사용가능하다.
};
}
const user2 = user //이런식으로 하면 user2는 user객체의 주소값만 받으므로 제대로 복사가 안된다.
const cloneUser = Object.assign({} , user) //이럴때 이걸 쓰면 user를 온전히 복사가 가능하다.
const cloneUser2 = Object.assign({gender : 'male'},user) //소괄호 안에 두 객체를 합치는 작업이된다. 키값이 같다면
//뒤에 객체의 키로 덮어씌어진다.Object.keys(user) //user 객체의 키들을 요소로 같는 배열 도출
Object.values(user) //이거는 밸류들을 요소로 같는 배열 생성
<심볼> 객체에 자기맘대로 키와 밸류를 넣으면 다른개발자가 이를 모르고 사용하여 에러가 날수도 있다.
이때 나만 알수 있는 값을 넣고 싶다면 쓸수 있다.
const obj = {
1: "1이다", // 이렇게 넣어도 객체의 key는 string이다.
false: "kim",
name : 'bob'
};
const showName = Symbol('show name') // 쇼네임을 심볼로 만들고
obj[showName] =function(){ //객체에 넣어보자.
console.log(this.name)
}
obj[showName]() //그냥 호출하면 잘 호출되지만 for문이나 객체를 호출하면 안나오므로
//다른개발자가 모르고 에러를 내지 않게 할수 있다.const a = Symbol();
const b = Symbol(); //이런식으로 했을때
a!==b ,a!=b //두값은 전혀 다른 값이다.
const id1 = Symbol.for('id') //특수성을 띄지만 같은 심볼로 취급하고 싶으면 for를 붙여사용 하면 된다.
const id2 = symbol.for('id') //이러면 두 심볼은 같다.
<Math> 를 배워보자.
let num = 10
num.toString() // '10' // 투스트링은 문자로 바꿔준다.
num.toString(2) // '1010' // 소괄호 안에 숫자를 넣으면 해당 진수로 바꿔준다.
let num2=255
num2.toString(16); //ff //16진수로 바꾸면 ff가 된다.
Math.PI //3.14.... //원주율
let num3 =5.1
Math.ceil(num3) // 6 소수점 첫째에서 올림을 한 결과가 나온다.
Math.floor(num3) //5 반대로 내림을 한 결과가 나온다.
Math.round(num3) //5 소수점 첫째자리값을 반올림해준다. 5이상 이면 올리고 5미만이면 버린다.
num3.toFixed(0) //5 //소괄호 안에 소수점 자리수가 들어간다.
num3.toFixed(1) //5.1
num3.toFixed(3) //5.100 //주의 해야될께 toFixed는 결과를 문자열로 반환
isNaN(x) //true //소괄호 안에 값이 NaN 인지 아닌지 알려준다.
isNaN(3) // false //
parseInt('10px') //10 // 정수로 바꿔주는데 읽을수 있는 숫자까지 읽어준다. 앞에서 부터
parseInt('11',2) //두번째 인수를 진수로 받는다. //3을 도출하는데 2진법을 10진법으로 바꾸어준결과이다.
Math.random() // 0~1 의 값을 랜덤으로 반환한다.
Math.max(1,4,-1,10,0,-5) //10 //인자들중 최대값을 알려준다.
Math.min(1,4,-1,10,0,-5) //-5 //최솟값을 알려준다.
Math.pow(2,10) === 2**10 //2의 10승을 나타낸다.
Math.sqrt(16) //4 인수값의 제곱근을 알려준다.
<string>을 배워봅세다.
let desc = "안녕하세요";
desc.length; // 5 길이를 알려준다
desc[2]; //하 배열처럼 인덱스를 갖는데 대괄호에 넣는 방식이용
desc[4] = 2; //배열을 재할당이 되지만 스트링은 안된다.
let desc2 = "abcdef";
desc2.toUpperCase(); //'ABCDEF" 대문자로 바꾼다.
desc2.toLowerCase(); //'abcdef' 소문자로 바꾼다.
desc.indexOf("안녕"); //0 인자의 글자의 인덱스를 알려준다. 해당 스트링이 없으면 -1은반환한다.
let 스트링 = "abcdef";
스트링.slice(2); //cdef // 시작 인덱스부터 끝까지를 반환한다.
스트링.slice(1,3) //bc 두번째인자로 끝 인덱스를 넣어주면 해당 인덱스 전까지 반환한다.
스트링.substring(1, 4); //slice와 비슷한데 두번째 인자와 첫번째 인자를 바꿔도 똑같이 기능한다.
let haha = desc.trim(); //앞뒤의 쓸데없는 공백을 지워준다.
desc.repeat(4); //해당스트링은 4번 반복한 값을 반환한다.
"a".codePointAt(0); //97 아스키코드 값을 보여준다.
<Array>
let arr = [1, 2, 3, 4, 5];
let result = arr.splice(0, 2, 100, 200); // 스플라이스 함수 의 첫번째인자는 시작 인덱스 두번째는 뺄 요소의 갯수
//그다음은 빼낸자리에 들어갈 요소들이다.console.log(arr); // [100,200,3,4,5] 요렇게 된다.
console.log(result); // [1,2] // 뺴낸애들은 그대로 배열이 된다.
let arr2 = [ 1, 2, 3, 4, 5 ];
arr2.slice(1, 4); //[2,3,4] 슬라이스도 비슷 한데 빼낸 애들을 따로 배열로 보여준다.
let add3 = [1, 2];
add3.concat([3, 4, [5, 6]],7,8); // [1,2,3,4,5,6,7,8] 콘캣은 인자안의 요소들을 한배열로 만들어버린다.
arr=[1,2,3,4,5]
arr.forEach((item, index, arr) => {}); // 포이치는 배열의 요소들을 순회하여 매서드를 실행하는데
//첫번째 인자는 해당 배열의 요소 , 두번째는 인덱스 ,세번째는 array 자체이다. //3번째는 실전에서 써본적이 없다 ㄷㄷ
arr.indexOf(3); //2 // 인자가 어레이에 몇번인덱스에 있는지 알려준다. 어레이의 가장 앞에 요소만 반환한다.
arr.indexOf(3, 3); // 두번째 인자는 그 인덱스의 다음부터 찾는다.
arr.lastIndexOf(3); //3 // 뒤에서 부터 찾는다.
arr.includes(1); //단순히 포함 되는지 안되는지 여부를 불리언으로 반환한다.
arr.find(); //인덱스를 알려주는게 아니라 실제 찾은 요소를 반환해준다.
arr.filter(); //find가 하나만 찾는다면 filter는 만족하는 요소를 다 찾아준다.
arr.reverse(); //배열을 역순으로 뒤집는다.
arr.map(); // 새로운 배열을 반환해준다. 소괄호 안에 함수식을 써주고 그 함수는 return 뒤의 값으로 반환해준다.
// 파인드 필터 맵 전부다 포이치문 처럼 item과 index를 첫번째 두번째 인자로 받는 함수를 인자로 갖는다.
let result1 = arr.join(""); //'12345' // arr의 요소들을 합치 스트링을 반환한다. 상세사용이 궁금하면 챗지피티를 이용해라
//난 이미 안다. ㅋㅋㅋ
const users = "1,2,3,4,5";
users.split(","); //['1','2','3','4','5'] //split은 반대로 스트링을 배열로 만든다. // 조인이나 스플릿은 소괄호안에 것을 빼면서
//만들어주는데 이게 또 심오하다 챗 지피티를 이용하도록 ㅋㅋㅋ ㅈㅅ
Array.isArray(arr); //얘는 어레이면 트루 아니면 false를 반환한다.
let arr = [1, 3, 5, 4, 2];
arr.sort((a, b) => a - b); // [1,2,3,4,5] 오름차순으로 정렬해준다.
arr.sort((a, b) => b - a); // [5,4,3,2,1] 내림차순으로 정렬해준다.
//lodash 는 sortBy 라는 매서드를 제공하는 라이브러리 꼭 쓰세요 ㅋ
arr.reduce((prev, cur) => { //배열의 요소를 순회하며 값을 누적 계산 해준다. prev는 누적된값 cur은 현재 요소이다.
return prev + cur; //명명은 중요하지 않다. 첫번째 인자 두번째 인자인것이 중요 //리턴된값을 새로운 prev가된 //다.
}, 0); //0은 초기값 꼭 0이 아니여도 된다.
let userlist = [{ name: "mike" }, { name: "jane" }, { name: " tom" }];
let result = userlist.reduce((prev, cur) => { //이 사용 방식보고 놀랬다. 지금까지 for문 써서 알고리즘 풀었는데
prev.push(cur.name); //이거 사용하면 더욱 간결한 식이 될것같다.
return prev; //다음 연산에 꼭 써야하기 때문에 return은 필수
}, []);
console.log(result);//[ 'mike', 'jane', ' tom' ]
<구조분해 할당> 이거 잘해야 로직이 예뻐져용
let [x, y] = [1, 2]; // x는 1 y는 2로 할당된다.
let [a, b, c = 5] = [1, 2]; // 배열이므로 순서대로 할당되는데 원래 c는 undefined가 뜰테지만 처렇게 초기값을 5주는형태가
//사용가능하다 구조분해 할당이 되는 값이 있으면 그값을 쓰고 없으면 초기값으로 할당된다.let [user1, , user2] = [1, 2, 3, 4]; // user1은 1 user2는 3이 할당된다. 저렇게 사용가능하다.
[a, b] = [b, a]; // a와 b의 할당 값을 바꾸고 싶으면 이렇게 하면 된다.
let user = { name: "mike", age: 30 }; //객체에서도 쓸수 있다.
let { name: userName, age, gender } = user; // 이러면 구조분해 할당이 된다. name이 특이한데 사용할때 다른
//다른변수명으로 사용하고 싶다면 저렇게 하면 된다. 이제 userName으로
//사용할수 있다. gender는 할당할수 있는값이 없으므로 undefined가 된다.
//역시 초기값 설정이 가능하다 해보도록
//배열은 순서가 중요하지만 일반 객체는 순서 상관없으므로 구조분해 할당할때 순서가
//달라도 된다. {age ,name} 해도 된다는 소리다 해보도록!!!
<나머지 매개변수 ,전개구문>
function showName(name) { //es6이전 문법은 arguments를 많이 사용했다고 한다.
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments[1]);
}
showName("mike", "tom"); //2 mike tom // 이런식으로 사용할수 있다
function showName2(...names) { //새로운 es6문법은 이렇게 쓴다.
console.log(names);
}
showName2(); //[] //배열형태로 나머지 매개변수들을 보여준다.
showName2("mike"); //[ 'mike' ]
showName2("mike", "tom"); //[ 'mike', 'tom' ]
function User(name, age, ...skills) { //생성자 함수로 인스턴스를 만들어서 해보자
(this.name = name), (this.age = age), (this.skills = skills);
}
const user = new User("tom", 20, "html ", "css"); //요래요래 써진다.
console.log(user); //{ name: 'tom', age: 20, skills: [ 'html ', 'css' ] } //주의점이 나머지매개변수는 매개변수들 뒤에 써야한 // 다
let arr1 = [1, 2, 3]; //전개구문 사용법이다.
let arr2 = [4, 5, 6];
let sumArr = [...arr1, ...arr2]; // [1,2,3,4,5,6] //너무나 간단하게 두 배열을 합쳐준다.
// 생성자함수랑 심볼이 좀 낯선데 재밌다