How to call function assigned to variable with parameter

Question

I have a structure like this:

//function declaration
someFunc() = {
 // ...
}
//assign function to variable
let f = someFunc();
//call
f();

I want to pass arguments to someFunc() with calling this function by variable, like:

f(arg); 

but f is not a variable then. How to process the parameter in fucntion by this way?

Edit: In the question above, I thought about calling a function by variable. Something like:

{{ f }}

and that f is assigned to function which returns some value.

Why I do that is because I need to initialize function in ngOnInit lifecycle (my goal is to call function just one time).

My view and ts code below:

TS:

import {Component, OnInit, Input} from '@angular/core';
import {Router} from "@angular/router";
import {PostsService} from "../../services/posts.service";
import {AuthService} from "../../services/auth.service";
import {ConfirmationModalService} from "../../services/confirmation-modal.service";
import {LoaderService} from "../../services/loader.service";
import {ToastService} from "../../services/toast.service";
declare var M: any;
@Component({
 selector: 'app-posts',
 templateUrl: './posts.component.html',
 styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {
 avatar: string;
 loggedUser: any;
 modalId: any;
 editModal: any;
 editModalInstance: any;
 content: string;
 contentEdited: string;
 orderSelect: any;
 orderSelectInstance: any;
 showButton: boolean;
 getAvatar: any;
 constructor(private postsService: PostsService, private authService: AuthService,
 private router: Router, private confirmationModalService: ConfirmationModalService,
 private loaderService: LoaderService, private toastService: ToastService) {
 }
 ngOnInit() {
 this.showButton = true;
 this.editModal = document.querySelector('#edit-modal');
 this.editModalInstance = M.Modal.init(this.editModal);
 this.orderSelect = document.querySelectorAll('#post-order-select');
 this.orderSelectInstance = M.FormSelect.init(this.orderSelect);
 this.orderSelect = 'post_date';
 this.loggedUser = localStorage.getItem('user') ?
 JSON.parse(localStorage.getItem('user')).id : '';
 this.loaderService.isLoading = true;
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoader();
 }, err => {
 this.toastService.error(err);
 this.loaderService.hideLoader();
 return false;
 });
 this.getAvatar = this.getCreatorAvatar(123);
 }
 loadMore() {
 this.loaderService.isLoadingSmall = true;
 if (this.orderSelect === 'post_date') {
 this.postsService.getPosts(true).subscribe(response => {
 if (this.postsService.postIndex > response.posts.length) {
 this.showButton = false;
 }
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoaderSmall();
 }, err => {
 this.toastService.error(err);
 this.loaderService.hideLoaderSmall();
 return false;
 });
 } else if (this.orderSelect === 'rate') {
 this.postsService.getPostsOrdered(true).subscribe(response => {
 if (this.postsService.postIndex > response.posts.length) {
 this.showButton = false;
 }
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoaderSmall();
 }, err => {
 this.toastService.error(err);
 this.loaderService.hideLoaderSmall();
 return false;
 });
 }
 }
 order(orderSelect) {
 this.loaderService.isLoading = true;
 if (orderSelect === 'post_date') {
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 }, err => {
 this.toastService.error(err);
 return false;
 });
 } else {
 this.loaderService.isLoading = true;
 this.postsService.getPostsOrdered().subscribe(response => {
 this.postsService.getPostHandling(response);
 }, err => {
 this.toastService.error(err);
 return false;
 });
 }
 this.loaderService.hideLoader();
 }
 onEditModalSubmit() {
 this.editModalInstance.close();
 this.postsService.editPost(this.modalId, this.contentEdited).subscribe(data => {
 if (data.success) {
 this.loaderService.isLoading = true;
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 }, err => {
 this.toastService.error(err);
 return false;
 });
 this.loaderService.hideLoader();
 this.toastService.success(data.msg);
 } else {
 console.log('some error');
 }
 });
 }
 openEditModal(id, content) {
 this.modalId = id;
 this.editModal.querySelector('#textarea-edit').value = content;
 this.editModalInstance.open();
 }
 deletePost(id) {
 this.confirmationModalService.content = 'Are you sure you want to delete this post?';
 this.confirmationModalService.cta = 'Delete';
 this.confirmationModalService.proceed = () => {
 this.postsService.deletePost(id).subscribe(data => {
 if (data.success) {
 this.toastService.success(data.msg);
 this.loaderService.isLoading = true;
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoader();
 }, err => {
 this.toastService.error(err);
 return false;
 });
 } else {
 this.toastService.error(data.msg);
 }
 });
 this.authService.decreasePostAmount(JSON.parse(localStorage.getItem('user')).id)
 .subscribe(() => {
 });
 this.confirmationModalService.modalInstance.close();
 };
 this.confirmationModalService.modalInstance.open();
 }
 ratePost(id, creator_id) {
 this.postsService.ratePost(id, creator_id).subscribe(() => {
 if (this.orderSelect === 'post_date') {
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 }, err => {
 this.toastService.error(err);
 return false;
 });
 } else if (this.orderSelect === 'rate') {
 this.loaderService.isLoading = true;
 this.postsService.getPostsOrdered().subscribe(response => {
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoader();
 }, err => {
 this.toastService.error(err);
 this.loaderService.hideLoader();
 return false;
 });
 }
 });
 }
 revertRate(id, loggedUser_id) {
 this.postsService.revertRatePost(id, loggedUser_id).subscribe(() => {
 if (this.orderSelect === 'post_date') {
 this.postsService.getPosts().subscribe(response => {
 this.postsService.getPostHandling(response);
 }, err => {
 this.toastService.error(err);
 return false;
 });
 } else if (this.orderSelect === 'rate') {
 this.loaderService.isLoading = true;
 this.postsService.getPostsOrdered().subscribe(response => {
 this.postsService.getPostHandling(response);
 this.loaderService.hideLoader();
 }, err => {
 this.toastService.error(err);
 this.loaderService.hideLoader();
 return false;
 });
 }
 });
 }
 isLiked(users_liked) {
 return users_liked.indexOf(this.loggedUser) > -1;
 }
 getCreatorId(post) {
 return post.creator[0]['id'];
 }
 getCreatorName(post) {
 return post.creator[0]['name'];
 }
 getCreatorAvatar(id) {
 this.authService.getAvatar(id).subscribe(data => {
 this.avatar = data.avatar;
 });
 }
}

HTML:

<div class="row">
 <div class="input-field col s3">
 <select id="post-order-select"
 [(ngModel)]="orderSelect" name="orderSelect" (change)="order(orderSelect)">
 <option value="post_date">Recent posts</option>
 <option value="rate">Most rated</option>
 </select>
 <label>Order by</label>
 </div>
</div>
<div id="post-list" class="post-list">
 <ng-container *ngIf="!loaderService.isLoading">
 <div *ngFor="let post of postsService.posts" class="card-panel first"
 [ngClass]="{'own-post' : authService.loggedIn() && getCreatorId(post) === loggedUser}">
 <div class="post-details">
 <div class="post-header">
 <div class="author-avatar"
 [ngStyle]="{ 'background-image' : 'url(' + getAvatar + ')'}">
 </div>
 <div class="post-info">
 <div class="author-fullname grey-text text-darken-3">{{ getCreatorName(post) }}</div>
 <div class="post-date deep-orange-text">{{ post.post_date | timeago }}</div>
 </div>
 </div>
 <div class="teaser grey-text text-darken-1" [innerHTML]="post.content"></div>
 <div class="valign-wrapper rate">
 <ng-container *ngIf="authService.loggedIn() && post.creator.id !== loggedUser">
 <i *ngIf="!isLiked(post.users_liked)"
 class="material-icons tiny deep-orange-text text-lighten-4"
 (click)="ratePost(post._id, loggedUser)">thumb_up</i>
 <i *ngIf="isLiked(post.users_liked)" class="material-icons tiny deep-orange-text"
 (click)="revertRate(post._id, loggedUser)">thumb_up</i>
 </ng-container>
 <ng-container *ngIf="authService.loggedIn() && post.creator.id === loggedUser">
 <i class="material-icons tiny deep-orange-text text-lighten-4 own">
 thumb_up
 </i>
 </ng-container>
 <ng-container *ngIf="!authService.loggedIn()">
 <i class="material-icons tiny deep-orange-text text-lighten-4 own">
 thumb_up
 </i>
 </ng-container>
 <span class="grey-text text-darken-3">{{ post.rate }}</span>
 </div>
 </div>
 <ng-container *ngIf="authService.loggedIn() && post.creator.id === loggedUser">
 <a class="btn-floating btn-medium deep-orange darken-3 right"
 (click)="deletePost(post._id)">
 <i class="material-icons">delete</i>
 </a>
 <a class="btn-floating btn-medium deep-orange right"
 (click)="openEditModal(post._id, post.content)">
 <i class="material-icons">create</i>
 </a>
 </ng-container>
 </div>
 <div *ngIf="loaderService.isLoadingSmall"
 class="row">
 <div class="col s12 center-align">
 <div class="preloader-wrapper small active">
 <div class="spinner-layer">
 <div class="circle-clipper left">
 <div class="circle"></div>
 </div>
 <div class="gap-patch">
 <div class="circle"></div>
 </div>
 <div class="circle-clipper right">
 <div class="circle"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div *ngIf="!loaderService.isLoadingSmall && showButton === true" class="row">
 <div class="col s12 center-align">
 <button (click)="loadMore()" class="btn deep-orange">Load more</button>
 </div>
 </div>
 </ng-container>
</div>
<div *ngIf="loaderService.isLoading" class="row">
 <div class="col s12 center-align">
 <div class="preloader-wrapper big active">
 <div class="spinner-layer">
 <div class="circle-clipper left">
 <div class="circle"></div>
 </div>
 <div class="gap-patch">
 <div class="circle"></div>
 </div>
 <div class="circle-clipper right">
 <div class="circle"></div>
 </div>
 </div>
 </div>
 </div>
</div>
<div id="edit-modal" class="modal">
 <div class="modal-content">
 <form (submit)="onEditModalSubmit()">
 <div class="row">
 <div class="col s12">
 <div class="input-field deep-orange-text">
 <textarea id="textarea-edit" [(ngModel)]="contentEdited" name="contentEdited"
 class="materialize-textarea"></textarea>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="col s12">
 <button type="submit" class="btn grey darken-4 right">Confirm editing</button>
 <a href="#" (click)="editModalInstance.close()" class="btn grey darken-1 right">Cancel</a>
 </div>
 </div>
 </form>
 </div>
</div>

• לבני מלכה: if you use angular 2+ you do not need = here someFunc() = { // ... } only someFunc() { // ... }
• Jai: let f = someFunc(); it assigns a return value of the called function.
• Dave Newton: @לבנימלכה What does Angular have to do with it? This is just JavaScript, if poorly-understood.
• לבני מלכה: look at tags the OP attach to question and code....
• Dave Newton: Please limit posted code to what's actually relevant; almost none of this is related.

Answer 1

The statement

let f = someFunc();

assigns the result of calling someFunc() to f. If you want f to be a reference to the function itself, you need

let f = someFunc;

A reference to a function followed by () or a parenthesized list of parameters is a function call.

Answer 2

You need to assign the function without calling the function.

let f = someFunc;

Answer 3

Add f as a reference so you can do that

let f = someFunc

or Add it a function

let f = someFunc();

or use it as a constant

const f = someFunc(); // f = someFunc

Answer 4

You need to assign your function without () to variable like below -

const myVar = someFunc;

If you assign function into some variable without parenthsis () it will assign ref. of the function which is needed in your use case.