본문 바로가기

공부/JavaScript9

Rest parameters, Spread syntax 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) 인수전달 - 함수에 넘겨주는 인수의 개수에는 제한 없음. function showName(name) { // 함수에 넘겨주는 인수의 개수 제한 없음 console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // 에러는 발생하지 않지만 'Mike'만 찍힘 showName(); // 아무것도 전달하지 않아도 에러 발생하지 않음. undefined 찍힘 함수에 인수를 전달하는 방법(2가지) - arguments - 나머지 매개 변수 사용(여러 장점이 있음!) * 화살표 함수에는 arguments가 없음 1. arguments - 함수로 넘어 온 모든 .. 2023. 3. 14.
JavaScript - Destructuring assignment Destructuring assignment(구조 분해 할당) 란? 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변숭 담을 수 있게 하는 표현식 배열 구조 분해 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2 예제) let users = ['Mike', ' Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' 예제2) split 이용하기 let users = ["Mike-Tom-Jane"]; let [user1, user2, us.. 2023. 3. 14.
JavaScript - Array methods Array push() : 뒤에 삽입 pop() : 뒤에 삭제 unshift() : 앞에 삽입 shight : 앞에 삭제 arr.splice(n, m) : 특정 요소 지움. n : 시작, m : 개수 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr); // [1, 4, 5] arr.splice(n, m, x) : 특정 요소 지우고 추가 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr); // [1, 100, 200, 5] let arr = ["나는", "철수", "입니다."]; arr.splice(1, 0, "대한민국", "소방관"); // ["나는", "대한민국",.. 2023. 3. 8.
JavaScript - String methods toUpperCase() : 모든 문자를 대문자로 toLowerCase() : 모든 문자를 소문자로 indexOf('text') : text의 처음 위치를 알려줌. 찾는 문자가 없으면 -1을 반환 slice(n,m) : n은 시작점/ m은 없으면 문자열 끝까지, 양수면 그 숫자까지(포함하지 않음), 음수면 끝에서부터 셈 substring(n,m) : n과 m 사이 문자열 반환. n과 m을 바꿔도 동작함. 음수는 0으로 인식 substr(n,m) : n부터 시작. m개를 가져옴. trim() : 앞 뒤 공백 제거 repeat(n) : n번 반복 예제) 목차 리스트에서 글자만 가져오기 let list = [ "01. 들어가며", "02. JS의 역사", "03. 자료형", "04. 함수", "05. 배열",.. 2023. 3. 6.
JavaScript - Number, Math toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); //"10" num.toString(2); // 2진수로 나타냄 : "1010" let num2 = 255; num2.toString(16); // "ff" Math 함수 Math.ceil() : 올림 let num1 = 5.7; let num2 = 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 Math.floor() : 내림 let num1 = 5.7; let num2 = 5.7; Math.floor(num1); // 5 Math.floor(num2); // 5 Math.round() : 반올림 let num1 = 5.7; let num2 = 5.7; Math.. 2023. 3. 6.
JavaScript - Symbol 심볼(Symbol) property key는 문자형도 가능하지만 심볼형도 가능하다! 심볼은 유일한 식별자를 만들 때 사용한다. 전체 코드중에 딱 한 개만 있어야 함!!(유일성 보장) const a = Symbol(); // new를 붙이지 않는다! 예제) const id = Symvol('id'); 위처럼 설명을 붙여줄 수 있음. 설명을 붙여주면 디버깅할 때 편하다. + 설명을 같게 하면 다음과 같이 같은 결과를 나오게 하지만 id와 id2는 같지 않다. property key : 심볼형 const id = Symbol('id'); const user = { name : 'Mike', age : 30, [id] : 'myid' } console.log(user); console.log(Object.key.. 2023. 2. 27.
JavaScript - 생성자 함수/Object - computed property, method 생성자 함수 기본 동작 구조 (주석인 부분은 new 함수명();을 한 순간 동작하는 부분이다.) function User(name, age) { // 생성자 함수는 첫 글자를 대문자로! // this = {} this.name = name; this.age = age; // return this; } new 함수명(); 예제) function Item(title, price){ this.title = title; this.price = price; this.showPrice = function() { console.log(`가격은 ${price}원 입니다.`); } } const item1 = new Item('인형', 3000); const item2 = new Item("가방", 4000); cons.. 2023. 2. 23.
JavaScript - 변수/스코프 변수 let과 var : 값을 바꿀 수 있음. const : 값을 바꿀 수 없음. var // 한 번 선언된 변수를 다시 선언할 수 있다. var name = "Mike"; console.log(name); // Mike var name = "Jane"; console.log(name); // Jane * Hoisting(호이스팅) : var로 선언한 모든 변수는 코드가 실제로 상단으로 이동하진 않지만 최상위로 끌어 올려진 것 처럼 동작한다. // 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'Mike'; // 이렇게 동작하는 것처럼 보임(hoisting) // var name; // console.log(name); // name = 'M.. 2023. 2. 22.

티스토리툴바