본문 바로가기

Javascript

(101)
One thing's Time_99, 버리고 선택하고 집중하는 시간 항해99의 선택과정이 어제부로 시작되었다. 어제 자바스크립트 환경설정에서 node.js 설치와 vs-code 이상으로 시간이 많이 딜레이된 채 시작되었다. 거기에 더해 강의 내용을 타이핑하며 따라가기가 여간 쉽진 않았다. 무엇보다도 오전에 논문 쓰고 오후 3시 선택과정부터 들어오다보니 아무래도 몰입도가 예전 16기 시작때와 같진 않은 것 같다. 우선 "나는 웹개발의 전문가가 되고자 함은 아니다." 10여년간 교육컨텐츠 기획자로 일했던 경력 코로나 이후 한국보건의료정보원에서 운영기획부서에서의 프로젝트 경험, 파이낸스뉴스 언론사에서 보도제작 팀장으로 일한 경력 등을 잘 융합해 이후 교육컨텐츠 IT기획과 에듀테크 분야로 방향성을 모색하고자 한다. 4차혁명시대에 발맞추어 온라인 세상에 더욱 친숙해지고 코딩과도 ..
변수의 5가지 주요 개념 // 변수 이름 : 저장된 값의 고유 이름 // 변수 값 : 변수의 저장된 값 // 변수 할당 : 변수의 값을 저장하는 행위 // 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 // 변수 참조 : 변수에 할당된 값을 읽어오는 것 1. 변수 이름 : myVar 변수 값 :Hello World 변수 참조 : var a = 10; var b = 20; var c = a + b;
JavaScript 언어 5가지 특징 1️⃣ JS는 객체 지향 프로그래밍 언어다 자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다. 이를 통해 복잡한 기능을 구현할 수 있다. 🌏 객체지향 vs 절차지향 절차지향 프로그래밍은 순서대로 실행되는 일련의 과정을 단계적으로 기술하여 프로그램을 만드는 것이고, 객체지향 프로그래밍은 데이터와 함수를 객체라는 그룹으로 묶어서 처리하는 방법이다. 🔢 🔜 예를 들어, 절차지향 프로그래밍에서는 첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리하는 순서대로 프로그램을 만든다. 🧱 💼 반면, 객체지향 프로그래밍에서는 데이터와 함수를 객체라는 그룹으로 묶어서 처리한다. 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(prop..
템플릿 리터럴 (Template literals) 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이다. 백틱(` `) 과 ${ }로 표현한다. Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔다. "string" 'string' new String("string") `string text` `string text string text line2` `string text ${value} text`
나머지 매개변수(rest parameter) ...args : arguments :추가적으로 어떠한 arguments가 들어올 수 있다는 것 꼭 ...으로 args를 명시해줘야만 [ ] 가 삭제된다. function func (a, b, ...args) { console.log(...args) } func(1, 2, 3) // 3 func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7
전개 구문 (...Spread operator) ✅ 배열이나 객체를 전개하는 문법이다. es문법 중 구조분해할당(destructuring)과 함께 정말 많이 사용된다. // 배열 let arr = [1,2,3]; let newArr = [...arr, 4]; console.log(newArr) // [1,2,3,4] // 객체 let user = {name: "nbc", age: 30}; let user2 = {...user} user2.name = "nbc2" console.log(user.name) // nbc console.log(user2.name) // nbc2 ... 은 [ ] 대괄호가 삭제된다.
단축 속성명 (property shorthand) ✅ 객체의 key와 value 값이 같다면, 생략 가능. const name = "nbc" const age = "30" const obj = { name: name, age: newAge } const obj = { name, age }
구조 분해 할당 (De + structuring) 구조 분해 할당이란? 배열[ ]이나 객체{ }의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법. // 배열의 경우 let [value1, value2] = [1, "new"]; console.log(value1); // 1 console.log(value2); // "new" let arr = ["value1", "value2", "value3"]; let [a,b,c] = arr; console.log(a,b,c) // value1 value2 value3 // let [a,b,c] = arr; 은 아래와 동일! // let a = arr[0]; // let b = arr[1]; // let c = arr[2]; let [a,b,c,d] = arr console.log(d) // undef..
삼항 연산자 (ternary operator) condition ? expr1 : expr2 console.log(true ? "참" : "거짓") // 참 console.log(false ? "참" : "거짓") // 거짓 console.log(1 === 1 ? "참" : "거짓") // 참 console.log(1 !== 1 ? "참" : "거짓") // 거짓
화살표 함수 (Arrow Function) 함수 선언문과 함수 표현식 > 화살표 함수 function이나 return 키워드 없이 함수를 만드는 방법. 이것도 역시 ES6에서 처음 소개된 개념. // ES5 function func() { return true } //ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm1, parm2, ...parms) -> {} // 익명 화살표 함수 () => {} this function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.