728x90
반응형

Front-End/JavaScript 14

[자바스립트(JavaScript )] 13. Strict mode

🟡 1. Strict mode function func(){ x = 1; } func(); - 위 코드를 실행을 시키면 실행이 잘 됩니다. 그러한 이유는 자바스크립트는 x가 어디에서 선언이 되었는지 처음에는 함수 내에서 찾아봅니다. 함수 안에서 없으면 함수 밖으로 나와 전역 변수에서 찾아봅니다. 만약 전역 변수에서도 없으면 에러는 내는 것이 아니라, 암묵적으로 전역 객체에 x라는 변수 동적으로 생성합니다. 이러한 변수를 암묵적 전역 변수(implicit global)라 합니다. 개발자의 의도와는 상관없이 암묵적 전역 변수가 생성이 되고 실행되는 것을 막기 위해 ES5부터는 strict mode가 추가되었습니다. 'use strict' function func(){ x = 10; // Uncaught Re..

[자바스립트(JavaScript )] 12. 함수의 다양한 형태 (즉시 실행 함수, 내부 함수, callback 등)

🟡 1. 함수의 다양한 형태 - 함수는 여러 가지 형태를 가지고 있고, 그 형태에 따라 부르는 명칭이 다릅니다. 이번 글에서는 4가지 형태에 대해서 얘기해보겠습니다. 즉시 실행 함수 내부 함수 재귀 함수 콜백(callback) 함수 🟣 1.1 즉시 실행 함수 - 함수가 정의됨과 동시에 실행이 되는 함수를 즉시 실행 함수(IIFE, Immediately Invoke Function Expression)라고 합니다. - 즉시 실행 함수는 최초 한 번만 호출이 되고 다시 호출할 수가 없습니다. 그래서 주로 초기화 처리에 사용이 됩니다. // 기명 즉시 실행 함수 (function hi() { console.log('Hello!'); }()); hi(); //error -> hi is not defined : ..

[자바스립트(JavaScript )] 11. 함수 프로퍼티 (Function Property)

🟡 1. 프로퍼티 (Property) - 프로퍼티는 속성이라는 뜻으로, 자바스크립트에서는 객체 내부의 속성을 의미합니다. let person = { name : 'bigone', age : 30 } - 위 예시를 보면 person이라는 객체 안에 name, age이라는 key가 있는데, 이를 프로퍼티라고 합니다. 🟡 2. 함수 프로퍼티 - 함수도 객체이므로 프로퍼티를 가지게 됩니다. function sum (a, b){ return a + b; } console.dir(sum) - sum 함수 생성 코드를 보면 argument, caller 등과 같은 프로퍼티들을 생성한 적이 없는데, 자동으로 생성이 되어있습니다. 이는 Function 생성자에 의해서 함수가 생성될 때 자동으로 할당이 됩니다. - 함수에..

[자바스립트(JavaScript )] 10. 함수 (Function)

대망의 함수! 🟡 1. 함수란? - 함수란 어떤 작업을 수행하기 위해 필요한 코드(문)들의 묶어놓은 코드 블록을 의미합니다. 함수는 매개변수와 이름을 갖으며 필요할 때 이름으로 함수를 호출하여 코드를 실행시킵니다. // 함수의 정의(선언) function sum(a, b) { return a + b; } // 함수의 호출 sum(1, 2) // 3 명칭 설명 이름(함수명) 함수명은 변수명이라고 생각하면 이해하기 쉽다. 함수를 호출하기 위해서 함수명이 필요하다. 매개변수 0개 이상의 목록으로 콤마(,)로 나누어 여러개의 변수들을 넣을 수 있다. 함수 몸채 함수가 호출되었을때 실행되는 코드들의 집합을 의미한다. return 문을 통해서 결과값(반환값)을 반환 할 수도 있고, return 문 없이 어떠한 기능..

[자바스립트(JavaScript )] 09. 객체 (Object)

🟡 1. 객체 (Object) - 자바스크립트는 객체 기반의 스크립트 언어이며 원시 타입을 제외한 모든 값들은 객체입니다. (그만큼 자바스크립트에서 객체는 매우 중요❗) - 객체는 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 묶음입니다. - 프로퍼티의 값은 모든 타입이 들어갈 수 있습니다. 자바스크립트에서는 함수는 일급 객체이므로 값으로 취급할 수 있고, 프로퍼티의 값으로도 사용할 수 있습니다. 이때 함수는 일반 함수와 구분하기 위해서 메소드라고 부릅니다. (객체 안에 있는 함수는 메소드) let person = { // 메소드 sayHello = function(){ console.log('Hello'); } } // 객체의 메소드 호출 person.sayHello(); //..

[JavaScript] 08. 타입 변환

🟡 1. 타입 변환 - 자바스크립트 모든 값에는 타입이 있습니다. 개발을 하다 보면 데이터 타입이 자동으로 변환이 되거나, 개발자가 의도적으로 데이터 타입을 바꾸는 경우가 있습니다. 개발자가 의도적으로 바꾸는 것을 명시적 타입 변환(Explicitcoercion) 또는 타입 캐스팅(Type casting)이라고 합니다. 데이터 타입이 자동으로 변환되는 것을 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 합니다. // 명시적 타입 변환 (개발자가 변경하는 것) let x = 10; let str_x = x.toString(); // 숫자 타입을 문자 타입으로 변경(캐스팅) console.log(typeof(str_x)); // 'string' //..

[JavaScript] 07. 반복문

🟡 1. 반복문 (Loop statement) - 반복문은 주어진 조건식이 참이면 코드 블록을 실행합니다. 이는 조건문이랑 같아 보이는데, 반복문은 조건식이 거짓이 될 때까지 같은 코드 블록을 반복 실행합니다. - 자바스크립트에서 반복문은 for문, while문, do... while문, for...in문, for..of문이 있습니다. (for...of문은 차후에 자세하게 설명하는 글을 올리도록 하겠습니다😅) 🟡 2. for문 - for문은 조건식이 거짓이 될 때까지 코드 블록을 반복 실행합니다. for(초기화식; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 코드 블럭 } // for문 예제 for(let i=0; i < 3; i++) { console.log(i); } // 0 // 1 // ..

[JavaScript] 06. 블록문 & 조건문

🟡 1. 블록문(Block statemet/Compound statement) - 블록문은 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부릅니다. 자바스크립트에서는 블록문을 하나의 단위로 취급합니다. 블록문은 다른 문들과는 다르게 끝에 세미 콜론(;)을 붙이지 않습니다. // 블록문 { let name = 'apple'; console.log(name); } // 블록문 겸 반복문 for(let i = 0; i < 10; i++){ console.log(i); } // 블록문 겸 함수 let func = function(a, b){ return a * b; } 🟡 2. 조건문(conditional statement) - 조건문은 문 앞에 어떠한 조건을 걸어 두고 그 조건에 부합한 ..

[JavaScript] 05. 연산자

🟡 1. 연산자(Operator) - 연산이란 수나 식을 일정한 규칙에 따라 계산하는 것을 의미합니다. 연산자는 어떠한 연산을 하는 것인지 의미하는 기호입니다. 연산의 대상을 피연산자(Operand)라 합니다. - 연산자의 종류는 여러 가지가 있지만, 본 글에서는 (산술, 할당, 비교, 삼항 조건, 논리, 쉼표, 그룹, typeof) 8가지의 연산자를 설명하고자 합니다. 🟡 2. 산술 연산자 (Arithmetic Operator) - 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행합니다. 산술 연산이 불가능할 경우에는 NaN(Not a Number)을 반환합니다. 🟣 2.1 이항 산술 연산자 - 이항 산술 연산자는 2개의 피연산자를 연산합니다. 이항 산술 연산자 설명 + 덧셈 - 뺄셈 * 곱셈 / ..

[JavaScript] 04. 데이터 타입_객체타입

🟡 1. 객체 타입 (object type) - 원시 타입을 제외한 모든 데이터를 객체 타입이라고 합니다. // 객체 타입 _ 객체 let person = { name : 'bigone', age : 30, hobby : ['workout', 'coding', 'driving'], sayHello : function(){ console.log('Hi!'); } } // 객체 타입 _ 배열 let fruits = ['apple', 'banana', 'strawberry', 'melon']; // 객체 타입 _ 함수 let add = function(a, b){ return a + b; } // 객체 타입 _ 정규표현식 let reg = /[^0-9]/g; - 객체 타입을 객체 타입 또는 참조 타입이라고 합..