JavaScript의 문법 사탕 예

내가 코드를 어떻게 작성하는지 배울 때, 나는 자주 강좌에서 '이것은 단지 문법상의 당분일 뿐' 을 듣고 읽은 후에 진일보한 해석이 없었다.이것은 나로 하여금 문법사탕이 무엇인지, 그것이 어떤 작용을 하는지 곤혹스럽고 의심스럽게 한다.
문법사탕은 더욱 간결한 문법 용어로 이미 존재하는 물건에 똑같은 기능을 제공한다.그것의 목적은 코드를 더욱 짧게 해서 더욱 쉽게 작성하는 것이다.새로운 기능이 도입되지 않았다.
그것은 문법사탕이라고 불린다. 왜냐하면 더 깨끗한 문법은 코드를 더욱 달콤하게 하고 사용하기 쉽기 때문이다.어법설탕은 ES6+ 기능을 통해 도입됐다.
이 블로그에서는 JavaScript의 문법 사탕의 몇 가지 예를 살펴보겠습니다.

for...of 회로

해체

위하다... 에 속하다

for...of순환은 for순환이다.for 순환은 조건의 계산 결과true만 있으면 이 순환을 실행합니다.그것은 세 가지 선택할 수 있는 표현식을 포함한다. 초기화, 조건, 최종 표현식이다.
이 예에서, 우리는 aircrafts 그룹을 순환하고, 그룹의 모든 항목을 인쇄합니다.

// Create an array of aircrafts
let aircrafts = ['the bus', 'zephyr one', 'quinjet']

// Loop over the entire array of aircrafts
for (let i = 0; i < aircrafts.length; i++) {
  // print the item at index i of the aircrafts array
  console.log(aircrafts[i])
}

// Output:
// 'the bus'
// 'zephyr one'
// 'quinjet'

for...of순환은 for순환과 같은 기능을 실현했지만 문법이 더 짧았다.그것은 그룹, 문자열, 집합 등 다시 사용할 수 있는 항목에서 순환한다.
구문은 다음과 같습니다.

for (variable of iterable) {
  // statement that executes for each variable
}

본 예에서 우리는 상술한 예와 같은 기능을 실현하였다.우리는 aircrafts 수조에서 수조의 모든 항목을 순환하고 출력합니다.for...of 순환하는 문법을 사용하는 것이 더 짧다.

// Create an array of aircrafts
let aircrafts = ['the bus', 'zephyr one', 'quinjet']

// Loop over the entire array of aircrafts
for (let i of aircrafts) {
  // Print the item at index i of the aircrafts array
  console.log(i)
}

// Output:
// 'the bus'
// 'zephyr one'
// 'quinjet'

MDN reference: for...of

MDN reference: for

해체하다

Destructuring은 객체나 배열의 항목에서 속성을 할당하여 새 변수를 만드는 구문 캔디입니다.분해 구조는 대상과 그룹에 모두 유효하다.
다음은 분해하지 않고 대상 속성에서 새로운 변수를 만드는 방법입니다.이 예에서 우리는 하나의 대상agent이 있는데 세 가지 속성을 가지고 있다.우리는 새 변수를 만들고 그 값을 대상에서 가져올 속성에 지정합니다.예를 들어 우리는 name 대상의 값name을 사용하여 agent 변수를 만들었다.
만약 우리가 추출해야 할 대상 속성이 더 많다면, 이것은 곧 지루해질 것이다. 왜냐하면 우리는 모든 새로운 변수를 한 줄 한 줄 만들어야 하기 때문이다.

// Create agent object with properties: name, nickname, power
let agent = {
  name: 'daisy',
  nickname: 'quake',
  power: 'vibration',
}

// Create new variables and assign them to properties from the agent object
let name = agent.name
let nickname = agent.nickname
let power = agent.power

console.log(name) // 'daisy'
console.log(nickname) // 'quake'
console.log(power) // 'vibration'

추출 대상의 속성 이름을 어떻게 쉽게 하는지 분해해 봅시다.
위의 예와 같이, 우리는 대상의 속성을 만들고 분배하지만, 단지 한 줄만 해체를 사용했다.

// Create agent object with properties: name, nickname, power
let agent = {
  name: 'daisy',
  nickname: 'quake',
  power: 'vibration',
}

// Use destructuring to create new variables and assign them values from the agent object
let { name, nickname, power } = agent

console.log(name) // 'daisy'
console.log(nickname) // 'quake'
console.log(power) // 'vibration'

해체를 통해 우리는 대상 키 이외의 값을 사용하여 새로운 변수 이름을 지정할 수 있다.
이 예에서 우리는 새로운 변수 superheroName 를 만들고 'quake' 'agents 속성에서 그 값을 부여했다 nickname.

// Create new variable superheroName, with the value agent.nickname ('quake')
let { nickname: superheroName } = agent

console.log(superheroName) // 'quake'

수조를 분해하는 작업 원리는 유사하다.
여기에서, 우리는 agents 수조에서 분해하지 않고 새로운 변수를 만듭니다.우리는 모든 새로운 변수를 그룹의 값에 분배할 것이다.마찬가지로 가치관이 많기 때문에 곧 지루해진다.

// Create agents array
let agents = ['coulson', 'may', 'daisy', 'simmons', 'fitz']

// Create new variables and assign them values from the agents array
let coulson = agents[0]
let may = agents[1]
let daisy = agents[2]
let simmons = agents[3]
let fitz = agents[4]

console.log(coulson) // 'coulson'
console.log(may) // 'may'
console.log(daisy) // 'daisy'
console.log(simmons) // 'simmons
console.log(fitz) // 'fitz'

본 예에서 우리는 분해를 사용하여 상술한 것과 같은 기능을 실현하였다.우리는 한 줄에서 agents 그룹의 값에서 새 변수를 만듭니다.

// Create agents array
let agents = ['coulson', 'may', 'daisy', 'simmons', 'fitz']

// Use destructuring to create new variables from the agents array
let [coulson, may, daisy, simmons, fitz] = agents

console.log(coulson) // 'coulson'
console.log(may) // 'may'
console.log(daisy) // 'daisy'
console.log(simmons) // 'simmons
console.log(fitz) // 'fitz'

MDN reference: destructuring

달다

삼원 연산자는 if...else문장의 문법사탕처럼 보일 수 있다.하지만 사실은 그렇지 않다.if...else는 하나의 문장이기 때문에 어떤 것도 되돌려주지 않지만 삼원문장은 표현식이기 때문에 어떤 것도 되돌려준다.if...else 문장에서 조건의 계산 결과가 true라면 if 뒤에 있는 문장을 실행한다.그렇지 않으면 조건의 계산 결과가 false일 경우 if조건 뒤의 문장을 건너뛰고 else문장을 실행합니다.
이 예에서 i의 값은 2이다.i가 1보다 크다.이것은 조건의 계산 결과true를 의미하고 인쇄'I am true'한다.

// Set i to 2
let i = 2

// Check condition i > 1
if (i > 1) {
  // Execute if i > 1 is true
  console.log('I am true')
} else {
  // Execute if i > 1 is false
  console.log('I am false')
}

// Output:
// 'I am true'

우리는 삼원 연산자로 같은 기능을 실현할 수 있다.
삼원 연산자는 세 가지 조작수로 구성되어 있다.

조건 하나, 물음표 뒤에 ?

조건의 계산 결과가 true일 때 실행할 표현식 뒤에 사칭:이 붙는다.

조건의 계산 결과가 false라면 실행할 표현식

다음은 이러한 구문의 조합입니다.

condition ? expressionIfTrue : expressionIfFalse

상기 예시에서 같은 코드를 다시 쓰지만, 삼원 연산자를 사용합니다.
만약 i이 1보다 크면 우리는 같은 조건을 검사한다.마찬가지로 조건의 계산 결과는 true이기 때문에 인쇄'I am true'한다.

// Set i to 2
let i = 2

i > 1 ? console.log('I am true') : console.log('I am false')

// Output:
// 'I am true'

MDN reference: if...else

MDN reference: ternary operator

결론

이 블로그에서 우리는 문법사탕은 하나의 용어로 이미 존재하는 기능을 실현하는 비교적 짧은 문법을 나타내는 데 쓰인다는 것을 알게 되었다.이것은 문법사탕이 어떤 새로운 기능도 제공하지 않는다는 것을 의미하지만, 코드는 확실히 더욱 달콤하고 사용하기 쉽다.삼원 연산자for...of의 순환과 해체는 자바스크립트에서 문법 설탕의 예로 간결한 코드를 작성하는 데 도움이 된다.