Infra/JavaScript

JavaScript에서 유용한 기본 기술 및 팁

Hyeon Gu 2024. 4. 25. 00:09

배열의 크기를 조절하기 위해 배열을 사용하는 방법:

a=['Pune','Hyderabad','Banglore','Mumbai','Indore','Delhi']
console.log(a.length) // 출력: 6
a.length=3
console.log(a) // 출력: ['Pune','Hyderabad','Banglore']

두 개의 숫자를 교환하는 방법:

let a=10;
let b=20;
console.log(a,b) // 출력: 10,20
[a,b]=[b,a]
console.log(a,b) // 출력: 20,10

서버 과부화를 방지하고 둘 이상의 배열을 연결하는 방법:

// 예전 방법
a=[1,2,3,4,5]
b=[4,5,6,7,8]
c=a.concat(b) //.
console.log(c) // 출력: 1,2,3,4,5,4,5,6,7,8

// 새로운 방법
a=[1,2,3,4,5]
b=[4,5,6,7,8]
a.push.apply(a,b) // 새로운 배열 c를 만들고 a와 b의 내용을 push하여 메모리 사용량이 크게 증가합니다.
console.log(a)

다른 방식으로 필터를 사용하는 방법:

a=[null,undefined,{"name":"Alex"},{"name":"Nick"},{"name":""},null]
c=a.filter(item=>item.name.length>0) //Uncaught TypeError: Cannot read property 'length' of undefined error is thrown.

// null and undefined values can be removed using a Boolean filter:

c=a.filter(Boolean).filter(it=>it.name.length>0)
console.log(c) // 출력

0에서 n까지 맵을 반복하는 방법:

[...Array(100)].map((it,index)=>console.log(index))

문자열에서 단어의 모든 항목을 바꾸는 방법:

str="India India USA India UK India"
console.log(str.replace(/India/,'USA'))
//출력: USA India USA India UK India
//문자열 끝에 g를 추가하면 모든 항목이 바뀌게 됩니다.
console.log(str.replace(/India/g,'USA'))

조건 바로가기 방법:

// 예전 방법
let a="hello"
let b;
if(a==undefined)
{
b="Nothing"
}
else
{
b=a
}
console.log(b) //hello

// 새로운 방법
b=a||"Nothing"
console.log(b) //hello

// 예전 방법
let data={"name":"Allen"}
if(data!=undefined)console.log(data.name)

// 새로운 방법
data!=undefined&&console.log(data.name)

문자열을 숫자로 / 숫자를 문자열로 바꾸는 방법:

// 문자열을 숫자로
a="123"
console.log(+a) //결과 123
b=""
console.log(+b) //NaN

//숫자를 문자열로

a=123
console.log(a+"")

console.log을 다양한 방법으로 사용하는 방법:

// %s는 문자열로 대체합니다.
console.log("Helllo I love %s","Javascript")
// %d는 정수로 변환합니다.
console.log("Helllo %d ",1)
// %f는 부동 소수점으로 대체합니다.
console.log("Helllo  %f ",1.078)
// %(o|O) | 요소가 개체로 표시됩니다.
console.log("Helllo %O",{"Name":"Sidd"})
// %c는 CSS를 적용합니다.
console.log("%cThis is a red text", "color:red");

console.table을 사용하는 방법:

// console.table을 사용하여 객체를 표 형식으로 표시할 수 있습니다.
a=[{"city":"Banglore"},{"city":"Pune"},{"city":"Mumbai"}]
console.table(a)
n typeof var === 'function';
}

배열의 마지막 인덱스에 가까운 항목을 가져오는 방법:

a=[1,2,3,4,5,6,7,8,9,10]
console.log(a.slice(-1))//[10]
console.log(a.slice(-2))//[9,10]

콘솔 로그를 반대로 찍는 방법:

// javascript에서 false 0, "", null, undefined, NaN은 모두 false입니다.
// false 또는 true를 얻으려면 !! 연산자를 사용합니다.
console.log(!!0,!! "",!!null,!! "Hii",!! undefined,!! NaN ,!! false,!! true)
//출력: false false false true false false false true

eval 함수를 사용하여 문자열에 저장된 이름으로 함수를 호출하는 방법:

const print=()=>console.log("hello")
setTimeout(()=>eval('print')(),1000)//hello

typeof 연산자를 사용하는 방법:

// 연산자 유형은 평가되지 않은 피연산자의 유형을 나타내는 문자열을 반환합니다.
console.log(typeof 12) //number
console.log(typeof "hello") //string
console.log(typeof []) //object
console.log(typeof true) //boolean
console.log(typeof {}) //object

yield 키워드를 사용하는 방법:

function* list(index,length) {
  while (index < length) {
    yield index;
    index++;
  }
}

const iterator = list(0,10);

console.log(iterator.next().value);
// 예상 결과: 0

console.log(iterator.next().value);
// 예상 결과: 1

자바스크립트 * 기능:

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// 예상 결과: 10

console.log(gen.next().value);
// 예상 결과: 20

new.target 기능을 사용하는 방법:

// new.target은 new 또는 not를 사용하여 함수 또는 생성자 호출을 감지하는 데 사용됩니다.
// new를 사용하여 호출된 경우 생성자에 대한 참조를 반환하거나 함수가 정의되지 않은 상태로 반환됩니다.
function learn(){
  new.target?console.log("Called using new"):console.log("Called without new")
}

learn() //called without learn
new learn() //called using new.
//arrow functions에서 new.target은 scope에서 상속됩니다.

label statement을 사용하는 방법:

loop1:
for (let i = 0; i < 5; i++) {
  loop2:
  for(let j=0;j<5;j++)
  {
    console.log(i,j)
    if(i==j)
    {
      continue loop1
    }
  }
}

// 0 0
// 1 0
// 1 1
// 2 0
// 2 1
// 2 2
// 3 0
// 3 1
// 3 2
// 3 3
// 4 0
// 4 1
// 4 2
// 4 3
// 4 4

Rest parameters Syntax를 사용하는 방법:

function abc(...args)
{
  console.log(args)
}
abc(1) //[1]
abc(1,2) //[1,2]
abc(1,2,3) //[1,2,3]
abc(1,2,3,4)//[1,2,3,4[