JavaScript/Basic-Javascript (25) 썸네일형 리스트형 자바스크립트 정리하며 배우기[17] - 일급객체 함수 활용 방법 안녕하세요. Tay 입니다. 일급객체란, 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체입니다. 자바스크립트의 일급객체 함수로 어떤 활용 방법이 가능한지 알아보도록 하겠습니다. 입급객체 함수 입력 값 처리 일반 객체처럼 취급 다른 함수의 인자로 취급 함수의 리턴값으로 사용 가능 함수 프로퍼티 생성 변수나 프로퍼티의 값으로 할당 1) index.html 2) use-function.js // Assign function in variable let sayHello = name => { console.log(`Hello ${name}`); }; // Assign function in property let Tay = { name: "Tay", male: true, greeting: sayHe.. 자바스크립트 정리하며 배우기[16] - 함수 호이스팅(Hoisting) 과 화살표(Arrow) 함수 안녕하세요. Tay 입니다. 한 서적에서는 함수 선언 3가지 방식 중에 함수 표현식만 사용할 것을 권장하고 있습니다. 이번 글에서는 그 이유와 ES6에서 추가된 화살표 함수에 대해서 배우도록 하겠습니다. 함수 호이스팅(Hoisting) 함수 생성 동작의 차이를 확인할 수 있다. MDN 정의 1) index.html 2) hoisting.js console.log(statAdd(3, 5)); function statAdd(x, y) { return x + y; } console.log(statAdd(3, 4)); 첫번째 콘솔에서 선언 전의 statAdd 를 호출한다. 함수 선언문으로 statAdd 함수를 선언했다. 선언된 statAdd 함수를 호출한다. 결과 : 첫번째 콘솔에서 정의되지 않은 함수 stat.. 자바스크립트 정리하며 배우기[15] - 함수(function) 생성방법 3가지 안녕하세요. Tay 입니다. 개발하면서 가장 중요한 함수에 대해서 설명하겠습니다. 함수 일급 객체이며, 특정 기능을 제공하기위해 작성된 코드들을 정의 한 것 함수 생성 방법 3가지 함수 선언문 function statement 함수 표현식 function expression Function( ) 생성자 함수 함수 선언문이나 표현식 방법은 함수 리터럴 방식을 통해서 함수를 생성한다. 함수 리터럴 function add(x, y){ return x + y; } 리터럴은 값 자체를 의미하지만, 함수에서 리터럴은 데이터 표기 방식으로 볼 수 있다. (=리터럴 표기법) 위의 함수 생성방법 3가지로 여러 함수를 만들면서 배워보도록 하겠다. 1) index.html 함수 선언문 방식 반드시 함수명이 정의되어있어야 한.. 자바스크립트 정리하며 배우기[14] - 연산자(Operators) 안녕하세요. Tay 입니다. 자바스크립트 연산자 종류는 다양합니다. (할당, 비교, 산술, 등) 먼저, mdn 을 보면서 연산자 종류가 어떻게 되는지 확인해보죠. MDN 링크 위 처럼 자바스크립트에서는 다양한 연산자가 존재합니다. 전부 배우면 좋지만, 저는 이 단락에서는 자주 쓰는 연산자만 소개하고 넘어가겠습니다.. 자세한 것은 위 MDN 링크를 통해서 확인해보시기 바랍니다. 연산자 연산을 할때 사용하는 기호들 1) index.html operator.js 를 통해서 자주 사용하는 연산자들을 알아보겠습니다. 2) operator.js 산술 연산자(Arithmetic) let value = 5; // Arithmetic operators console.log(value + 2); // 7 console.l.. 자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제 안녕하세요. Tay 입니다. 순차적으로 JS 게시물을 보고계시다면 배열의 length 가 무엇인지 아실겁니다. 배열 메소드는 이 length 를 기반으로 동작하고 있기때문에 매우 length 는 매우 중요한 프로퍼티 입니다. 이번에는 length 프로퍼티에 다시한번 다루면서 배열 메소드와 어떻게 관계가 있는지 알아보겠습니다. length 프로퍼티 배열의 길이를 나타낸다. 모든 배열은 length 프로퍼티가 있다. 배열의 가장 큰 인덱스 + 1 값을 갖는다. length 프로퍼티는 배열의 길이(원소 개수) 를 나타내지만, 실제로 원소개수와 일치 하는 것은 아니다. 단순히 배열 내에 가장 큰 인덱스 값에 1을 더한 값이다. 때문에 가장 큰 인덱스가 변경되면 length 또한 변경 된다. 즉, 빈 배열을 선언.. 자바스크립트 정리하며 배우기[12] - 배열 개념 및 특성, 배열 선언 방법, 요소 생성, 프로퍼티 생성과 삭제 안녕하세요. Tay 입니다. 배열 이라는 객체에 대해서 알아보겠습니다. 배열 여러 데이터들을 모아서 하나의 객체로 관리하는데, 이때의 객체가 배열이다. 자바스크립트 배열의 특성 굳이 크기를 지정하지 않아도 된다. 어떤 위치에 데이터를 넣어도 된다. 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다. 배열 리터럴 객체 리터럴이 중괄호 { } 를 이용한 표기법이었다면, 배열 리터럴은 대괄호 [ ] 를 사용한다. 1) index.html 2) array.js // make array from literal let foodArr = ["pizza", "kimchi", "galbi", "sushi"]; console.log(foodArr[1]); console.log(foodArr[3]); 배열 리터럴은 .. 자바스크립트 정리하며 배우기[11] - 프로토타입 객체(prototype), 부모객체 상속 안녕하세요. Tay 입니다. Javascript 는 prototype 기반 언어입니다. 여기서 프로토타입 이라는 것이 무엇인지 아래 내용으로 확인해보시죠! 프로토타입 (Prototype) 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 이러한 부모 객체를 프로토타입 이라 한다. 1) index.html 2) prototype.js var a = 10; console.log(a); var objA = { value : 10 }; console.log(objA); 첫번째 log 에서는 기본 타입 a 변수를 출력한다. 두번재 log 에서는 객체 objA 를 출력한다. Github Commit 과연 두 log 에서 얻을 수 있는 차이가 무엇인지 확인 해보자. 결과 : 우리는 단지 객체 objA 를 .. 자바스크립트 정리하며 배우기[10] - 참조(reference) 타입 비교(compare) 안녕하세요. Tay 입니다. 객체 간의 비교에 대해서 알아보겠습니다. 객체 비교 객체간의 비교를 할 때 참조값 으로 비교를 한다. object 안에 property 를 비교하는 것이 아닌, object 의 값(참조값) 을 비교한다. 같은 객체를 참조하는 것인지 주의 해야한다. 바로 예제를 통해서 알아보자. 1) index.html 2) compare.js let a = 100; let b = 100; let objA = {value : 100}; let objB = {value : 100}; let objC = objB; console.log(a == b); // 1 console.log(objA == objB); // 2 console.log(objB == objC); // 3 기본 타입 a, b 를 .. 이전 1 2 3 4 다음
