기억할 시간: 당신을 놀라게 할 거의 알려지지 않은 사실들

Sitecore 개발자로서 JavaScript는 프런트 엔드 개발에서 중요한 역할을 합니다. 페이지 개발 중에 JavaScript를 사용하여 디버깅하거나 백엔드와 통합할 때 문제가 발생할 수 있습니다. 그러나 JavaScript에는 이러한 부담을 줄이고 프로세스를 단순화할 수 있는 숨겨진 보석이 있습니다.

여기에서 JavaScript의 숨겨진 보석 목록을 볼 수 있습니다.

콘솔 테이블

우리 모두는 정기적으로 console.log를 사용합니다. 그러나 console.table()은 Json 형식, CSV 형식 또는 사전 형식 데이터를 표 형식으로 변환하는 데 도움이 됩니다.

const data = [
  { name: 'Prabhu', age: 25, city: 'New York' },
  { name: 'Raj', age: 30, city: 'India' },
  { name: 'Bob', age: 35, city: 'Chicago' }
];

console.table(data);

// Output:
(index) | name  | age | city
--------|-------|-----|----------
0       | Prabhu| 25  | New York
1       | Raj   | 30  | India
2       | Bob   | 35  | Chicago

const data = [
  { name: 'Prabhu', age: 25, city: 'New York' },
  { name: 'Raj', age: 30, city: 'India' },
  { name: 'Bob', age: 35, city: 'Chicago' }
];

console.table(data, ['name', 'city']);

// Output:
(index) | name  | city
--------|-------|----------
0       | Prabhu| New York
1       | Raj   | India
2       | Bob   | Chicago

console.log.bind()console.log의 동작을 미러링하지만 미리 정의된 컨텍스트를 사용하여 새 함수를 생성할 수 있는 JavaScript의 메서드입니다. 이 새 함수는 다른 JavaScript 함수처럼 호출할 수 있으며 미리 결정된 컨텍스트로 console.log를 실행합니다. 예를 들어,

const myLog = console.log.bind(console, 'Custom prefix:');
myLog('Hello, world!'); 
// Output: Custom prefix: Hello, world!

JavaScript에서는 대괄호 []표기법을 사용하여 객체에 동적 속성 이름을 사용할 수 있습니다. 이를 통해 변수 또는 표현식을 속성 이름으로 사용하여 개체 속성을 설정하거나 액세스할 수 있습니다.

const propertyName = 'name';
const person = {
  [propertyName]: 'Prabhu',
  age: 25,
  city: 'New York'
};

console.log(person.name); // Output: Prabhu

const propertyName = 'age';
const ageMultiplier = 2;
const person = {
  name: 'Prabhu',
  [propertyName]: 25,
  [`${propertyName}In5Years`]: 25 + (ageMultiplier * 5)
};

console.log(person.age); // Output: 25
console.log(person.ageIn5Years); // Output: 35

연산자 in를 사용하면 상속된 속성을 포함하여 개체에 속성이 있는지 확인할 수 있습니다.

const obj = { foo: 'bar', baz: 'qux' };

console.log('foo' in obj); // Output: true
console.log('bar' in obj); // Output: false (since 'bar' is a value not a prop)

적용() 방법

메서드 apply()는 배열 또는 배열과 같은 인수 객체와 함께 지정된 컨텍스트(즉, 함수 내 this의 값)로 함수 호출을 허용하는 JavaScript의 내장 메서드입니다.

통사론:

functionName.apply(thisValue, arrayOfArgs)

function greet(name) {
  console.log(`Hello, ${name}! I am ${this.title} ${this.name}.`);
}

const person = {
  title: 'Mr.',
  name: 'Prabhu'
};

greet.apply(person, ['Sam']); 
// Output: Hello, Sam! I am Mr. Prabhu.

지금은 여기까지입니다. 잘 알려지지 않은 사실과 통찰을 계속해서 탐구할 예정인 블로그 게시물을 기대해 주세요.

행복한 코딩!!