Implement javascript inside body, error: jQuery is not defined In Drupal 7, I had js-output template.

I define the template output as javascript. This is used for our front end person that can easily input javascript without touching backend.

&lt;script&gt;
&lt;?php if(isset($content['field_custom_javascript'])) print $content['field_custom_javascript']['#items'][0]['value']; ?&gt;
&lt;/script&gt;


In Drupal 8, I am trying to do the same thing by define twig file:

{% if content.field_custom_javascript is not empty %}
&lt;script&gt;
    {{ content.field_custom_javascript }}
&lt;/script&gt;
{% endif %}


But when I put js in the customize_js_output field, as the following:

(function ($, Drupal) {
 $( document ).ready(function() {
    console.log( "ready!" );
 });
})(jQuery, Drupal);


Or

 $( document ).ready(function() {
        console.log( "ready!" );
  });


Have jQuery is not defined or $ is not defined error.
Got all of jQuery libraries load correct in the footer.

My question:
Is this a good way to do it? If not, do you have any suggestions?

If i only want to write js inside my body field in the source or even php filter as content editor, can I do it?
In Drupal 8 it is not a good idea at all. You must define a library and put your js in a seperate file.

Here is a link to how to do it

Libraries in Drupal 8

Then if you want to write jquery you just need to add a dependency on core/jquery, also explained on the link.

If you want to attach a library to a twig function, you can do like this:

{# In a Twig template we attach the library. #}
{{ attach_library('modulename/libraryname') }}