【JavaScript】私も見ている「(Imperative vs Declarative Programming)命令型(手続き型)と宣言型の違い」

Imperative vs Declarative Programming

スクリーンショット 2017-02-26 23.35.45
https://tylermcginnis.com/imperative-vs-declarative-programming/
命令型(手続き型)プログラミングと宣言型プログラミングの違いを説明している。
・どのように実行させるかが命令型
・何をするかが宣言型

それらが使われている言語の例として、
Imperative(命令型): C, C++, Java
Declarative(宣言型): SQL, HTML
(Can Be) Mix: JavaScript, C#, Python
としています。

JavaScriptでどのような記述が命令型、宣言型なのか。

数値の要素を持つ配列を一つ一つイテレートする際に
for文で[]にpushして新しい配列として返すのが(どのように)となり、命令型。

function double (arr) {
let results = []
for (let i = 0; i < arr.length; i++){ results.push(arr[i] * 2) } return results }

のように完成までのステップを踏むような書き方。
宣言型は、
function double (arr) {
return arr.map((item) => item * 2)
}

何をしたいかが「宣言されている」ような書き方

Jqueryの場合

$("#btn").click(function() {
$(this).toggleClass("highlight")
$(this).text() === 'Add Highlight'
? $(this).text('Remove Highlight')
: $(this).text('Add Highlight')
})

このようにボタンがクリックしたらclassをトグルして評価してtrueならのような記述をする。どのようにしたいか命令している。

宣言型のReactの場合

<Btn onToggleHighlight={this.handleToggleHighlight} highlight={this.state.highlight}> {this.state.buttonText} </Btn>

記事は下記のように伝えています。

Another less-spoken-of benefit to declarative code is that your program can be context-independent. This means that because your code is concerned with what the ultimate goal is— rather than the steps it takes to accomplish that goal — the same code can be used in different programs, and work just fine.
宣言型コードのもう一つの利点は、プログラムがコンテキストに依存しないことです。 これは、コードが目的を達成するために必要なステップではなく、最終的な目標が何であるかに関係しているため、同じコードをさまざまなプログラムで使用でき、うまく動作することを意味します。

↑この同じコードを様々なプログラムで使用でき、っていうのが関数型が副作用を伴わないpureでなくてはいけない理由なのですね。

・命令型の実装をより抽象的にして解決(宣言型に)することで、コードを解読しやすく(どのようなステップを踏むか実装者は知らないでいいから)、汎用的にすること(ピュア関数を関数の引数として渡せるから)ができる。
・命令型はその時のコンテキストに状態が依存している。

Declarative Programming is programming with declarations, i.e. declarative sentences.
宣言プログラミングは、宣言、すなわち宣言文を用いてプログラミングすることである。

In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.
コンピュータサイエンスでは、宣言型プログラミングは、制御フローを記述することなく計算のロジックを表現するプログラミングパラダイムです。

すごくわかりやすかったので参考まで!
でわーーー