diff --git a/submissions/Mohammed-Alnabahin/assignment8.js b/submissions/Mohammed-Alnabahin/assignment8.js new file mode 100644 index 0000000..aca7f25 --- /dev/null +++ b/submissions/Mohammed-Alnabahin/assignment8.js @@ -0,0 +1,78 @@ +/* +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); +// Here: it's like we are calling : function onChange(newValue) {this.value = newValue} // the new value here is 'updated' +// but value from the object formHandler is lost, so it's undefined. + +// ❓ Now log formHandler.value +console.log(formHandler.value); + +//Your Tasks: + +/* + Predict what formHandler.value will be: + -The output will still be 'initial' because 'this' in the method onChange + lost it's object when it was passed as a callback to another function, so it won't affect the value. +*/ + +//Fix the bug using either .bind() or an arrow function (your choice). + +simulateInputChange((newValue) => formHandler.onChange(newValue)); +console.log(formHandler.value); + +//Explain which fix you used and why. +/* + I used an arrow function because regular functions get their 'this' from the way they’re called, + while arrow functions inherit this from their bigger scope (parent). + so onChange function will be called directly from the formHandler with 'updated' as an argument, + ensuring this will be in the object context. +*/ + +/* +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. + +function logLanguageInfo(getter) { + console.log(getter.call(translator)); +} + +logLanguageInfo(translator.getLanguage);