diff --git a/submissions/anas_adnan_abu_jaber/assignment8.js b/submissions/anas_adnan_abu_jaber/assignment8.js new file mode 100644 index 0000000..a10a6ae --- /dev/null +++ b/submissions/anas_adnan_abu_jaber/assignment8.js @@ -0,0 +1,62 @@ +// Task 1: Fix the Lost Context + +// You’re building a blog editor. The `editor` object has a method to return the title in uppercase. + +const editor = { + title: "my first blog", + getUpperTitle() { + return this.title.toUpperCase(); + }, +}; + +// Write code that ensures getTitle() works as expected and logs "MY FIRST BLOG" +const getTitle = editor.getUpperTitle.bind(editor); +console.log(getTitle()); + +// Task 2: Arrow or Regular? + +// You have a form handler object that tracks user input: +const formHandler = { + value: "initial", + onChange(newValue) { + this.value = newValue; + }, +}; + +function simulateInputChange(callback) { + callback("updated"); +} + +simulateInputChange(formHandler.onChange); +// ❓ Now log formHandler.value +// Your Tasks: + +// Predict what formHandler.value will be. +/////// => it still be "initial" because "this" is lost banding +// Fix the bug using either .bind() or an arrow function (your choice). +simulateInputChange(formHandler.onChange.bind(formHandler)); +console.log(formHandler.value); +// => or arrow fun +simulateInputChange((newVal) => formHandler.onChange(newVal)); +// Explain which fix you used and why. +////// => i used .bind() because it allows the method to retain the context of `formHandler`, ensuring that `this.value` is updated correctly. +////// => and the arrow fun solve that replacing callback (newVal) => formHandler.onChange(newVal) and run it (newVal) => formHandler.onChange(newVal)("updated") by "this" of formHandler + +// Task 3: Method Extraction Issue +// You’re developing a translation tool. The following object works well, but fails when methods are passed around. + +const translator = { + language: "Arabic", + getLanguage() { + return `Current language: ${this.language}`; + }, +}; + +// ❓ Write a function logLanguageInfo(getter) that logs the language info correctly even if getLanguage is passed as an argument. +// Your Task: Write the logLanguageInfo function and make sure the result is: +function logLanguageInfo(getter) { + console.log(getter.call(translator)); +} +logLanguageInfo(translator.getLanguage); + +// Current language: Arabic