자바스크립트 중급 유튜브 강의

심민기·2022년 4월 22일

자바스크립트

목록 보기

11/11

https://www.youtube.com/watch?v=4_WLS9Lj6n4

var,let,const

var는 한번 선언한 변수를 다시 선언가능.
var name = '민기';
var name = '이르그'; -- O

let은 안됨.
let name = '민기';
let name = '이르그'; -- X

var는 선언전에 사용가능.

console.log(name);
var name = '이르그';

왜냐면 실제로 var는 최상위 층에 이미 선언된 것이므로.(호이스팅이라고 한다.)
이러면 값은 undefined가 뜬다. name이라는 변수는 있어도 그 안의 값은 없기 떄문에.

호이스팅: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동.

let도 호이스팅은 되지만 오류를 일으킨다.

https://yceffort.kr/2020/05/var-let-const-hoisting

객체 메소드

객체 복제.

const user = {
name : "이르그",
age : 20
} 객체가 있을때 이를 복제하는 법은??

const cloneUser = user;로 할당을 해주면 복제하는 것이 아니라. user는 객체를 가리키는 주소에 불과하므로

동일 객체를 둘이 같이 쓰는상황, 당연히 한쪽에서 객체를 바꾸면 다른 쪽도 바뀐다.

복제 할려면 Object.assign()을 사용해야함.

const newUser = Object.assign({},user);
앞의{}는 초기값, 여기에 user의 내용이 결합되어 복제되는 것.

초기값에 추가를 하면.
const newUser = Object.assign({ gender: 'male'},user);

객체는.
gender: 'male',
name : "이르그",
age : 20,이된다.

만약 초기값과 결합객체에서 이름이 같다면, 값을 덮어씌게 된다.
두 개이상의 객체도 하나로 뭉쳐 복제가능하다.
Object.assign(user, info1, info2);

키 배열 반환.

const user = { name : "이르그", age : 20, gender : '남성', } user 객체에 대해서.

객체의 키들(name,age등)을 배열로 반환하기.
Object.keys(user);
객체의 값들(이르그,20등)을 배열로 반환하기.
Object.values(user);
객체의 키와 값을 배열로 반환하기.
Object.entries(user);

반대로 배열을 객체로 변환하기.

const arr =
[
["name", "이르그"],
["age", "20"],
["gender", "남성"]\
];요 배열에 대해서.
객체로 바꾸려면.

Object.fromEntries(arr);

심볼

객체의 프로퍼티는 문자열로 보통 씀. 심볼을 쓸수 있다. 심볼은 유일한 식별자를 쓸때 사용. const a = Symbol(); const b = Symbol(); 이렇게 사용한다.

별 차이가 없어보이지만 a===b; 의 값이 false가 나오게 된다.
심볼을 쓰면 유일성이 보장되는 것이다.

다른사람의 코드에 내 코드를 넣고 싶을떄 괴상한 이름으로 선언하는 대신 심볼을 사용.

https://another-light.tistory.com/105

숫자와 수학.

10진수를 2진수나 16진수로 바꿀 필요가 있다. toString

수학.
Math

소수점 둘째자리까지 표현하고 싶음(셋째 자리에서 반올림.)
let userRate = 30.1234;
Math.round(userRate * 100)/100 //30.12

더 간단하게 하려면 toFixed사용
userRate.toFixed(2); //30.12
toFixed사용하면 반환하는 값은 문자열 값이다.

문자열을 숫자로 바꾸기 위해 쓰는 것이
parseInt
https://www.codingfactory.net/11026

parseInt( string, n )
string을 n진법일 때의 값으로 바꿉니다. n은 옵션으로 2부터 36까지 입력할 수 있습니다. 입력하지 않으면 10으로 처리합니다.
string의 처리는 parseFloat()와 거의 같습니다.
소수 부분은 버립니다.
0x로 시작하면 16진법으로 처리합니다.

parseInt( '100', 2 ) : 100은 2진법으로 4입니다.

string

indexOf 사용

https://hianna.tistory.com/379

문자가 있으면 0을 반환, 없으면 -1이 나오므로 문자를 찾아서 금지어를 정확하게 내보내고 싶다면 조건을 >-1로 해야하는 것이다.

배열.

배열의 특정요소 지우기.
arr.splice(n,m)
n은 시작위치(index기준, 시작위치가 0), m은 개수

배열의 특정요소 지우고 추가하기.
arr.splice(n,m,x,y)
n부터 m개를 지우고 x,y를 추가한다.

splice 자체는 삭제된 요소를 반환하는 값이다.

arr.slice(n,m)은 n부터 m까지 반환한다.

https://bigtop.tistory.com/58
배열의 특정 값 찾기.
https://hianna.tistory.com/406

콜백함수란?
https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/

arr.map의 이용.
https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Array-map
const arr = [0,1,2,3];

let squaredArr = arr.map(function(element){
return element element;
});
// 혹은 arrow 함수 가능
squaredArr = arr.map(element => element element);

console.log(squaredArr); // [ 0, 1, 4, 9 ]

리턴되는 값이 배열로 나온다는 차이점이 있다.

이놈이 배열인지를 알려면 쓰는 것이
isArray()
https://hianna.tistory.com/402

typeof를 사용하면 객체라고 뭉뚱그려 나오기 때문에 배열 판별시에 사용한다.
document.writeln(Array.isArray([1, 2])); // true
document.writeln(Array.isArray(new Array(3))); // true

document.writeln(Array.isArray({})); // false

sort() reduce()

https://mango-log.tistory.com/9

reduce() 메서드는 배열의 값을 하나하나 누적해서 비교시키고 최종 하나의 값을 도출시키고자 할 때 사용하기 좋은 메서드

var arr = [1, 1, 3, 3, 3, 5, 5, 5, 5, 10];

var sum = arr.reduce(function (a, b) {
return a + b;
});
console.log(sum); //41
배열의 모든 값 더하기.

구조 분해 할당 구문

https://chanhuiseok.github.io/posts/js-10/ 구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다. let [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라, 위처럼 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식 let array = [1, 2, 3, 4, 5]; let [a, b, ...rest] = array; console.log(rest); // [3, 4, 5];

... 요소를 Rest elements

배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때
const array = [1, 2, 3];
const [first] = array;
console.log(first); // 1

객체(object)에서의 구조 분해 할당

const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다...
const name = obj.name;
const age = obj.age;
const memo = obj.memo;

객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있다. obj로부터 분해된 name 프로퍼티의 값을 새롭게 이름지은 YourName 변수에 할당하고 있다.

const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'John'

객체 구조 분해 할당은 프로퍼티를 기준으로 하기 때문에, 배열 구조 분해 할당과 달리 그 순서가 뒤바뀌어도 전혀 문제없이 해당 프로퍼티의 값을 가져올 수 있다.

const obj = {
name: "John",
age: 18,
memo: "Hello",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;
console.log(name); // 'John'
console.log(age); // 18
console.log(memo); // 'Hello'

// 배열 구조 분해 할당의 경우 작성된 순서대로 배열의 값을 넣어준다.
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30

... 문법을 활용

const obj = {
name: "John",
age: 18,
memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }