[JavaScript] Syntactic Sugar

정의

구문 내에서 프로그래밍 언어를 읽거나 표현하는 일을 더 쉽게 할 수 있도록 설계되었다. Syntactic Sugar 인간이 사용하기에 언어를 더욱 간결하게 만듭니다.

중복되는 로직을 더 명확하고 간결하게 표현하거나 일부 사람들이 선호하는 대체 스타일로 표현할 수 있습니다.

 

Ex. Suger가 적용되지 않은 방법과 적용된 방법을 나열하겠습니다.

 

1. 삼항연산자

- Sugar 없는 표현

var a;
if(SomeFunction() == 2){
   a = 4;
}
else{
   a = 9
}

- Suger 적용된 표현 

var a;
(SomeFunction() == 2) ? a = 4 :  a = 9

2. for

- Sugar 없는 표현

var i = 0;
while (i < num_rows) {
	j = 0;
	while (j < num_cols) {
		matrix[i][j] = 1;
		j++;
	}
	i++;
}

- Sugar 적용된 표현 

for (i = 0; i < num_rows; i++) {
	for (j = 0; j < num_cols; j++) {
		matrix[i][j] = 1;
	}
}

 

3. Count

- Sugar 없는 표현

var i;
i = i+5;

- Suger 적용된 표현 

var i = 0;
i += 5;

 

4. Class (* 타언어에서 class 사용에 익숙한 개발자들을 위해 ES6에서 추가되었다.  자바스크립에서의 클래스는  prototype를 이용하여 class 선언하였기 때문에 다른언어의 클래스와 비슷해보이지만 근본은 다르다. )

- Sugar 없는 표현

function Person(name, first, second) {
  this.name = name;
  this.kor = first;
  this.eng = second;
}
Person.prototype.sum = function () {
  return "prototype: " + (this.kor + this.eng);
};

var hwang = new Person("Mr.hwang", 10, 20);
hwang.sum = function () {
  return "this: " + (this.kor + this.eng);
};

var young = new Person("ms.choi", 40, 20);

console.log("hwang", hwang.sum());
console.log("young", young.sum());

- Sugar 적용된 표현 

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.kor = first;
    this.eng = second;
  }
  sum() {
    return "prototype: " + (this.kor + this.eng);
  }
}

var hwang = new Person("hwang", 10, 20);
var young = new Person("ms.choi", 40, 20);

hwang.sum = function () {
  return "this: " + (this.kor + this.eng);
};
console.log("hwang", hwang);
console.log("young", young);
console.log("hwang", hwang.sum());
console.log("young", young.sum());

 

 

 

5. Template literals

- Sugar 없는 표현

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

- Sugar 적용된 표현 

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

 

 

 

 

참고:

https://en.wikipedia.org/wiki/Syntactic_sugar

https://www.quora.com/What-is-syntactic-sugar-in-programming-languages